Cómo configurar formularios de contacto en WordPress

Los formularios de contacto son una pieza esencial de la mayoría de los sitios web, ya que es la principal forma que tienen los visitantes de comunicarse con el propietario de la web.

En WordPress puedes crear tus propios formularios con relativa facilidad usando los plugins adecuados.

Incluso con ellos puedes crear una gran variedad de páginas: desde simples formularios de contacto, hasta calendarios de citas y reservas para tu propio negocio.

Y en este post te explico cómo.

¿Por qué los formularios son importantes?

Los formularios son, tarde o temprano, necesarios en todo sitio web. Es la única forma posible de enviar información estructurada y almacenarla correctamente en una página web.

Tener algo tan sencillo como un formulario de contacto es necesario, seas una pequeña empresa o una tienda online.  Así podrás recibir mensajes y comunicaciones de tus visitantes.

También podrías publicar tu dirección de correo y prescindir de formularios, pero eso sólo originaría que recibieras una gran cantidad de spam en tu bandeja de entrada.

La ventaja principal de los formularios web es que te ofrecen la posibilidad de procesar toda la información introducida en ellos, y usarla de una u otra forma dependiendo de tus necesidades.

Por ejemplo, puede ser interesante almacenar todas las direcciones de correo de tus solicitudes de contacto en una base de datos. De esa forma sabrás quiénes te han estado contactando y enviarles alguna oferta.

¿Cómo crear formularios en WordPress?

Al instalar WordPress te darás cuenta de que ya viene con algunos formularios específicos.

Por ejemplo, el buscador nativo que puedes incluir usando el widget correspondiente, y con el que puedes realizar búsquedas avanzadas del contenido de tu web.

Pero si quieres crear formularios personalizados y usarlos para una actividad en particular, necesitarás utilizar algún plugin para ello.

Hay gran cantidad de plugins que puedes utilizar para crear formularios de contacto y realizar una gran cantidad de tareas diferentes. Pero te recomiendo elegir uno de los más populares que existen: Contact Form 7.

Plugin Contact Form 7

Es un plugin gratuito, con una enorme cantidad de descargas y un uso muy activo.

Es muy sencillo de usar si estás empezando y te permite probar nuevas formas de recoger datos desde tu página web. Además, en su web oficial puedes acceder a una documentación (en inglés) bastante completa.

Con este plugin puedes crear formularios sencillos, mediante los cuales puedes recibir la información que tus visitantes puedan introducir.

Este plugin no sirve solo para crear formularios de contacto, sino que además puedes emplearlo para otros usos:

• Formularios de registro
• Consultas de citas
• Solicitudes de presupuesto
• Botones «Llámame»

Además, podrás encontrar algunos plugins adicionales que complementan la funcionalidad de Contact Form 7 en el repositorio oficial de WordPress.

¿Cómo funciona?

La manera de trabajar con Contact Form 7 es bastante sencilla.

Una vez instalado el plugin, verás que aparece una nueva sección en tu panel de administración denominada Contacto. En esta sección puedes generar todos los formularios que desees, cada uno con sus correspondientes campos y textos de respuesta.

Una vez creados los formularios, podrás insertarlos con un shortcode que el plugin te ofrece, basándose en una ID única para cada uno.

Al igual que el resto, este shortcode puedes añadirlo en cualquier lugar de tu sitio WordPress:

• al contenido de tus páginas,
• como un widget de texto, o
• en algún area especial si el tema WordPress que utilizas lo permite.

Siempre que un usuario rellene tu formulario, sus datos se enviarán en un email a la dirección que indiques, y con el formato que quieras. Y así te enviarán notificaciones cada vez que alguien quiera contactar contigo.

Crear un formulario

Mediante Contact Form 7 puedes usar una extensa caja de texto para crear el formulario a mano.

