Formularios en WordPress

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Medio

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.

1. Contact Form 7: el consentido de la casa

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!

1.1 Instalación de Contact Form 7

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.
Formularios en WordPress

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.

Formularios en WordPress

Formulario de contacto en Contact Form 7

1.2 Configuración de 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:

1.2.1 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:

Formularios en WordPress

Personalización del formulario de contacto en Contact Form 7

Cada campo está conformado por la siguiente cadena:

<label> Nombre (requerido)
[text* nombre] </label>

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.

1.2.2 Correo electrónico

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

Veamos un ejemplo:

Formularios en WordPress

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.

1.2.3 Mensajes

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.

1.2.4 Ajustes adicionales

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.

1.3 Puesta en marcha de Contact Form 7

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.

Formularios en WordPress

Shortcode de Contact Form 7

El shortcode que genera Contact Form 7 no es único. El de la imagen es el que ha generado en mi sitio web pero puede variar en tu sitio web con un "id" y "title" diferentes.

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

1.3.1 Insertar Contact Form 7 en WordPress

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.

Formularios en WordPress

Formulario de contacto con WordPress

1.3.2 Insertar Contact Form 7 en Elementor

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.
Formularios en WordPress

Formulario de contacto con Elementor

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

Formularios en WordPress

Formulario de contacto desde WordPress

Formularios en WordPress

Formulario de contacto desde Elementor

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 este ejemplo estamos utilizando la plantilla Astra y el plugin Elementor. Cuando realizamos el procedimiento anterior, de alguna manera Elementor, ha desconfigurado algunos ajustes de la plantilla.

Casualmente me he dado cuenta de este pequeño detalle que no sé si llamarle "error" o "casualidad". El hecho es que no debería de haber sucedido algo así y esperaremos a que, en futuras actualizaciones, solucionen este "detalle".

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

  1. Haz clic en el icono para acceder al menú principal de Elementor.
  2. Haz clic en SALIR AL ESCRITORIO.
Formularios en WordPress

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í:

Formularios en WordPress

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.

Después de este ejemplo, es posible que estés pensando: ¡Uff, que lío es trabajar con Elementor!

Puede que ahora te parezca un lío, pero:

  • Si decides trabajar solo con el editor de texto de WordPress, tendrás muchas limitaciones y nunca podrás conseguir diseñar un sitio web realmente profesional y adaptado a versiones responsivas.
  • Trabajar con Elementor, aunque al principio cuesta un poco, a la larga ofrece un sin fin de ventajas y, con algo de práctica, será cada vez mas sencillo trabajar con este editor de contenidos.

2. Filtrar el SPAM en Contact Form 7

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.
Formularios en WordPress

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.

Formularios en WordPress

Claves de reCAPTCHA

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

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.

Formularios en WordPress

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.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(5 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.