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.

tutorial contact form 7 en español

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”.

tutorial instalacion del plugin contact form 7

 

Crear un formulario con Contact Form 7

Una vez instalado este plugin crea una nueva zona en nuestro menú de WordPress llamada “CONTACTO”.

menu tutoria contact form 7

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.

crear-formularios-de-contato-en-wordpress

 

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.

panel principal contact form 7

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.

creacion del formulario tutorial contact form 7

 

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.

codigo html tutorial contact form 7

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.

imagen etiquetas de formulario tutorial contact form 7

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:

opciones generales de los campos de formulario tutorial contact form 7

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.

configuracion del campo de formulario de texto en contact form 7

 

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.

configuracion del menú desplegable en contact form 7

 

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.

configuracion de archivo adjunto en contact form 7

 

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.

registro en recaptcha tutorial contact form 7

 

Una vez completado elegida la web que vamos a proteger copiamos las Claves API.

recaptcha para el formulario de wordpress

 

Vamos al menú de Contact Form 7 “Contacto > Integración” y pegamos las dos claves en los campos correspondientes.

integracion de recaptcha tutorial contact form 7

 

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:

ejemplo de formulario creado tutorial contact form 7

 

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.

configuracion-correo-electronico tutorial contact form 7

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.

configuracion cuerpo del mensaje tutorial contact form 7

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.

configuracion de archivo adjunto tutorial contact form 7

 

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.

error en contact form 7

 

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.

menajes de aviso de formulario contact form 7

 

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

ajustes adicionales contact form 7

 

(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 .

crear casilla de verificacion

Una vez creado el shortcode de la aceptación incluimos el texto con el link a nuestro aviso legal.

casilla de verificación de contact form 7

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.

incluir ver casilla de verificación en contact form 7

 

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.

añadir nuevo formulario en contact form 7

 

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.

codigo-corto-de-formulario-plugin-contact-form-7

 

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

personalizar-formularios-de-contacto-contact-form-7

 

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.

Pin It on Pinterest

Shares
Esta web utiliza cookies propias para su correcto funcionamiento y cookies de terceros (Incluido Google y otros terceros) para mostrar y medir anuncios personalizados y contenidos personalizados. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Puedes Personalizar Cookies para configurar tus preferencias de cookies y tratamiento de datos.    Más información
Privacidad