Formularios en WordPress

Los formularios son uno de los elementos más importantes que componen un sitio web. Su función principal es hacer que los usuarios entren en contacto ya sea para solicitar información, comprar productos o registrarse entre muchas de las funciones que estos ofrecen.

Existen cientos de formas de crear formularios en WordPress: ya sea manualmente mediante HTML o mediante plugins gratuitos y de pago que ofrecen esta función.

El pluging Contact Form 7 se ha convertido por excelencia en el plugin para formularios en WordPress más utilizado. Con este excelente plugin podemos crear todo tipo de formularios y personalizarlos a nuestro antojo.

Cabe destacar que es gratis y suele tener algunas limitaciones si se pretende usar como formulario de registro o conectar con bases de datos pero para lo básico, enviar formularios desde un sitio web, ¡es perfecto!

Para instalar el plugin:

1. Dirígete al apartado Plugins >> Añadir nuevo.
2. En el campo de búsqueda escribe Contact Form 7.
3. Haz clic en el botón Instalar ahora y a continuación en Activar.

Plugin Contact Form 7

Se creará un nuevo apartado en el menú de WordPress llamado Contacto. Por defecto, el plugin, ha creado un formulario llamado Formulario de contacto 1.

Dirígete al apartado Contacto y haz clic en Formulario de contacto 1 para editarlo.

Formulario de contacto en Contact Form 7

El campo donde pone Formulario de contacto 1 será donde debes escribir el título del formulario. Es recomendable que lo cambies por si vas a utilizar más de 1 formulario en tu sitio web.

Veamos las pestañas que componen la configuración del formulario:

En este campo es donde se diseña el formulario. Cuenta con todos los campos necesarios para la creación de cualquier tipo de formulario en WordPress.

Lo modificamos un poco y vemos como nos queda:

Personalización del formulario de contacto en Contact Form 7

Cada campo está conformado por la siguiente cadena:

Veamos que significa:

• <label>: es una etiqueta HTML para independizar un campo de otro.
• Nombre (requerido): indicará al usuario que tiene que escribir en el campo. El texto (requerido) le indica al usuario que el campo es obligatorio.
• [text* nombre]: es el shortcode de función del campo:
  • text, significa que es un campo de texto.
  • el asterisco, significa que el campo será obligatorio.
  • nombre, es la etiqueta de control del formulario. Puedes poner lo que quieras en esta etiqueta aunque te recomiendo que la hagas coincidir con el nombre del campo.

En esta pestaña es donde se configuran los valores para el envío del formulario.

Veamos un ejemplo:

Configuración del formulario de contacto en Contact Form 7

Fíjate que en la pestaña Formulario, cada campo que has creado, asigna una etiqueta única. En esta pestaña haremos uso de estas etiquetas.

Para este ejemplo se han creado las etiquetas: [nombre] [email] [asunto] [mensaje].

Veamos como configurar cada campo:

• Para: aquí deberás escribir el correo electrónico donde quieres recibir los mensajes enviados desde el formulario.
• De: será quién envíe el formulario. Configúralo como en la imagen, utilizando el dominio de tu sitio web para que no se genere ningún error.
• Asunto: es el asunto que aparecerá en la cabecera del correo electrónico que recibas. Por ejemplo: Solicitud de Información.
• Cabeceras adicionales: puedes dejarlo en blanco.
• Cuerpo del mensaje: aquí es donde se hará uso de las etiquetas anteriormente mencionadas.

Adicionalmente puedes configurar un correo de respuesta automática en el apartado Correo electrónico (2) que podrás encontrar más abajo.

Este correo lo recibirá el usuario cuando envíe el formulario de contacto. En la imagen tienes un ejemplo de como hacerlo.

Son los avisos que muestra el plugin en el sitio web según la acción que realice. Puedes acceder y modificar estos avisos a tu gusto.

En esta pestaña se pueden añadir códigos personalizados. En este enlace puedes ver qué tipos de códigos se pueden añadir en esta pestaña.

Una vez hayas configurado todos los campos correctamente, añade el formulario al sitio web.

Si te fijas, debajo del título del formulario aparece el siguiente mensaje: Copia este shortcode y pégalo en el contenido de una entrada, página o widget de texto:.

Lo que aparece debajo, sombreado en azul, se llama "shortcode". Es un comando con el que WordPress puede leer el código fuente del formulario de contacto que acabas de crear.

Cópialo y haz clic en el botón Guardar.

Shortcode de Contact Form 7