Con esto, el plugin es muy flexible ya que se convierte en un lienzo en blanco. Pero, si no tienes conocimientos de HTML o algún lenguaje parecido, puede ser un poco complejo de usar.

A la derecha de la caja de texto tiene un generador de campos que te facilitará mucho las cosas.

Los formularios en Contact form 7 se generan combinando una serie de etiquetas propias del plugin, que sirven para incluir los distintos campos del formulario y establecer los valores que deben tener.

La construcción de estas etiquetas sería la siguiente:

[text* campo-nombre 30/50 “Introduce Tu Nombre”]

Ese código establecerá un campo de texto con los siguientes valores:

• text: Señala que se trata de un campo de texto.
• Asterisco (*): Se refiere a que el campo es obligatorio y no puede estar vacío.
• campo-nombre: Alude al nombre de referencia del campo, y tiene que ser único.
• 30/50: Muestra el tamaño del campo (30), y el número de caracteres máximo (50).
• “Introduce Tu Nombre”: Alude al texto que va a mostrarse cuando el campo está vacío.

Esta sintaxis para generar los campos puede resultar algo complicada, pero tiene muchas opciones para abarcar todos los casos de uso posibles.

Puede utilizarse un campo más simplificado ya que la mayoría de esos atributos es opcional. Sería:

[text* campo-nombre]

A que ahora no es tan complicado?

Con este plugin no sólo puedes crear campos de texto, también tienes opción de insertar todo tipo de elementos a tu formulario:

• listas desplegables,
• casillas,
• subida de archivos,
• campos de fecha, y muchos más.

Muchos de estos campos tienen su forma particular de ser configurados debido a su naturaleza.

Configurar las opciones

Cuando ya tienes creado tu formulario, puedes configurar los mensajes de aviso/error y el email que Contact Form 7 te enviará.

En el cuerpo del correo tienes que poner cada uno de los campos que has incluido en el propio formulario.

Con esto podrás organizar el correo como quieras, y también enviarlo a tantos destinatarios como desees.

Integración con reCAPTCHA

Un componente de seguridad que es importante añadir a nuestro formulario es el Captcha. Consiste en un código de letras y números para evitar que los robots spammers llenen tu bandeja de entrada de correos basura.

El mejor para nosotros, es ReCaptcha, de Google. Con este método, nos aparece un campo para pinchar si somos humanos.

Para incorporarlo con Contact Form 7 tenemos que registrarnos en la web del servicio reCAPTCHA y damos de alta un nuevo sitio y dominio.

Obtendremos dos datos,

• Clave del Sitio y
• Clave Secreta.

Introducimos estas claves en “Contacto / Integración” dentro del menú del panel de administración de WordPress.

Una vez hecho esto, ya puedes incluir tu reCAPTCHA desde los campos de formulario.

Insertar el formulario

Una vez creado tu formulario, ahora sólo te queda añadirlo a tu sitio web. Tanto en la lista de formularios como en la pantalla de edición, verás que Contact Form 7 te facilita en todo momento un shortcode para insertarlo, con el siguiente aspecto:

Normalmente, será suficiente copiar y pegar este código en cualquiera de tus páginas o entradas. Podrás ver cómo aparece el formulario en mitad de tu contenido al cargarla.

Otros plugins para Contact Form 7

Finalmente, es importante también mencionar que además de todas las opciones que el propio Contact Form 7 tiene por defecto, es posible ampliarlas utilizando diferentes extensiones.

Aquí tienes las más interesantes:

• CF7 Customizer: para personalizar aun más el aspecto de nuestro formulario
• Success Page Redirects: Una vez enviado el formulario, remitirá a nuestro usuario a una página externa.
• WooCommerce Orders: Tu formulario podrá generar pedidos en WooCommerce
• Mailchimp Extension: Se enviarán los emails al servicio de de Mailchimp.

¿Y tú? ¿Cómo creas tus formularios de contacto para tu sitio WordPress? Espero tus comentarios.