Tutorial de Contact Form 7 para WordPress

Autor: | 2019-07-23T10:46:13+00:00 Fecha: 30/05/2019|Categorías: WordPress|Comentarios: Ningún comentario

Una de las funcionalidades más importantes de una página web es el formulario de contacto. A través de él, el usuario puede ponerse en contacto contigo de forma rápida y sencilla. Tan solo debe rellenar unos campos (nombre, email, mensaje, etc.) y hacer clic en el botón de Enviar.

El formulario de contacto ahorra al usuario el paso de abrir su proveedor de correo electrónico. Además, si está bien configurado, sabes que te van a llegar todos los mensajes, ya que no existe la posibilidad de poner mal el destinatario.

Por si fuera poco, con un formulario de contacto proteges tu privacidad en Internet, ya que no hace falta que pongas tu email, lo que te ahorrará mucho spam en tu bandeja de entrada.contactform7-plugin-wordpress

Contact Form 7 es el plugin de formularios de contacto para WordPress más utilizado. Actualmente, cuenta con más de 5 millones de instalaciones activas y una valoración media de 4,2 estrellas. Está disponible en 57 idiomas.

Es un plugin gratuito, lo que fomenta su uso y aumenta su popularidad. Cuenta con las funcionalidades básicas de un formulario de contacto y además permite añadir la casilla de verificación para aceptar la Política de Privacidad.

Del mismo modo, existen multitud de addons que permiten personalizar Contact Form 7. Estas extensiones añaden características como redirigir al usuario después de enviar el formulario, añadir un captcha para evitar el uso de bots o integrar una plataforma de pago con PayPal.

Hemos hablado en otras ocasiones sobre el plugin Contact Form 7, tanto en el post de los 51 trucos para WordPress, como en el de las 15 cosas para hacer después de instalar WordPress.

Existen alternativas mucho más potentes, como Gravity Forms, pero ni es gratuito ni es fácil de configurar. Así que se puede decir que Contact Form 7 es uno de los mejores 10 plugins de formulario de contacto para WordPress.

Vamos a ver cómo descargarlo.

 

Descargar e instalar Contact Form 7

Puedes descargar Contact Form 7 desde el repositorio oficial y después subirlo a tu WordPress desde Plugins > Añadir nuevo > Subir plugin o puedes evitarte el paso anterior yendo directamente al gestor de plugins de WordPress.

Si eliges la última opción, no necesitas descargarlo, sino que basta con ir al buscador y poner el nombre. A continuación, haz clic en Instalar ahora y, posteriormente, en Activar.

contactform7-anadir-plugin

 

Cómo configurar Contact Form 7

Al instalar y activar Contact Form 7, se añade una nueva pestaña en el menú lateral de WordPress en la que aparece el icono de un sobre y pone Contacto. Dentro de ella, aparecen 3 apartados:

  • Formularios de contacto: aquí aparecen los formularios de contacto que hayas creado. Por defecto, viene el “Formulario de contacto 1”.
  • Añadir nuevo: para añadir nuevos formularios para tu web.
  • Integración: permite vincular el plugin con el proveedor de email marketing Constant Contact y con el captcha de Google (llamado reCAPTCHA).

El plugin no tiene ninguna configuración como tal, ya que esta se realiza directamente en cada uno de los formularios de contacto. Resulta muy útil para personalizar cada formulario al máximo, aunque podría partir de una configuración general que se estableciera por defecto para todos los formularios.

 

Crear un formulario con Contact Form 7

Esta es la funcionalidad del plugin y la cumple a la perfección. Para crear un formulario de contacto, basta con ir a Contacto > Añadir nuevo.

anadir-formulario-de-contacto

Ahora es el momento de ponerle un título al formulario.

También se puede hacer mediante la ruta Contacto > Formularios de contacto > Añadir nuevo.

formularios-de-contacto

Una vez dentro del formulario, verás las 4 pestañas de configuración:

 

  • Formulario: aquí se configuran qué campos aparecen en el formulario, en qué orden y si son obligatorios o no. Los hay de diversos tipos: texto, correo electrónico, teléfono o aceptación son algunos de ellos.

 

crear-formulario-formulario

 

  • Correo electrónico: es momento de editar la plantilla de correo electrónico que llegará cada vez que un usuario rellene el formulario. Puedes poner el email que quieras. Lo que no podrás cambiar es el correo desde el que llega. En esa casilla te recomiendo poner [your-name] por delante para que sea más sencillo identificar cada mensaje y su remitente.

 

crear-formulario-correo-electronico

 

  • Mensajes: el plugin muestra una serie de información al usuario cuando está rellenando el formulario y cuando lo envía. Son mensajes del tipo: “Este campo es obligatorio” o “Gracias por tu mensaje. Te contestaremos en breve ;)”

 

crear-formulario-mensajes1

crear-formulario-mensajes2

 

  • Ajustes adicionales: como su nombre indica, sirve para añadir funcionalidades. Quizá la más interesante sea la de redirigir al usuario a una página de Gracias (o la que quieras) una vez que se envíe el formulario. Para ello basta con poner lo siguiente: on_sent_ok: “location = ‘http://tupagina.com/’;”

 

Y sustituir la URL por la tuya.

crear-formulario-ajustes-adicionales

Por último, guarda los cambios haciendo clic en el botón azul y listo.

En la ventana de los formularios (Contacto > Formularios de contacto), se almacenan todos los formularios que crees con sus respectivos shortcodes. Si copias ese código corto y lo pegas en cualquier parte de tu web (página, entrada o widget), aparecerá el formulario vinculado a dicho shortcode.

Por ejemplo, si tienes una página de Contacto y quieres insertar el formulario que has creado, basta con que vayas a editar la página y pegues su respectivo shortcode.

insertar-formulario-de-contacto

Actualiza la página y refresca el navegador. Verás algo similar a esto:

formulario-de-contacto

La última pestaña, de las 3 que tiene Contact Form 7, es la de Integración. Desde ella, puedes integrar el servicio de email marketing Constant Contact, que no es de los más conocidos en la blogosfera hispana.

Otra opción es la de añadir un captcha, en este caso, el de Google. Te explico cómo hacerlo un poquito más adelante.

contactform7-integracion

 

Plantillas para Contact Form 7

Como cada formulario se elabora con la composición de diferentes campos, existe la posibilidad de crear plantillas a partir de las necesidades de cada web. Por ejemplo, puedes crear una plantilla de formulario de contacto (nombre, email, mensaje), otra de servicios (a elegir entre básico, pro, VIP) y otro compra de un ebook (con integración con PayPal).

El hándicap es que Contact Form 7 no permite guardar plantillas como tal. Esto no supone mayor problema si las vas a usar en la misma web, ya que puedes duplicar los formularios con tan solo ponerte sobre uno y hacer clic en Duplicar.

contactform7-duplicar-formulario

El inconveniente principal es que no podrás usar esas plantillas en otras instalaciones porque el plugin no incorpora la opción de exportarlas e importarlas desde otras instalaciones de WordPress.

TRUCO: Si seleccionas el texto del formulario y lo guardas en un documento de texto, podrás usarlo en otra página web.

contactform7-copiar-formulario

Otra opción interesante es utilizar el plugin Contact Form 7 Style, que incorpora una docena de plantillas predefinidas (de San Valentín, de Navidad, en dos columnas…), así como la posibilidad de crear las tuyas propias.

Es un plugin que resulta útil porque permite configurar los elementos y los márgenes, pero carece de un editor visual, por lo que si sus plantillas no te convencen es probable que no te aporte gran cosa.

Te enseñaré plugins para personalizar Contact Form 7 un poco más adelante.

 

Recaptcha en Contact Form 7

Captcha es un acrónimo que responde a las sigas Completely Automated Public Turing test to tell Computers and Humans Apart, es decir, una prueba para comprobar si eres humano o un robot. Son esas letras y números que nos hacen poner antes de descargar algo de Internet o de, como es el caso, enviar un formulario.

El captcha de Google se llama reCaptcha. Es una de las dos opciones que aparece en el apartado Integración de Contact Form 7.

contact-form-7-recaptcha

Para configurarlo, basta con ir a la web oficial y rellenar el formulario.

Los datos que tendrás que rellenar son los siguientes:

contact-form-7-recaptcha2a

  • Etiqueta: un nombre para identificar tu web. Por ejemplo, Raiola.
  • Tipo de reCAPTCHA: hay dos versiones, la V3 que es automática y la V2 que es manual y cuenta con varias opciones. Elegiremos la V3, que no necesita introducir ningún código.
  • Dominios: tu dominio principal. Por ejemplo, raiolanetworks.es.
  • Propietarios: las cuentas de Gmail con acceso a ese recaptcha.

contact-form-7-recaptcha2b

A continuación, hay dos casillas de verificación:

  • Condiciones del servicio: es obligatorio marcarla.
  • Enviar alertas a los propietarios: para que Google te avise si hay algún problema.

Por último, haz clic en el botón Enviar.

El servicio te da dos claves: clave del sitio web y clave secreta.

contact-form-7-recaptcha3-claves

Cópialas en un bloc de notas, ya que las vas a necesitar para vincular el servicio con tu web. Para ello, ve a Escritorio > Contacto > Integración y dentro del recuadro de reCaptcha hazr clic en Integración de la instalación.

Te aparecerá la siguiente pantalla. Introduce tus claves y haz clic en Guardar cambios.

contact-form-7-recaptcha-integracion

Ya está el sistema de recaptcha en funcionamiento. Debes saber que la versión 3 (v3) verifica si una interacción es legítima sin la interacción del usuario, por lo que no es visible a la hora de enviar el formulario.

 

Personalizar Contact Form 7

Uno de los puntos débiles de Contact Form es la ausencia de un editor visual con el que poder darle los colores deseados, dividirlo en columnas y, en general, personalizar el diseño.

Siempre se puede recurrir al CSS utilizando la clase wpcf7-form, pero requiere conocimientos de ese lenguaje. Por eso, si quieres personalizar Contact Form 7 de forma rápida y sencilla, te recomiendo que utilices un plugin.

Hay dos plugins potentes y fáciles de utilizar que cuentan con editores drag & drop:

  • WordPress Form Customizer: el personalizador de Contact Form por excelencia.

Contact Form 7 Skins: una alternativa muy completa.

wordpress-form-customizer

WordPress Form Customizer es el plugin más conocido para personalizar los formularios de contacto a tu gusto. Una vez instalado y activo, se integra en el Personalizador de WordPress. Para usarlo, basta con que vayas a Escritorio > Apariencia > Personalizar.

Desde ese menú puedes cambiar los colores (textos, campos, botones, fondo), los estilos (texto, cajas, botones), el tamaño de los elementos, los márgenes y los bordes.

contact-form-7-skins

Contact Form 7 Skins es un completo plugin que añade un editor visual drag & drop (arrastrar y soltar) a la interfaz de Contact Form 7, lo que facilita notablemente la creación y personalización de los formularios y su integración con el diseño de la página web.

Además, cuenta con plantillas con los formularios de contacto más frecuentes.

Este plugin cuenta con algunos complementos de pago:

  • CF7 Skins Pro: mayor cantidad de plantillas y estilos disponibles.
  • CF7 Skins Ready: más opciones de personalización del diseño.
  • CF7 Skins Multi: permite dividir los formularios en partes (varias pestañas).
  • CF7 Skins Logic: interactúa con el usuario mostrando u ocultando campos en función de los valores que va introduciendo.

Todas estas extensiones y addons incluyen soporte prioritario vía email.

Hay otras opciones de personalización que no tienen que ver con el aspecto de los formularios y que resultan igualmente interesantes, entre las que destaca la posibilidad de integrar pagos con PayPal a través de Contact Form 7 PayPal & Stripe Add-on.

 

Errores habituales

Puede que hayas seguido al pie de la letra este tutorial y te hayas encontrado algún error de Contact Form 7 por el que no estás recibiendo las consultas desde tu formulario. Incluso es posible que te funcionara y, a raíz de una actualización, haya dejarlo de hacerlo.

Y es que hay una serie de causas que impiden que recibas los mensajes. Voy a tratar de ayudarte a solucionarlas. Estos son los errores más habituales.

 

Problemas con la configuración del formulario

Si el formulario tiene los campos adecuados y el botón de Enviar, los problemas de configuración de Contact Form 7 estarán en la pestaña Correo electrónico (Contacto > Formularios de contacto).

Todos los campos son importantes en esta casilla. En Para puedes poner el correo que quieras. Obviamente, tienes que tener acceso a él para poder consultarlo.

De suele ser la que da más problemas. Anteriormente, se podía poner [your-name] [your-email]. De hecho, así me gustaba configurarlo a mí, de forma que sabías quién te enviaba el mensaje y cuál era su correo, que es como si te enviara un email directamente.

Lo cierto es que esta configuración empezó a dar problemas, por lo que lo recomendable es poner <email@tudominio.com>, donde email es el nombre de tu correo y tudominio.com es el dominio de tu web. Aquí no puedes poner cualquier correo, sino uno con ese dominio.

Si quieres, puedes poner por delante [your-name], para saber quién te lo envía. De este modo, la casilla De quedaría así: [your-name] <email@tudominio.com>

IMPORTANTE: no olvides poner los símbolos <>, el menor que (<) antes del email y el mayor que (>) después del email. Tampoco dejes espacios entre medias.

Otra casilla que da problemas suele ser la de Cabeceras adicionales. Aquí lo recomendable es que esté como viene por defecto, es decir, Reply-To: [your-email].

Antes se podía dejar en blanco, ya que en la casilla De se ponía el email del usuario.

En el Cuerpo del mensaje basta con que aparezca lo siguiente: Cuerpo del mensaje:[your-message] El resto es prescindible.

 

Contact Form 7 no envía

Este es el problema más frustrante. Y es que has dedicado tiempo y esfuerzo en configurar el plugin, crear el formulario, ponerlo bonito y… nada. No funciona.

Hay 3 problemas por lo que Contact Form no envía un formulario.

El primero es que que no has puesto un correo asociado a tu dominio en el campo De de la configuración Correo electrónico del formulario. Si tu web es pepito.com, tu correo debe ser info@pepito.com

El segundo es una incompatibilidad con el plugin de caché. No es lo más habitual pero puede ocurrir. Prueba a desactivarlo, a ver si funciona.

El tercero y más habitual es un error con la función PHP Mail. Suele dar muchos quebraderos de cabeza ya que no es un error propiamente del plugin sino del hosting o, mejor dicho, de la integración con este.

En primer lugar, habla con tu proveedor de hosting y asegúrate de que tiene activa esta función de PHP. Para evitar este problema, es recomendable contratar un plan de hosting WordPress, que viene con todas las configuraciones para que todo funcione correctamente.

Si el problema persiste, tendrás que configurar los envíos para que se realicen a través de SMTP. Para ello, te recomiendo que instales el plugin WP Mail Bank.

 

Los correos no te llegan

Si los formularios están bien configurados y Contact Form 7 los envía correctamente, puede que el problema esté en tu lado, ya sea en tu web o en tu gestor de correo electrónico.

El primer caso es porque estás trabajando en local y eso significa que estás en tu ordenador, no en Internet. Por tanto, es imposible que funcione.

Y el segundo caso es que haya algún problema con tu gestor de correo, bien porque te esté marcando como spam y no te hayas dado cuenta, bien porque consulte tu correo cada X tiempo (por ejemplo, cada hora) y estés impaciente por recibirlo.

 

Conclusión

Los formularios de contacto son un elemento imprescindible en la web de cualquier negocio online, ya que permiten que cualquier usuario interesado en tu producto o servicio dé el primer paso para convertirse en tu cliente.

Para el visitante es más fácil contactarte, porque lo puede hacer directamente a través de tu web, sin necesidad de abrir el correo electrónico. Además, se elimina el riesgo de que escriba mal tu email y no te llegue su mensaje.

También son más respetuosos con tu privacidad y te evitas el spam que recibirías si pones tal cual tu email de contacto al alcance de los bots.

Contact Form 7 es un plugin gratuito que funciona muy bien con el que puedes crear formularios de contacto de forma rápida y sencilla para que tus potenciales clientes contacten contigo.

Sus opciones son algo más limitadas que las de otros plugins premium, pero gracias a la gran cantidad de addons de los que dispone es posible cubrir sus carencias, como la integración con una pasarela de pago o la posibilidad de personalizar el diseño.

Con la llegada de los constructores visuales para WordPress (Elementor, Arquitect, etc.) y la incorporación de formularios de contacto en sus versiones de pago, Contact Form 7 ha perdido peso en el mercado, ya que los usuarios de estos plugins ya no lo necesitan.

Sería fantástico que en las próximas versiones incorporase un editor visual por defecto, para no tener que recurrir a CSS o plugins adicionales para realizar una función que considero básica y poder mantener su liderazgo.

¿Qué plugin utilizas para crear tus formularios de contacto? ¿Conocías todas las posibilidades de Contact Form? ¿Hay alguna extensión que utilices y consideres imprescindible?

[Total: 3 Promedio: 5]

Autor:

Pablo Moreno
Redactor SEO. Mi pasión es crear contenido de mucho valor que ayude al usuario y seduzca a los buscadores. Me encanta escribir, la comunicación audiovisual y la informática.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies