En el tutorial Contact Form 7 aprenderemos paso a paso a crear formularios de contacto en WordPress con uno de los plugins más usados para este fin.
Por qué usar un formulario de contacto en páginas web
Los formularios de contacto son un elemento muy importante en nuestra web ya que son un medio de comunicación por mensajes entre la empresa o el administrador de la web y el cliente o usuario de la web.
Utilizar un formulario de contacto en nuestra web como medio de comunicación tiene muchas ventajas:
- Permite recibir mensajes de los usuarios de tu web sin publicar tu correo electrónico.
- Permite que las consultas de los visitantes queden almacenados en nuestro gestor de correo.
- Podemos pedir información adicional en los formularios como Edad, Dirección, Ciudad de residencia, teléfono, email… y usar la información de los usuarios para mandarles ofertas especializadas.
¿Cómo crear formularios en WordPress con Contact Form 7?
Para crear formularios en WordPress hay muchos plugins que podemos utilizar pero en este tutorial usaremos Contact Form 7.
Contact Form 7 es un plugin veterano y gratuito de los más populares en WordPress con más de un millón de instalaciones activas y una puntuación de los usuarios de 4,5 sobre 5.
Una de las ventajas de usar este plugin es que existen muchos otros plugins que amplian las opciones y complementan a Contact Form 7, al final del Tutorial Contact Form 7 os dejo una lista con algunos de ellos.
La única pega que tiene este plugin es que hay que crear el formulario mediante etiquetas HTML en un editor de apariencia algo tosca.
Pero que no cunda el pánico, que con un buen tutorial de Contact Form 7 (como este) podremos aprender a usarlo con soltura.
Tutorial Contact Form 7 instalacion del plugin
La instalación de Contact Form 7 es muy sencilla y desde el propio WordPress.
Accedemos al panel de administración de nuestro WordPress y en el menú vamos a Plugins > Añadir Nuevo
En el buscador de plugins buscamos “Contact Form 7” y pulsamos en el botón “Instalar Ahora”.
Crear un formulario con Contact Form 7
Una vez instalado este plugin crea una nueva zona en nuestro menú de WordPress llamada “CONTACTO”.
Vamos a esta zona nueva, y vemos como ya hay un formulario creado, este formulario lo crea el plugin automáticamente con las opciones básicas, puedes editarlo, duplicarlo o eliminarlo y crear uno nuevo desde cero.
Nosotros vamos a crear uno nuevo, para ello pulsa en el botón “Añadir nuevo” de la parte superior.
Al pulsar el botón «Añadir nuevo» vamos a la zona de creación del formulario y voy a explicarte de forma genérica que es cada elemento.
1º Titulo de nuestro formulario
2º Pestañas de opciones, con las que editamos el formulario, la estructura del correo electrónico y los mensajes de información al usuario.
3º Editor de código y etiquetas HTML del Formulario que usaremos para crear el formulario.
Configurando el formulario
Nos situamos en la pestaña “FORMULARIO”
Ahora viene la parte más fea de crear formularios, ya que hay que utilizar etiquetas HTML para maquetar el formulario, pero no te preocupes puede parecer lioso pero te lo explico rápidamente.
Como vemos en el editor de texto ya hay un código creado, este código crea un formulario de contacto estándar con los campos para introducir, el nombre, el email, el asunto, el mensaje y el botón de enviar el formulario.
En la mayoría de los casos es el formulario básico que necesitamos.
En el recuadro naranja he creado una captura para que veas como quedaría el formulario de ese código.
Como vemos, el código que esta ya creado contiene etiquetas HTML como <p> y </p> (o <label> y </label>) que sirven para agrupar los elementos puedes utilizar <br /> como salto de línea aunque esta obsoleto y también puedes pulsar intro para hacer el salto de linea.
Estas etiquetas las podemos utilizar para darle la forma a nuestro formulario.
Veámoslo con una imagen para que quede totalmente claro.
La parte morada: código <p> y </p> (o <label> y </label>) sirven para englobar al texto con el campo del formulario.
La parte amarilla: Es el texto que nosotros ponemos encima de un campo del formulario.
La parte Roja: <br /> es un salto de línea entre el texto y campo del formulario.
La parte verde: es el campo del formulario que creamos con los botones de la parte superior e indica el tipo de campo que es (text, email, texarea, submit etc..) y su nombre que nos servirá más adelante para identificarlo.
Para crear un nuevo campo en nuestro formulario simplemente pulsamos en las etiquetas de la parte superior y las configuramos a nuestro gusto, de esta forma se creara la parte del código que va entre corchetes y el código restante lo podemos copiar y pegar.
Al pulsar en cada botón se abre un menú de configuración con varias opciones que depende de cada campo.
Las opciones más generales son:
Campo requerido: el usuario debe rellenar ese campo obligatoriamente
Nombre: es el nombre del campo, lo usaremos para personalizar la forma del correo electrónico que envía el formulario en la pestaña “Correo Electrónico”.
Akismet: si marcas esta casilla el plugin Akismet analizara el contenido del campo en cuestión en busca de spam, solo funciona si tienes Akismet instalado y configurado.
No aconsejo usar esta opción ya que puede eliminar correos que no son spam por error.
Atributo de ID y de Clase: por si queremos identificar y agrupar elementos para aplicarle después algún tipo de código CSS. No las usaremos así que las dejaremos en blanco siempre.
Recuerda que solo se crea el campo del formulario entre corchetes, el párrafo y el texto que acompaña al formulario lo debemos crear a mano o copiando y pegando el código.
Vamos a ver y explicar las etiquetas de la parte superior una por una.
Texto: sirve para introducir cualquier tipo de texto, podemos usar esta etiqueta para pedir el nombre, los apellidos o cualquier otra información mediante texto.
Correo electrónico: este campo sirve para que el usuario indique su correo electrónico.
URL: este campo añade http:// delante del texto que escriba el usuario, por ejemplo podemos usarlo si queremos que un usuario indique su página web.
Teléfono: sirve para que los usuarios te indiquen su teléfono. Advertencia solo permite números y espacios, así que si un usuario quiere indicar el prefijo de su país y ponerlo entre paréntesis (+34) 555 555 555 le aparecerá un error de formulario, para evitar esta situación es mejor utilizar un campo de Texto para este fin.
Numero: Un campo donde introducir números, podemos indicar el número mínimo y máximo a usar, acepta valores negativos y lo podemos usar por ejemplo para pedir la edad o un código numérico promocional, identificativo etc…
Fecha: Con este campo el usuario puede indicar una fecha concreta. Podemos indicar una fecha mínima y otra máxima a elegir.
Área de texto: es un campo más grande que el de texto que se usa normalmente para que el usuario escriba el mensaje que nos quiere hacer llegar.
Menú desplegable: un menú desplegable donde podemos definir varias opciones.
Casillas de verificación: el típico check box donde el usuario puede marcar varias casillas.
Botones de selección: otro check box donde solo se puede marcar una casilla.
Aceptación: típica casilla de “acepta nuestras condiciones”, si no se acepta el botón de enviar el formulario esta desactivado.
Pregunta: en este campo configuraremos una pregunta y su respuesta, al usuario se aparecerá la pregunta y si no contesta bien a la respuesta el formulario dará error de envio.
Archivo: Crea el botón de Examinar archivos, que utilizara el usuario para mandarnos un archivo adjunto a nuestro correo electrónico. Podemos indicar el tamaño máximo de megas del archivo a subir y los formatos que aceptamos (.pdf .jpg .gif .doc .docx).
Podemos usarlo para que el usuario nos mande una foto o su currículo en PDF o WORD etc.
Enviar: Crea el botón de enviar el formulario, sin este botón lo demás no tiene sentido.
RECAPTCHA: El reCAPTCHA es una forma de combatir el spam y verificar si es un humano el que escribe el mensaje o un maldito robot de spam.
Siempre recomiendo configurar el reCAPTCHA ya que parará la mayoría del spam que puedas recibir.
Esta etiqueta inserta el reCAPTCHA oficial de Google, para ello primero tenemos que registrarnos en la página de reCAPTCHA para conseguir unas Claves API e introducirlas en el menú “integración” de Contact Form 7.
Vamos a verlo paso por paso.
Primero vamos a la web oficial de reCAPTCHA
https://www.google.com/recaptcha/intro/index.html
Accedemos con una cuenta de Google y completamos un formulario en el que indicamos la web que vamos a proteger.
Una vez completado elegida la web que vamos a proteger copiamos las Claves API.
Vamos al menú de Contact Form 7 “Contacto > Integración” y pegamos las dos claves en los campos correspondientes.
Ahora podremos introducir la etiqueta de reCAPTCHA para que se muestre en nuestro formulario evitar el spam.
Una vez creado el formulario a nuestro gusto pulsamos en guardar.
Ejemplo de formulario:
Configurar y personalizar el correo electrónico del formulario.
Una vez creado nuestro formulario vamos a la pestaña “Correo electrónico” .
Si estas usando el formulario que crea automáticamente Contact Form 7 esta parte ya la tendrás configurada correctamente, pero puedes personalizarla si lo deseas.
En esta pestaña configuraremos el correo electrónico al que llegaran los mensajes y podemos personalizar el esquema del correo electrónico que recibiremos usando los nombres de los campos del formulario.
Las etiquetas de los nombres que hayamos configurado aparecen arriba.
En el campo “Para” indicamos el correo o los correos electrónicos separados con comas donde queremos que se envíen los mensajes que lleguen a través del formulario.
En el campo “De” podemos poner la etiqueta del nombre del usuario que mando el formulario y al lado lo que aparece es la dirección del servidor de correo que usará nuestro WordPress para enviar los correos. Este servidor de correo debe pertenecer a nuestro propio dominio.
Por defecto no elimines el correo de WordPress o no se enviará el mensaje.
En el campo “Asunto” ponemos la etiqueta correspondiente al campo de texto que hemos configurado para el asunto.
Por defecto también aparece al principio el nombre de nuestra web esto nos puede servir para filtrar desde nuestro gestor de correo todos los mensajes que lleven en el asunto una palabra concreta y así los podremos encontrar y archivar más eficientemente.
En el campo de “Cabeceras adicionales” podemos indicar el correo del usuario mediante su etiqueta, Si no introduces el correo aquí no verás el correo del usuario para poder responderle .
En el campo “Cuerpo del mensaje” podemos personalizar el mensaje que nos llegara a nuestro correo, es lógico que aquí pongas al menos, el nombre del usuario, el correo del usuario entre signos de mayor y menor para que se inserte en forma de correo electrónico y por supuesto el área del mensaje.
Yo recomiendo dejar todos los campos como están por defecto pero cambiando las etiquetas de los campos del formulario por las nuestras.
Por supuesto podemos personalizar el “cuerpo del mensaje” añadiendo ahí los demás elementos como la información de un menú desplegable o las casillas de verificación.
También puedes incluir el correo del usuario otra vez dentro del mensaje, por si el de la cabecera no es detectado por tu administrador de correo.
En el apartado “Archivos adjuntos” como es lógico pondremos la etiqueta correspondiente al campo de Archivo que sirve para enviar Archivos adjuntos.
Etiquetas especiales para Contact Form 7
Otras etiquetas especiales que podemos usar para obtener más información en nuestros formularios son:
- [_remote_ip] Muestra la IP del usuario.
- [_user_agent] Muestra la información del agente de usuario usado.
- [_url] Muestra la página desde la que nos envían el formulario.
- [_date] Muestra la fecha a la que se envió el formulario.
- [_time] Muestra la hora a la que se envió el formulario
- [_post_title] Muestra el título del post donde está el formulario.
- [_post_id] – Te indica el ID del Post
- [_post_name] – Te indica el slug del post
- [_post_url] – Te indica el permalink del Post
- [_post_author] – El nombre del autor del Post
- [_post_author_email] – El email del autor del Post
Errores en Contact Form 7
Si te aparece el aviso “Este formulario de contacto tiene un error de configuración” en Contact Form 7 puede deberse a varios errores.
Puede que hayamos puesto mal una etiqueta de un campo de formulario mientras personalizabas el correo electrónico.
También puede deberse a que algunos campos como el apartado “Cabeceras adicionales” siempre deben de llevar el correo electrónico del usuario o mostrara un “Error de sintaxis”.
Los Formularios no envian los Emails
Un problema común cuando utilizamos un formulario de contacto, es que no envíen los correos por que el servidor que utilizamos no utiliza por defecto una función llamada «mail PHP«.
Es un problema común en muchos alojamientos de hosting compartido.
Para solucionar este problema tendrás que configurar que los emails se envien mediante el protocolo SMTP.
Puedes hacerlo fácilmente con un plugin adicional y por supuesto aquí tienes su tutorial WP Mail SMTP para WordPress
Configurar y personalizar los avisos de Contact Form 7
En la pestaña “Mensajes” podemos modificar todos los diferentes avisos que crea Contact Form 7 al interactuar con el formulario.
Ajustes adicionales
En la pestaña “Ajustes adicionales” sirve para activar el modo de pruebas y usar códigos javascript mediante códigos avanzados que podemos ver en el enlace de la imagen
(Ley RGPD) Casilla de verificación de aviso legal.
La nueva normativa europea, mediante la Ley RGPD de protección de datos, impone que se pueda demostrar que el usuario ha aceptado los tratamientos de una página web mediante una casilla de verificación.
Para crear la casilla de verificación puedes utilizar la opción «aceptación» cuando creas el formulario .
Una vez creado el shortcode de la aceptación incluimos el texto con el link a nuestro aviso legal.
Una vez que has creado la casilla, también la tienes que incluir en el correo electrónico que se genera, para poder verificar en el futuro que el usuario marcó la opción.
Simplemente tienes que incluir el shortcode en cualquier lugar del cuerpo del mensaje.
Como insertar el formulario de Contact Form 7
Por último para insertar nuestro formulario en una de nuestras páginas, post o en un Widget de nuestra página web simplemente tenemos que copiar el código corto del formulario y pegarlo en el editor de texto de la página o entrada.
El código corto se pega en el editor de texto de las entradas o páginas de WordPress o en el Widget de texto. Si estas usando un editor visual como Divi builder o Visual Composer lo puedes pegar en los módulos de texto o en el módulo de código.
Cambiar el aspecto de los formularos Contact Form 7
Existen plugins que complementan las funciones de Contact Form 7 y esta es una de las razones por las que este plugin es tan popular.
Si te has fijado hay Temas premium que por defecto usan Contact Form 7, normalmente estos temas personalizan los formularios con sus propios estilos y normalmente los formularios tienen un aspecto visual agradable.
Pero si nuestro tema no tiene estilos especiales para este plugin los formularios pueden quedar con una apariencia tosca y fea.
Por esta razón, en este Tutorial Contact Form 7 le doy especial mención a un plugin que nos permite cambiar el aspecto de los formularios fácilmente.
Personalizador de CF7: con este plugin podemos cambiar el aspecto de nuestros formularios de contacto, la mejor característica de este plugin es que la personalización se hace desde el Personalizador de Temas de la parte Front End de WordPress y muestra los cambios en tiempo real.
IMAGEN DE FORMULARIO DE CONTACTO PERSONALIZADO CON EL PLUGIN CF7
Otros plugins para Contact Form 7
Para finalizar el Tutorial Contact Form 7 os dejo una lista de algunos plugins gratuitos con más funciones especiales para Contact Form 7.
Contact Form 7 Success Page Redirects: Redirige al usuario a una página después de enviar el formulario. Se configura desde una nueva pestaña en el menú de configuración de Contact Form 7.
Contact Form 7 WYSIYG Field: permite crear un área de texto con opciones para darle formato al texto.
Contact Form 7 Mailchimp Extension: Envía los emails al servicio de email marketing de Mailchimp.
Mailpoet Contact Form 7 Integration: Envía los emails al servicio de email marketing de Mailpoet.
Contact Form 7 WooCommerce Orders: Permite crear un formulario que crea ordenes de pedido en WooCommerce.
Contact Form 7 Paypal Extensions: Sirve para integrar pagos por Paypal en los formularios.
Terminamos aquí el tutorial de Contact Form 7 de Sensación WordPress, si te ha servido de ayuda no olvides comentar y compartir este post en tus redes sociales.
Hay muchos más plugins que complementan Contact Form 7, algunos gratuitos y otros de pago ¿Conoces alguno digno de mención?, si es interesante lo añadiré a este Tutorial Contact Form 7.
Hola! Muchas gracias por el tutorial! Cómo podría hacer que el formulario llegase a la vez a varios correos? Indicas en el tutorial que puede hacerse, pero me da error de sintaxis 🙁
Gracias de antemano!
Hola Laura, tienes que separar los correos con una coma, Gracias por preguntar, Actualizo el post para aclarar la duda.
Mil gracias por la ayuda Gerardo!! 🙂
Hola Gerardo,gracias por el tutorial! mi pregunta es como hago para que las casillas queden como en este formulario, «name,email,website» en la misma linea,nose que escribo mal exactamente, porque no me sale 🙁 , gracias y saludos!
Buenos dias, se podria hacer un registro para usuarios y otro para clientes? en donde la persona elija si es simplemente usuaria de la web o si quiere registrar su negocio como cliente? Mil gracias
Hola! Es posible crear formularios de suscripción? Gracias!
Si, es posible crear formularios de suscripción con contact form 7 a listas de servicios externos como mailchimp u otos instalando plugins adicionales como Contact form 7 mailchimp extension
porque en mi formulario la casilla de aceptación me sale en una línea distinta a el texto de aceptar
Hola, necesito que el contenido de un campo de verificación se envíe tambien en el email, es posible?. gracias
Hola Miguel!! He actualizado el tutorial, con el apartado «(Ley RGPD) Casilla de verificación de aviso legal» donde explico como hacer que se envíe la casilla de verificación en el cuerpo del mensaje. No se si esto responde tu duda. un saludo!
Hola! Un problemilla técnico. En mi formulario pongo el tag [_remote_ip] y siempre ha funcionado bien hasta que he cambiado de hosting. Siempre ha salido la IP del visitante desde que instalé el plugin, pero ahora siempre sale la IP del hosting, la misma, y no encuentro la forma de solucionarlo. El manual de Contact Form no dice nada al respecto y la gente del hospedaje no saben la solución. ¿Alguien tiene alguna idea u orientación?
hola tengo un problema, el email de respuesta automatica de confirmacion del formulario no esta llegando a correos @gmail.com , pero a servidores privados si. que podria ser esto?
saludos
buenas me gustaría configurar que el usuario eligiera en un menú desplegable un mínimo de opciones para poder enviar el formulario (Por ejemplo, de 6 opciones que al menos señale 3).
Gracias!