fbpx

Tutorial para usar y configurar Contact Form 7 – 2019

Tutorial para usar y configurar Contact Form 7 – 2019
4.9 (98.4%) 25 votes

Tutorial para usar y configurar Contact Form 7 – 2019

Hoy os quiero explicar sobre uno de los Plugins m√°s populares y m√°s utilizados en WordPress, se trata de Contact Form 7.

Contact Form 7 es un formulario de contacto, para mi el mejor, por ser muy sencillo de manejar y por la gran cantidad de opciones que puedes poner, ya que eres t√ļ quien decide que campos vas a usar.

Si bien es cierto que este formulario se maneja con código, es relativamente sencillo trabajar en él, ya que solo tienes que ir poniendo los campos sugeridos por el propio plugin.

Además de los campos típicos como el nombre y el correo electrónico, también puedes incluir campos para adjuntar archivos, PDF, JPG, PNG, o DOCX, o cualquier formato que quieras que te adjunten.

Tutorial para usar y configurar Contact Form 7 - 2019

Por descontado puedes decidir qu√© campos son obligatorios y cu√°les son voluntarios, esto es s√ļper √ļtil, ya que no todo el mundo tiene las mismas necesidades, y a unos nos interesa el n√ļmero de tel√©fono y a otros que adjunten una imagen con el DNI, por ejemplo.

Puedes generar tantos formularios como desees, as√≠ recabas datos diferentes en distintos lugares de tu p√°gina web, mejorando la conversi√≥n y por tanto alcanzando un mayor n√ļmero de clientes.

Tipos de formularios

Por ejemplo, un formulario simple como el que suelen tener todas las webs en su página de contacto suele tener los campos de nombre, email, y mensaje, en mi caso también el teléfono, aceptar la política de privacidad y el botón de enviar.

Tutorial para usar y configurar Contact Form 7 - 2019

Otros tienen necesidades que requieren un formulario m√°s complejo, con multitud de campos, como el ejemplo que os dejo en la imagen. Es el caso de uno de nuestros clientes, Mente Consciente, ver√©is que incluye muchos campos obligatorios y otros de voluntarios, si duda uno de los m√°s complejos que hemos hecho, tambi√©n ¬†en dise√Īo.

Tutorial para usar y configurar Contact Form 7 - 2019

Configurar paso a paso el formulario de contacto

Primer paso ‚Äď descarga Contact Form 7

Entra en el back office de WordPress y dir√≠gete al apartado Plugins ‚Äď A√Īadir nuevo ‚Äď ve al repositorio de WordPress y escribe Contact Form 7, una vez descargado ‚Äď activa el plugin.

Enlace para descargar Contact Form 7

Aquí te dejo el enlace para que te descargues el plugin Contact Form 7.

https://es.wordpress.org/plugins/contact-form-7/

Segundo paso ‚Äď configura la parte visible

Ya podemos crear nuestro formulario, vamos a crearlo desde cero para eso iremos al margen izquierdo y sobre Contacto ‚Äď A√Īadir nuevo ‚Äď nos abre un nuevo formulario con unos par√°metros por defecto.

Lo primero que haremos es poner un título, en mi caso Prueba.

Como podéis ver los campos que vienen por defecto son:

  • Tu nombre
  • Tu correo electr√≥nico
  • Asunto
  • Tu mensaje
  • Enviar

A mí personalmente el campo de asunto no me convence, por lo que en este caso lo vamos a cambiar por el de Teléfono.

Ahora a√Īadimos el campo para adjuntar archivos, cada campo uno de estos solo permite un solo archivo, as√≠ que si necesitas que te env√≠en varios archivos tendr√°s que crearlo tantas veces como necesites.

Y por √ļltimo a√Īadiremos el campo de check in para aceptar la pol√≠tica de privacidad.

Aquí tienes el código del formulario que hemos creado.

<label> Tu nombre (requerido)

[text* your-name] </label>

<label> Tu correo electrónico (requerido)

[email* your-email] </label>

<label> Teléfono (requerido)

[tel* tel-918] </label>

<label> Tu mensaje

[textarea your-message] </label>

<label> Adjunta tu archivo

[file archivo limit:3mb filetypes:PDF|JPG|PNG]

[acceptance acceptance-404]href=»https://conoce-te.es/politica-de-privacidad/» target=»_blank» rel=»noopener»>Acepto pol√≠tica de privacidad¬†[/acceptance]

[submit «Enviar»]

Configurar el correo para que te lleguen todos los campos

Esta parte es tan importante como la primara, ya que si no la configuras correctamente no te llegaran los datos que solicitas.

Vamos all√°!

Tienes que dirigirte donde pone Correo electrónico, en la parte superior del formulario, aquí tienes que configurar a que correo quieres que te lleguen los mensajes de los clientes, por defecto viene configurado para enviarlo al correo con el que registraste WordPress al instalarlo, lo puedes modificar en el primer apartado donde pone Para.

Ya no toques ning√ļn campo m√°s hasta donde pone Cuerpo del mensaje,

Tienes que ir introduciendo los shortcode que te facilitan en orden para que todo te llegue correctamente y para que te lleguen los archivos ve a la parte inferior y donde pone Archivos adjunto pega el shortcode que has creado para los adjuntos, en nuestro caso Adjunta tu archivo.

Tutorial para usar y configurar Contact Form 7 - 2019

Aquí el código para que te lleguen bien los datos de tus clientes

De: [your-name]

Email: [your-email]

Teléfono: [tel-918]

Cuerpo del mensaje:

[your-message]

Acepto: [acceptance-404]

Archivo: [archivo]

Este mensaje se ha enviado desde un formulario de contacto en Conoce-te (https://conoce-te.es)

Integración

Es muy importante que hag√°is la integraci√≥n para que se instale un c√≥digo recaptcha y no se os llene de SPAM, ya que los pu√Īeteros ‚Äúbot‚ÄĚ no paran de bombardear.

As√≠ que ahora clicamos donde pone Integraci√≥n ‚Äď debajo de la palabra CAPTCHA encontrareis un enlace, os recomiendo abrir con clic derecho en el mouse, os llevara a esta p√°gina

Aquí tienes el enlace https://www.google.com/recaptcha/intro/v3.html

Tutorial para usar y configurar Contact Form 7 - 2019

 

Clica en My recaptcha y genera tus claves, en el vídeo tutorial lo puedes ver y seguir.

Amplia este plugin

Este plugin a su vez cuenta con un complemento (plugin) muy interesante que consiste en redirigir al usuario a otra pagina una vez enviado el formulario, en el v√≠deo¬†lo pod√©is ver, siempre queda mucho mejor si dar las gracias o redirigir la visita a o otra parte de tu web, seg√ļn te convenga.

Aquí te dejo el enlace para que te descargues el plugin Contact Form 7 Redirection

https://es.wordpress.org/plugins/wpcf7-redirect/

volvemos a Plugins ‚Äď A√Īadir nuevo y escribimos ¬†Contact Form 7 Redirection ‚Äď descargar

Vídeo tutorial

Os dejo un video en el que configuraremos paso a paso y desde cero el formulario de contacto incluyendo los campos básicos como el nombre, teléfono, correo electrónico, el campo para el mensaje y el check in para aceptar la política de privacidad, así como la posibilidad de adjuntar un archivo.

Te proponemos…

 

¬†ūüďß Suscr√≠bete a Nuestros Boletines ūüď¨

⬇                                     ⬇

Opt In Image
Newsletter ūüĖ• Dise√Īo, Marketing y tutoriales

¬ŅQuieres saber sobre Dise√Īo Web y Marketing Digital?

‚ě° Esta es tu p√°gina ūüėÄ

Suscríbete!

 Síguenos en Instagram

Hola
¬ŅTe podemos ayudar?
LLAMAR AHORA

Privacy Preference Center