TUTORIAL CONTACT FORM 7: Cómo usar este plugin de formulario de WordPress [2022]

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.

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”

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

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”

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

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



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

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

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>

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

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

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”

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

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.

LucusHost, el mejor hosting

Deja una respuesta