Dirígete al apartado Páginas y accede o crea la página donde quieras insertar el formulario de contacto.

Si estás trabajando con el editor de texto de WordPress, solo tienes que pegar el shortcode del formulario de contacto en la caja de edición de texto.

Haz clic en Publicar o Actualizar, según sea el caso.

Formulario de contacto con WordPress

Continuando con el curso de WordPress, vamos a ver como insertar un formulario de contacto en Elementor: el editor de contenidos que estamos utilizando en el desarrollo de este curso.

1. Haz clic en Editar con Elementor en la página donde quieras insertar el formulario de contacto.
2. En la pestaña General, busca el elemento Shortcode. Selecciónalo y arrástralo al cuerpo del contenido.
3. Pega el shortcode del formulario de contacto en el campo Introduce tu shortcode.
4. Haz clic en APLICAR.
5. Haz clic en Publicar o Actualizar, según sea el caso.

Formulario de contacto con Elementor

Observa las siguientes imágenes (haz clic en cada una para ampliarlas):

Las 2 imágenes corresponden al mismo formulario de contacto, en la misma página pero, en la primera imagen hemos insertado el formulario desde el editor de texto de WordPress y en la segunda desde Elementor.

¿Por qué se ven diferentes?

Para que el formulario se vea igual en cada uno de los casos, tendríamos que realizar los siguientes pasos adicionales (continuamos desde Elementor):

6. Haz clic en el icono para acceder al menú principal de Elementor.
7. Haz clic en SALIR AL ESCRITORIO.

Ajustes de Astra modificados por Elementor

Como puedes observar en la imagen, los Ajustes de Astra han cambiado debido a que hemos actualizado el contenido de la página desde Elementor.

Volviendo a los ajustes iniciales de la página, nos quedaría algo así:

Ajustes de Astra originales

Una vez cambies los ajustes, haz clic en el botón Actualizar.

Si visualizas nuevamente la página en el navegador, podrás comprobar que el formulario de contacto se ve igual que cuando insertamos el formulario de contacto desde el editor de texto de WordPress.

Los formularios son uno de los principales focos de SPAM en Internet. Existen robots cada vez más inteligentes dedicados a rellenar formularios automáticamente por donde quiera que pasan.

Para luchar contra estos intrusos, se han creado y perfeccionado sistemas anti SPAM como reCAPTCHA que verifican si es una persona o un robot el que envía un formulario.

reCAPTCHA es un servicio que ofrece Google para combatir con el SPAM en Internet. Solo hace falta tener una cuenta en Google y listo.

Para integrar reCAPTCHA en cualquier formulario de Contact Form 7, sigue el siguiente procedimiento:

1. Dirígete a https://www.google.com/recaptcha/intro/v3.html y haz clic en Admin console.
2. Inicia sesión en tu cuenta de Google.

Registrar un dominio en reCAPTCHA

• Etiqueta.
  Indica un nombre al reCAPTCHA que vas a crear. Intenta que sea descriptivo según el uso que le vas a dar.
• Tipo de reCAPTCHA.
  En el sitio oficial de Contact Form 7, recomiendan utilizar el servicio reCPATCHA v3.
• Dominios.
  Indica el dominio donde vas a utilizar el servicio.
• Acepta las condiciones del servicio.
• Haz clic en Enviar.

El servicio generará 2 claves: clave de sitio web y clave secreta. Cópialas en un lugar seguro y regresa a WordPress.

Claves de reCAPTCHA

3. Dirígete al apartado Contacto >> Integración.
4. En el recuadro de reCAPTCHA, haz clic en el botón Integración de la instalación.
5. Ingresa las claves que has obtenido del servicio en cada uno de los campos.
6. Haz clic en el botón Guardar cambios.

Integración de reCAPTCHA con Contact Form 7

Y eso es todo. Como podrás observar, el formulario no sufre ninguna alteración ya que el servicio reCAPTCHA v3 no añade el típico widget de verificación que estarás acostumbrad@ a ver.

En su lugar, se mostrará el icono de reCAPTCHA en el lateral derecho del sitio web indicando que el formulario de contacto está protegido por este sistema anti SPAM.

reCAPTCHA en un sitio web

Básicamente esta sería la forma más sencilla de crear un formulario en WordPress con el plugin Contact Form 7.

Aunque es un plugin sencillo de utilizar, con un poco de conocimientos de HTML, CSS y JavaScript, se puede conseguir ampliar su funcionamiento.

En la lección, HTML y CSS para WordPress, te indico algunas reseñas donde aprender a utilizar estos lenguajes.