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.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
ÍNDICE TUTORIAL CONTACT FORM 7
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.
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.
- 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.
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
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.
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
