Cómo crear un formulario de contacto en WordPress

Read this article in English

Hace pocos días, desde SiloCreativo os mostramos algunos de los mejores plugins que podemos encontrar en WordPress para crear un formulario de contacto en nuestro blog o web. De entre todos ellos, uno de nuestros favoritos, y el que usamos en nuestros proyectos, es Contact Form 7. Nos encanta por su flexibilidad para personalizarlo, su facilidad de uso y la cantidad de extensiones que posee. Además, si estás empezando un proyecto personal y no tienes un gran presupuesto para llevarlo adelante, seguro que el hecho de que sea gratuito también es de tu agrado.

Pero si es la primera vez que te vas a crear un formulario de contacto, quizás puedas sentirte abrumado por las opciones que ofrece, o no tengas muy claro cuales son los apartados que debes incluir. Por todo ello, hemos creado este tutorial en el que repasaremos y explicaremos cada una de sus secciones, desde la instalación del plugin hasta su publicación, para que cuando llegues al final, seas capaz de crear el tuyo propio, acorde a tus necesidades.

Instalación de Contact Form 7

La instalación del plugín de Contact Form 7 se hará por el procedimiento habitual. Desde el panel de administración de WordPress, nos vamos a Añadir nuevo dentro del apartado de Plugins. Una vez allí, en la caja de búsqueda escribiremos Contact Form 7. Una vez obtengamos los resultados, instalaremos el plugin y lo activaremos.

Instalación del plugin Contact Form 7

En cualquier caso, si tuvieses alguna duda con respecto a la instalación de plugins en WordPress, te recomendamos que te pases por nuestro artículo que escribimos al respecto, ya que puede resolverte cualquier problema que tengas sobre este tema.

Crear y configurar un formulario de contacto

Una vez que tengamos el plugin instalado, notaremos que se ha añadido un nuevo apartado llamado Contacto a nuestro panel de WordPress. Si entramos, veremos que el plugin viene por defecto con un formulario de contacto predeterminado.

Podemos elegir entre crear un formulario nuevo, editar el existente, o duplicarlo y empezar a modificar desde ahí. Nosotros usaremos esta tercera opción, ya que así empezamos con una cierta base con la que trabajar, y no perderemos el formulario de contacto por defecto que nos viene con el plugin.

Como vemos, aparece un editor de texto con un código creado mediante HTML. Este código será el responsable de crear un formulario de contacto estándar con los campos que queramos. Como se puede ver en la imagen, el formulario por defecto que viene en Contact Form 7 tiene unos apartados con los que nuestros usuarios pueden introducir su nombre, email, asunto, mensaje y un botón para enviar sus datos.

Configuración del formulario en Contact Form 7

Para crear un nuevo campo en nuestro formulario simplemente pulsamos en alguna de las etiquetas de la parte superior. Se nos abrirá una ventana que tendrá diferentes opciones según la finalidad de cada una. Vamos a hacer un listado de la finalidad de cada una de ellas, y así podemos comprobar de primera mano hasta que punto podemos personalizar y añadir opciones en nuestro formulario.

  • Text: nuestros usuarios podrán introducir una texto, como pueda ser su nombre, apellidos, o cualquier otra información
  • Email: para introducir un correo electrónico.
  • URL: este apartado permite que se pueda introducir una URL o dirección web.
  • Tel: crea un espacio para añadir un número de teléfono. Es importante saber que si se añade cualquier símbolo diferente a un número, como pueda ser un guión o un paréntesis, a nuestros usuarios les aparecerá un mensaje de error.
  • Number: simplemente añade un apartado con el que introducir un número. Por ejemplo, puede servir si preguntamos la edad.
  • Date: para introducir una fecha exacta.
  • Text area: parecido al apartado de Text, pero con un campo de área de texto. Útil para los cuerpos de texto del mensaje.
  • Drop-down menu: añadimos un menú desplegable, con diferentes opciones.
  • Checkboxes: se añade un checkbox, por el cual el usuario elige varias de las opciones disponibles.
  • Radio buttons: como el anterior, pero solo permitimos que elija una de las opciones
  • Acceptance: creamos el típico texto donde nuestros usuarios deben aceptar las condiciones de uso.
  • Quiz: creamos una pregunta, en la que si el usuario no da la respuesta correcta, le aparecerá un mensaje de error y no podrá enviar el formulario.
  • File: añade un espacio por el cual el usuario puede adjuntar un archivo. Además, podemos marcar el tamaño máximo del archivo adjunto.
  • Submit: Por último, pero no menos importante, crea el botón por el cual se nos enviará el formulario.

Existe una una opción, llamada reCAPTCHA, que os hemos saltado voluntariamente, ya que la trataremos en la siguiente sección.

Una vez creado el formulario a nuestro gusto pulsamos en guardar. Este es el código resultante del formulario que hemos creado, añadiendo algunos de los campos disponibles:

Formulario personalizado en Contact Form 7

Añadir y personalizar las notificaciones a nuestro correo electrónico

Pasamos al siguiente apartado, llamado Correo electrónico. Si estamos editando el formulario por defecto que nos venía con Contact Form 7 tendremos todos los apartados rellenos, pero tendremos que personalizarlos con nuestros datos.

En esta pestaña introducimos el mail al que llegaran los mensajes. Además, podemos personalizar el formato del correo electrónico que vamos a recibir simplemente utilizando usando los nombres de los campos del formulario. Para facilitarnos las cosas, en la parte superior aparecen todos los apartados que hemos incluido en la pestaña de Form, así no tendemos que ir cambiando de una pestaña a otra.

Notificaciones en el correo de Contact Form 7

 

Como se puede ver en la imagen, hay cinco campos a completar:

  • To: en este apartado indicaremos el correo electrónico, o correos electrónicos, donde queremos que se manden los mensajes que llegarán a través del formulario de contacto.
  • From: está será la etiqueta del nombre de la persona que envió el formulario. Junto a él está la dirección del servidor de correo que usará WordPress para enviar los correos. Este servidor de correo deberá pertenecer a nuestro dominio.
  • Subject:  la etiqueta correspondiente al campo de texto que hemos creado para el asunto. Además, también aparecerá al principio el nombre de nuestra web, lo que nos puede ayudar para filtrar desde nuestra bandeja de entrada de correo, y llevar un mayor control de todo lo que se nos envíe
  • Additional Headers: podemos indicar el correo electrónico del usuario que rellene el formulario mediante su etiqueta correspondiente.
  • Message Body: podemos personalizar el mensaje que nos llegara a nuestro correo electrónico. Lo usual es poner todos los datos que hemos ido añadiendo al formulario, para que nos llegue toda la información por completo.

Contact Form 7 reCaptcha

El reCAPTCHA es una forma de frenar el spam y verificar si quien rellena nuestro formulario es un humano o un bot. Es muy recomendable configurar el reCAPTCHA ya será crítico en que nuestra bandeja de correo no se nos llene de spam. Esta etiqueta inserta el reCAPTCHA de Google, por lo que tendremos que estar registrados en la página de reCAPTCHA para conseguir las API correspondientes, que insertaremos en Contact Form 7.

Para ello, iremos a la web oficial de reCAPTCHA, y accederemos con una cuenta de Google. Completamos un formulario en el que tenemos que indicar cual va a ser la web que vamos a proteger. Cuando tengamos todos los datos introducidos, nos facilitarán las claves API.

Vamos al menú Contacto > Integración y pegamos las dos claves en los campos correspondientes. Ahora será el momento de introducir la etiqueta de reCAPTCHA para que se muestre en nuestro formulario, y así evitar el spam. Una vez creado el formulario a nuestro gusto pulsamos en guardar.

Otros ajustes de Contact Form 7

En la pestaña Messages podemos modificar todos los diferentes avisos que crea Contact Form 7 al interactuar con el formulario. El más típico es el mensaje de error que le aparacerá a nuestro usuario cuando no ha rellenado de forma correcta alguno de los campos. En nuestro caso, al estar trabajando con WordPress en inglés, todos estos mensajes nos aparecen en el lenguaje de Shakespeare, por lo que tendríamos que traducirlos a nuestro idioma. Esto nos da lugar a que podamos poner unos mensajes menos típicos que los que vienen por defecto.

Avisos en los formularios de Contact Form 7

Añadir una página de contacto al menú

Una vez creado, solo nos quedará insertar nuestro formulario en una de nuestras páginas de nuestro blog. Para ello, sólo tenemos que copiar el shortcode que aparece al lado del listado de formularios que hayamos creado, dentro del apartado de Contactos de nuestro panel de WordPress.

Shortcodes en Contact Form 7

Este shortcode lo pegaremos en la página de WordPress que veamos oportuna. También se puede copiar en un widget de texto.

Plugins para Contact Form 7

Por último, también es importante comentar que además de todas las opciones que el propio Contact Form 7 trae por defecto, podemos ampliarlas mediante el uso de diferentes extensiones. Aquí teneis algunas de las más interesantes:

  • CF7 Customizer: para personalizar aun más el aspecto de nuestro formulario
  • Contact Form 7 Success Page Redirects: Tras enviar el formulario, enviará a nuestro usuario a una página externa.
  • Contact Form 7 WooCommerce Orders: Nuestro formulario ahora podrá crear pedidos en WooCommerce
  • Contact Form 7 Mailchimp Extension: Se enviarán los emails al servicio de de Mailchimp.

Comentarios (2)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *