Cómo configurar el plugin Contact Form 7 en WordPress – Tutorial completo

Hola a todos/as, soy Danyel Perales, desarrollador WordPress y hoy os traigo un tutorial sobre qué es y cómo configurar Contact Form 7 partiendo desde un punto básico, hasta llegar a configuraciones avanzadas para los que quieran optimizar al máximo con el plugin gratuito por excelencia para crear un formulario de contacto en WordPress.

Antes de meternos en faena, me gustaría aprovechar para agradecerle a Sergio la gran oportunidad de poder aportar mi granito de arena a su magnífico proyecto.

Espero estar a la altura y que os guste lo que vamos a aprender.

Esta herramienta casi ancestral, es uno de los plugins más descargados del repositorio oficial y con sus más de 5 millones de instalaciones activas se ha convertido en un básico de casi cualquier instalación de WordPress compatible con todas las versiones hasta la fecha.

¿Quién está detrás de Contact Form 7?

El autor del plugin Contact Form 7, el japonés Takayuki Miyoshi (En efecto, eso explica la imagen tan rara que aparece cuando descargamos el plugin desde el repositorio oficial).

Takayuki es uno de los personajes más célebres dentro de la comunidad de WordPress a nivel mundial, ya que da soporte y aporta modificaciones al core o núcleo del CMS, además de traducciones y desarrollo de funcionalidades constantes para otros plugins además del suyo (del que sigue encargándose personalmente a día de hoy).

En definitiva, todo un ejemplo de desarrollador, por un lado gracias al trabajo realizado con este plugin, y sus aportaciones a la comunidad y por otro, también un muy buen ejemplo de modelo de negocio, ya que este desarrollador tiene toda una serie de plugins y add-ons premium (de pago) alrededor del plugin Contact Form 7 para WordPress.

¿Qué ventajas tiene Contact Form 7 respecto a otros plugins?

Una vez hechas las presentaciones, vamos a lo que nos interesa.

Por si aún no lo conoces, Contact Form 7 es un plugin de formularios para WordPress que nos permite crear formularios de contacto en nuestro sitio web totalmente gratis y de manera rápida y sin conocimientos técnico gracias a su editor drag & drop (arrastrar y soltar).

Gracias a Contact Form 7, podremos insertar los formularios creados en (casi) cualquier parte de nuestra web, ya sea en cualquier área de widgets o de contenido mediante el sistema de shortcodes incorporado.

Cómo crear un formulario con Contact Form 7 plugin

A continuación encontraréis un tutorial en español de Contact Form 7 para sacarle el máximo partido.

01 Instalar Formulario de Contacto 7 Contact Form 7

Al ser algo más básica, vamos a ir muy rápido en esta primera parte para llegar lo más rápidamente posible a la parte de configuración, no obstante si tienes cualquier duda, aquí puedes ver qué es un plugin de WordPress y cómo se instalan.

Para instalar el plugin Contact Form 7, desde el repositorio oficial debes ir al panel de administración de tu página web y en el apartado plugins del menú lateral, pinchar en añadir nuevo.

Una vez dentro, verás un buscador en la parte derecha superior en la que debes buscar el plugin que quieras instalar, en este caso escribe “Contact Form 7”.

Aunque a veces sale el primero, no te recomiendo que lo busques como Formulario de Contacto (número) 7, que es como se traduciría al castellano ya que aunque en algunas ocasiones ha estado traducido en el repositorio de WordPress, ya no está disponible con ese nombre.

Una vez descargado, sólo queda activarlo.

¿Listo? ¡Seguimos!

02 Primeros pasos

Lo primero que veremos cuando activemos el plugin Contact Form 7, es un nuevo apartado en el menú de la parte izquierda del panel de administración en nuestra instalación de WordPress, llamado «Contacto».

Dentro de este apartado del menú, podemos añadir un nuevo formulario de contacto, gestionar las integraciones con otros servicios o editar uno estándar que viene ya creado por defecto con los siguientes campos:

1. Nombre
2. Correo electrónico
3. Asunto (Algo innecesario en mi opinión)
4. Mensaje
5. Botón de enviar

03 Insertar un formulario de Contact Form 7

Excepto que tu proyecto requiera algo especial o más elaborado, este mismo formulario inicial ya nos va a servir para una página de contacto normal por ejemplo.

Si entramos en ese formulario creado por defecto veremos un Shortcode que nos indica «copia este código y pégalo en el contenido de una entrada, página o Widget de texto».

