Seleccionar página

En este post te voy a explicar como funciona el plugin más utilizado en WordPress para crear formularios de contacto. Sí, me refiero al plugin Contact Form 7

Aunque pudiera parece a primera vista un plugin complejo de configurar, no lo es. Simplemente hay que ser guiado un poquito por alguien que ya lo haya utilizado.

Te voy a mostrar primero los principales elementos que debes conocer para trabajar con Contact Form 7 y después te pondré un vídeo para que veas paso a paso como crear un formulario con este archiconocido de WordPress.

 

 

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES


VER CURSOS

 

 

 

 

Instalar Plugin Contact Form 7

 

Para instalar el plugin gratuito Contact Form 7, has de ir en el panel de administración de WordPress a: “Plugins > Añadir nuevo”

En le buscador pon: “contact form 7”

 

Cómo instalar el plugin Contact Form 7 y activar

 

En el resultado haz clic en el botón “Instalar ahora”. Después, de instalarse haz clic en el botón: “Activar”

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

Añadir un nuevo formulario con Contact Form 7

 

Para acceder a la configuración del plugin ve al menú lateral del panel de administración de WordPress y haz clic en: “Contacto > Formularios de contacto”

Verás que te aparece un formulario ya creado de prueba.

Para añadir uno nuevo haz clic en el botón que aparece arriba: “Añadir nuevo”

 

Crear formulario de contacto con Contact Form 7

 

En el campo: “Añadir nuevo formulario de contacto” pon un nombre para este formulario. Por ejemplo: “Formulario de la página de contacto”

 

Poner nombre al formulario de contacto creado con Contact Form 7

 

Después, haz clic en el botón de “Guardar”.

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

Pestaña Formulario y códigos HTML (añadir campos)

 

En la pestaña “Formulario” podrás definir la estructura del formulario de contacto.

Fíjate en una cosa

Cada bloque que empieza con la etiqueta <label> y termina con la etiqueta </label> es un campo del formulario.

Así, construiremos el formulario

 

Por ejemplo, vamos a añadir un campo teléfono (que no viene añadido por defecto)

Pon el cursor en la posición que quieras añadirlo, y haz clic en el botón “teléfono”.

Te aparecerá un popup. Selecciona si quieres que sea un campo obligatorio y después haz clic en “Insertar”.

 

Añadir un nuevo campo al forrmulario de contacto con Contact Form 7

 

Te habrá salido un código similar a este: [tel tel-164]

 

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

Ahora pon las etiquetas <label> y el texto “teléfono” para que aparezca encima del campo, tal que así:

<label> Teléfono

[tel tel-164] </label>

 

Insertar un nuevo campo en el formulario Contact Form 7

 

 

Así de fácil se añaden nuevos campos al formulario.

Nota: si quieres saber cómo añadir un ReCaptcha de google a Contact Fomr 7 aquí tienes el post: Añadir ReCaptcha a Contact Form 7

 

 

Pestaña Correo / Configuración

 

En esta pestaña podrás rellenar algunas opciones de configuración general del formulario como:

  • Para: por defecto te aparecerá un shortcode que enviará el email del formulario al buzón de email del administrador de wordpress. Puedes eliminar el shortcode [_site_admin_email] y poner la dirección de email donde quieras recibir los correos generados por el formulario.
  • De: este será el remitente. Tienes que guardar esa estructura de nombre + email. En principio te recomiendo que lo dejes tal cual está.
  • Asunto: el asunto por defecto mostrará el nombre del sitio web + lo que haya escrito la persona que ha rellenado el formulario en el campo asunto. Pero puedes eliminar los shortcodes: “[_site_title] «[your-subject]»” y poner el texto que quieras para el asunto de los emails.

 

Configurar correos contact form 7

 

 

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

  • Cabeceras adicionales: te recomiendo que lo dejes como está por defecto para que cuando te llegue un email si le das a responder, automáticamente responda al email que puso el usuario que rellenó el formulario en el campo “email”.
  • Cuerpo del mensaje: aquí debes construir la forma del mensaje que quiere recibir. Las variables disponibles las tienes arriba. Recuerda que en el ejemplo solo aparecerán los campos del formulario que venían por defecto. Si has añadido nuevos campos, también tendrás que añadir nuevos shortcodes. En el vídeo te lo explico detenidamente. En la siguiente captura te muestro un ejemplo de como hacerlo.

 

Configurar contenido del email del formulario de contacto

 

 

Finalmente guarda los cambios.

 

 

Cómo insertar el formulario en una página de WordPress

 

Una vez creado el formulario… ¿cómo lo inserto en una página o post?

Si estás usando el editor clásico o algún constructor tendrás que utilizar el shortcode asociado al formulario.

Simplemente cópialo y pégalo en la página de wordpress donde quieras mostrarlo.

Para saber cual es el shortcode asociado al formulario ve a: “Contacto > Formularios de contacto”

Localiza el formulario que has creado y mira la columna “shortcode”

 

Shortcode para insertar el formulario de contacto de contact form 7

 

Después insertar el shortcode en una página o entada de WordPress.

 

Insertar shortcode contact form 7 en WordPress con editor Gutenberg

 

 

En el caso de que uses el editor Gutenberg aún es más fácil ya que tienes un módulo contact form 7

 

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

Busca el módulo y añádelo con Gutenberg.

Solo tendrás que elegir que formulario de los creados con Contact Form 7 quieres mostrar.

 

Módulo formulario de contacto de Contact Form 7 de Gutenberg

 

 

 

 Vídeo cómo usar Contact Form 7 paso a paso y en español.

 

Ahora te dejo un vídeo tutorial para que veas paso a paso y muy fácil como crear un formulario con el plugin contact form 7 y como insertarlo en una página o post de WordPress.

Si quieres MÁS sobre WORDPRESS, BLOGS, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

https://youtu.be/kif5i9F1Ac8

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com