Este shortcode tiene un formato similar a esto:

[contact-form-7 id=»284″ title=»Formulario de contacto 1″]

Para añadir el formulario a tu web, simplemente tendríamos que insertar el shortcode que nos facilita el plugin, es decir, todo el contenido que encontrarás entre corchetes con los propios corchetes incluidos, dentro del post, página taxonomía o widget en donde queramos añadir nuestro nuevo formulario de contacto.

Recuerda que es preferible añadir los shortcodes en la pestaña HTML de tu editor, aunque también los puedes insertar si utilizas cualquier maquetador de WordPress.

Lo importante es que incluyas todo el código facilitado por el plugin Contact Form 7.

Cómo configurar Contact Form 7 plugin

Una vez creado e insertado este primer plugin, necesitamos configurar algúnos aspectos importantes como por ejemplo, a qué email debemos recibir los comentarios de nuestros usuarios o qué contenido y formato recibiremos por email.

Para ello, vamos a ver paso a paso cómo configurar cada una de las pestañas que encontraremos dentro del plugin Contact Form 7.

¡Vamos a ello!

(I) Pestaña Formulario

El plugin Contact Form 7 nos permite crear casi cualquier tipo de formulario, en la mayoría de los casos, basta con “trastear” un poco con la herramienta para ver lo fácil que es hacer el formulario que necesites.

Estas son todas las posibilidades que puedes añadir a tu formulario de contacto con Contact Form 7.

1. Nombre
2. E-mail
3. Asunto
4. Mensaje
5. Campo para añadir URL o web del usuario
6. Teléfono
7. Campo para añadir un número
8. Añadir fecha
9. Añadir área de texto
10. Menú desplegable
11. Casilla de verificación, para por ejemplo aviso legal.
12. Campo de texto genérico
13. Botones de selección y aceptación en formato checkbox, radio e input
14. reCAPTCHA
15. Campo para adjuntar archivos
16. Cuestionario
17. Y por supuesto.. botón de enviar

Con todas estas posiblidades, las únicas limitaciones las pone tu creatividad.

¿Cómo añadir nuevos campos a un formulario con Contact Form 7?

Muy fácil.

Para añadir cualquiera de estos campos a tu formulario, tan sólo tienes que pinchar en el botón correspondiente al campo que quieras añadir y verás que automáticamente se cargará el código necesario para que aparezca en la parte de abajo.

(II) Pestaña Correo electrónico

Esta pestaña es muy fácil y rápida de configurar pero es de vital importancia que lo hagas bien ya que es donde debes añadir los datos de la cuenta donde quieres recibir el contenido que tus usuarios envíen por el formulario de contacto que has creado.

Añade tus datos de contacto y cómo quieres recibir el email con los datos de tus usuarios y listo, no tiene pérdida.

De hecho, yo normalmente lo dejo tal y como viene por defecto ya que Contact Form 7 tomará como cuenta de correo la del administrador de la web y enviará todo el contenido a rellenar en el formulario creado por defecto.

Más que de sobra para el 90% de los proyectos.

¡Siguiente!

(III) Pestaña Mensajes

Como puedes ver, este plugin es súper sencillo de usar y tan versátil que podemos incluso personalizar todos los mensajes que aparezcan cuando el usuario final interactúe con el formulario de contacto creado.

Por defecto estos mensajes vendrán traducidos al idioma de la instalación que tengamos, si trabajamos en castellano, pues, todos los mensajes de confirmación vendrán en castellano, pero también los podemos modificar para cada uno de los formularios de tal modo que podemos personalizar al máximo todo aquello que aparezca en ese formulario.

A no ser que necesites algo muy específico, o que seas un cachondo y quieras darle un toque muy personal a tu formulario, los mensajes que vienen por defecto son perfectamente válidos y están perfectamente traducidos.

Nada de mensajes en indio como ocurre con otros plugins.

(IV) Pestaña Ajustes adicionales

Tal y como la descripción nos indica, en este apartado podemos complementar Contact Form 7 incluyendo fragmentos de código, normalmente conocidos como snippets.

Eso sí, no vale cualquier código, tienes algunos ejemplos de lo que puedes hacer en la página de documentación oficial del plugin.

Características avanzadas del plugin Contact Form 7

Ya hemos visto el funcionamiento básico del plugin y todo lo que nos ofrece ‘por defecto’.

A continuación, te planteo algunas configuraciones adicionales más avanzadas para Contact Form 7.

Algunas son opcionales, como marcar casillas como obligatorias, otras recomendadas como implementar filtros anti spam y otras obligatorias para cumplir con la ley, así que no te lo pienses y sigue leyendo.

Un formulario para cada ocasión

Por ejemplo, podemos crear cuestionarios o encuestas o añadir la subida de archivos, para que un cliente o un usuario cualquiera que entre en nuestra web, pueda añadir fotografías, documentos, cualquier tipo de archivos en ese formulario y nos lo haga llegar.

Incluso podemos dentro de esa subida de archivos, decir qué tipo de extensiones queremos que se puedan subir, cuál es el límite máximo de archivos que queremos que se suban a través del formulario y otras configuraciones extra.

¿Spam? No, gracias

Otra característica muy útil que podemos añadir a nuestro formulario es un Captcha, que no es más que un sistema anti spam, que combinado con el plugin Akismet, hará que podamos filtrar la mayoría de los mensajes spam que nos llegan normalmente.

También podemos introducir algunos tipos de validación diferentes a través de este formulario.

No olvides la protección de datos y temas legales

Por ejemplo podemos debemos incluir también una aceptación de términos y condiciones legales, (que debe estar desmarcado por defecto, aunque el plugin permita lo contrario) y después enlazar a nuestro aviso legal o nuestra página en la que expliquemos como tratamos los datos de carácter personal.

Reúne toda la información que necesites

Por supuesto, puedes hacer que cualquiera de estos campos sea requerido (o no), es decir, obligatorio que el usuario lo rellene para poder enviar el formulario, de esta forma, evitarás perder tiempo con correos basura.

A la hora de crear un nuevo campo, verás una casilla en la que seleccionar si este campo debe ser obligatorio, es decir requerido para enviar el formulario.

Por defecto, el campo nombre y email, vienen marcados como requeridos.

Extensiones y Add Ons para Contact Form 7

Por si te has quedado con ganas de más personalizaciones y ajustes adicionales para Contact Form 7, vamos a ver cómo podemos ampliar las funcionalidades de este magnífico plugin para que cubra casi cualquier necesidad que pueda tener tu proyecto.

Como ya hemos comentado antes, Contact Form 7 es uno de los plugins más descargados y con más instalaciones activas de todo el repositorio oficial de WordPress.

Por este motivo, se ha creado todo un negocio alrededor y tienes a tu disposición cientos de tutoriales, videos explicativos, extensiones y add ons en forma de plugins que amplían las funcionalidades del plugin original.

En cuanto a los tutoriales de Contact Form 7, son muy útiles si quieres hacer alguna cosa un tanto especial o extraña, hacer que el plugin tenga alguna disposición diferente, o darle un poco de color, modificar un poco el estilo del formulario, personalización de la apariencia, etc…

Las extensiones, complementos o add ons, por otro lado, no son más que plugins para el plugin original, que como hemos dicho añaden alguna característica o funcionalidad, normalmente bastante específica.

En el caso de Contact Form 7, hay extensiones y complementos para por ejemplo:

• Hacer un formulario en varios pasos
• Añadir campos condicionales al formulario
• Almacenar los datos enviados por el formulario en la base de datos

Y estos son sólo algunos ejemplos, como ya te imaginarás, hay toda una batería de complementos y extensiones para Contact Form 7 esperándote para que puedas sacarle el máximo rendimiento a este gran plugin.

15 Mejores add ons y extensiones para Contact Form 7

Como se suele decir, no están todas las que son, pero sí son todas las que están.

Aquí te dejo un listado con algunas de los mejores complementos para el plugin Contact Form 7 (sin ningún orden en especial).

Te invito a que los pruebes y sobre todo, a que dejes un comentario si crees que falta alguna extensión importante que merezca un hueco en esta lista.

1. CF7 to WordPress Post
2. CF7 Multi-Step Forms
3. Contact Form 7 Skins
4. MailChimp for WordPress
5. CF7 Signature Addon
6. Flamingo
7. CF7 DataPicker
8. Contact Form 7 Success Page Redirects
9. CF7 WooCommerce Orders
10. CF7 Conditional Fields
11. CF7 to Zapier
12. Contact Form 7 Submissions
13. Contact Form 7 PayPal Add-on
14. Contact Form 7 Lead Info with Country

Cómo personalizar Contact Form 7

Contact Form 7 es un plugin altamente customizable y compatible con casi cualquier cosa que le pongas por delante.

Si quieres personalizar el aspecto de Contact Form 7, tienes 2 opciones:

Personalizar Contact Form 7 mediante plugins

El plugin WordPress Form Customizer | CF7 Customizer con sus más de 10.000 instalaciones activas permite de una manera muy sencilla e intuitiva modificar y personalizar el aspecto de los formularios que crees con Contact Form 7.

Simplemente tienes que instalar y activar este potente plugin y podrás cambiar todo el diseño de los formularios de una forma fácil y rápida directamente desde la propia web, nada de cambiar ajustes en el panel de administración y tener que ver cómo queda cada vez que cambias algo.

Los cambios se realizan en tiempo real y en cuestión de segundos tendrás tu formulario web a tu gusto.

Personaliza Contact Form 7 con tu propio código CSS

Otra opción más artesanal es añadir tú mismo los estilos CSS para modificar el diseño a tu gusto.

Aunque en principio es un proceso más lento, tiene múltiples ventajas.

Para empezar te ahorras tener que instalar más plugins, lo que requiere mantenimiento y posibles brechas de seguridad en un futuro.

Además, tu web será más ligera, ya que sólo añadirás los estilos que realmente necesitas y no todo el contenido del plugin.

Para personalizar un formulario creado con Contact Form 7, tan sólo tienes que modificar los estilos CSS que desees personalizar.

A continuación, para ayudarte con esta tarea, te dejo un listado con las principales clases de CSS que necesitarías cambiar según tus necesidades.

Hay alguna más, pero con estas tendrás cubiertos la mayoría de los formularios que crees con Contact Form 7.

Cualquier duda, recuerda que te espero en la sección de comentarios.

/* Estilos generales (Ancho del formulario, borde, fondo, tipo de letra...)*/
.wpcf7 {}

/* Campo de texto y mensaje*/
.wpcf7-text, .wpcf7-textarea {}

/* Estilo al pinchar sobre el campo de texto y mensaje */
.wpcf7-text:focus, .wpcf7-textarea:focus {}

/* Etiqueta de los campos*/
.wpcf7-form p {}
.wpcf7-form label{}

/* Estilos del botón de enviar */
.wpcf7-submit {}

/* Estilos del botón al pasar el cursor*/
.wpcf7-submit:hover {
}

/* Respuestas y mensajes al intentar/enviar correo */
.wpcf7-response-output {}

Alternativas a Contact Form 7

Hasta ahora, hemos visto que Contact Form 7 es un plugin súper sencillo, flexible, muy potente y gratuito. Bajo mi punto de vista, el mejor plugin para crear formularios de contacto de forma gratuita.

Pero si por algún motivo, has leído algo que no te ha convencido o eres de los que le gusta probar cosas nuevas, vamos a hablar brevemente de algunas de las mejores alternativas a Contact Form 7.

Por norma general, la gente que busca alternativas a Contact Form 7 lo hace por dos motivos.

1. Porque busca algo más personalizable o fácil de usar
2. Porque necesita alguna funcionalidad adicional que no incluye CF7

Para el primer caso, si lo que buscas es un plugin para crear formularios de contacto atractivos de una forma fácil y muy visual, otra recomendación gratuita muy potente es el plugin Ninja Forms.

Si lo que buscas es más funcionalidades o potencial, sin duda es hora de hablemos del plugin de formularios de contacto premium por excelencia.

Gravity Forms es sin lugar a dudas el plugin para crear formularios de contacto más completo y potente.

La única pega de este plugin es que es premium, es decir es de pago con un tipo de suscripción basada en un pago anual.

Por lo demás, si tu proyecto se lo puede permitir y das el salto a Gravity Forms no necesitarás nunca otro plugin para crear cualquier tipo de formulario.

Para terminar…

Espero que te haya gustado este tutorial de Contact Form 7 en español, y sobre todo que le des una oportunidad a este magnífico plugin que representa el espíritu de WordPress y la licencia GPL en estado puro.

Si crees que me he dejado algo importante, tienes una opinión diferente o alguna duda, o simplemente quieres decir hola, me encantaría leerte en la zona de comentarios, así que te espero por allí, no sin antes pedirte que si te ha resultado útil sería de gran ayuda si pudieras compartirlo en tus redes sociales.

¡Gracias!