Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Tutorial de funcionalidades en Contact Form 7

¿Sabes sacarle el suficiente provecho a Contact Form 7? Vamos a ver como configurarlo y a conocer sus principales funcionalidades.

Una vez instalado y activado Contact Form 7 crea un nuevo formulario desde la pestaña Contacto y “Añadir nuevo”.

Aquí asignarás un Nombre a tu primer formulario y en esta misma ventana es donde configurarás los campos que lo compone. Por defecto te aparece creado ya un formulario muy sencillito que podremos ir modificando. Vamos a analizarlo para que entendáis como funciona…

Esta parte del código lo que muestra es (como puedes ver en la imagen de la izquierda), el nombre de la etiqueta y el campo que el usuario utilizará para rellenar con su información.

Este campo se forma de esta manera:

[text] es el tipo de campo que estás añadiendo, en este caso una línea de texto.
[text your-name] Después tienes que identificar este campo con un nombre.
[text* your-name] Y el asterisco que obliga al usuario a escribir dicho campo y no dejarlo en blanco, este es opcional.

El formulario lo componen diferentes etiquetas dependiendo del campo que quieras que se muestre para recoger la información de tus usuarios. Puedes usar:

[text]
[email]
[url]
[tlf]
[email]
[textarea]

Siempre te puedes ayudar de los botones que aparecen en la parte superior para montar tu formulario.

Ahora sí entenderás como se forma el formulario que siempre aparece por defecto y podrás modificarlo a tu gusto.









[submit "Enviar"]

Como ves, una vez que tengas todos los campos que necesites creados, se añade también el botón de enviar [submit “Enviar”] . La palabra “Enviar” la podremos cambiar por el texto que queramos Submit, Enviar ahora, Suscribirse…etc

También tienes la opción de crear un texto descriptivo para ayudar al usuario a rellenar el formulario, o para incluir los textos denominativos dentro de las cajas y no fuera como hicimos en el ejemplo anterior. Mira como quedarían estos códigos para que entiendas mejor su uso.

[text* your-name placeholder "Escribe aquí tu nombre"]

[email* your-email placeholder "Email"]

[textarea your-message placeholder "Deja aquí tu mensaje"]

¿Cómo mostrar el formulario en la web?

Si ya quieres probar como queda el formulario en tu página, copia el código que ves debajo del título del formulario y pégalo en el lugar donde quieres que se muestre.

¿Cómo insertar un captcha para evitar Spam en tu correo electrónico?

Para poder insertar un Captcha y evitar que te llegue correo basura a través del formulario, es necesario que instales otro plugin extra desarrollado por Contact Form 7. https://wordpress.org/plugins/really-simple-captcha/

Una vez instalado y activado, accede a este enlace y da de alta tu propia web en Google Captcha de manera gratuita https://www.google.com/recaptcha

Google te genera 2 keys o códigos que tendrás que añadir en tu escritorio WordPress, en la pestaña Contacto > Integración de tu WordPress.

Ahora añade este código antes del botón de enviar de tu formulario [recaptcha] y tendrás esta útil funcionalidad.

¿Cómo insertar un desplegable con diferentes opciones?

Si quieres que tus usuarios puedan seleccionar diferentes opciones que te interesen saber de él, o por ejemplo, que seleccionen a qué departamento va dirigido su email, o qué dispositivo están usando, es tan sencillo como insertar este código…

Selecciona el departamento al que va dirigido *
[select* your-recipient "Comercial|[email protected]" "Soporte Técnico|[email protected]" "Información de eventos|[email protected]"]

o en el segundo caso

[select* your-device include_blank "Windows" "Mac" "Android" "iOS"]

¿Cómo insertar un checkbox de confirmación?

Si quieres añadir un botón de aceptación para por ejemplo, obligar a aceptar los término de uso de tu formulario, puedes añadir algo así…

[acceptance acepto] Acepto los términos de uso.

Y esto quedaría como la siguiente imagen

Inserta una casilla para adjuntar archivos

Otra opción muy útil es permitir a tus usuarios adjuntar documentos, facturas, currículum, imágenes etc… En este caso se añadiría este sencillo código y podrías editarlo a tus necesidades limitando tamaños o formatos de documentos.

[file* file-1 limit:3000 filetypes:.pdf|.docx]
Adjuntar Currículum Vitae

Inserta un checkbox con diferentes opciones

Si quieres insertar un checkbox con diferentes opciones puedes añadir este código donde “default” sería la opción que aparecería marcada por defecto.

¿Cuál es tu rango de edad?
[radio edad default:1 “18-35” “35-45” “45-60”]

Y estas serían en resumen las opciones más usadas dentro de la sección “Formulario”. Si necesitas alguna opción más que no veas en este artículo, escríbenos un comentario y te ayudaremos a resolverlo.

¿Cómo configurar como nos llega el Correo Electrónico en Contact Form 7?

En la siguiente pestaña de Contact Form 7 “Correo Electrónico” lo que haremos será configurar el email que nos llegará con la información que rellenó el usuario.

Para: Escribe el email al que quieres que te lleguen los datos del formulario.
Si has usado la opción de desplegar diferentes departamentos escribe [your-recipient] que es el nombre de la etiqueta que vimos anteriormente. Esto hará que el formulario se envíe solo al email que seleccionó el usuario.

De: Desde aquí te llegará la información que hayan escrito en Nombre o Email para que sepas quién te contactó. Escribimos el nombre de estos campos usados en “Formulario”. [your-name][your-email].

Ojo!!! Solo el nombre, no estamos añadiendo el código completo. [text* your-name] no sería correcto.
Si te da error al guardar este campo, esto es porque tienes que añadir, para asegurar que el email te llegue, un correo electrónico correspondiente al dominio que tienes.
Por ejemplo [your-name][your-email]

Asunto: En asunto insertarás el campo Asunto que escribió el usuario, pegamos el nombre del código correspondiente [your-subject] Pero… también podrías poner tu propio asunto como un texto. Por ejemplo: Formulario desde mi web.

Cuerpo del mensaje: Aquí iría el mensaje principal que escribió el usuario [your-message] y los campos extras que quieras recoger, si has añadido una aceptación, un rango u otro campo… bastaría con poner el id de cada uno para que te llegue la información.

[your-message]

[edad]
[acepto]
[your-device]
[_date]
[_time]


Cabeceras Adicionales:
En esta otra opción podríamos poner si queremos, por ejemplo, un email en copia de estos formularios.
cc: [email protected]

Archivos Adjuntos: Y en esta etiqueta pegamos el nombre de nuestro código anteriormente explicado para adjuntar documentos [file-1] y así podremos recibirlos directamente en nuestro email.

Además Contact Form 7 tiene otras etiquetas por defecto que puedes añadir para saber más sobre los usuarios que rellenaron tu formulario. Añade la información que quieras recoger en el cuerpo del mensaje.

[_remote_ip] – Dirección IP del usuario que envía el formulario.
[_user_agent] – Información del Agente de Usuario (User Agent).
[_url] – URL del formulario de contacto.
[_date] – Fecha del envío.
[_time] – Hora del envío.
[_post_id] – ID del post que contiene el formulario.
[_post_name] – Nombre (en la URL – SLUG) del post que contiene el formulario.
[_post_title] – Título del post que contiene el formulario.
[_post_url] – Enlace permanente del post que contiene el formulario.
[_post_author] – Nombre del autor del post que contiene el formulario.
[_post_author_email] – E-mail del autor del post que contiene el formulario.

En Correo Electrónico(2) podrías hacer que le llegue al usuario que rellenó el formulario, un email con una respuesta automática. Por ejemplo:

Para: [your-email]
De: Taller de WordPress
Asunto: Gracias por escribirnos
Mensaje: Vamos a estudiar su caso y le responderemos lo antes posible. El horario es…

Mensajes en Contact Form 7

Esta ventana es muy fácil de configurar, solo tienes que cambiar los textos que aparecen por defecto por los textos o mensajes que quieras tú que aparezcan en cada caso.

Ajustes Adicionales

En este campo puedes añadir códigos para cambiar el funcionamiento de algunas de las opciones predeterminadas. En este enlace puedes ver diferentes ejemplos como:

– Poder cambiar el mensaje enviado con éxito y que en vez de un texto se abra una página externa o un popup con un mensaje. Simplemente añadimos

on_sent_ok: “location = ‘https://example.com/’;”
o on_submit: “alert(‘Enviado’);”

– También podemos medir en Google Analytics las veces que se ha usado el formulario. Añadiríamos

on_sent_ok: “_gaq.push([‘_trackEvent’, ‘Formulario de contacto Principal’, ‘Enviado’]);”

Plugins adicionales para Contact Form 7

Flamingo: Plugin que sirve para guardar los emails que te llegan en tu base de datos, podrás consultarlos desde el escritorio WordPress en una nueva pestaña.
Contact Form CFDB7: Otro plugin que sirve para guardar los emails que te llegan en tu base de datos, al igual que anterior. Puedes usar cualquiera.
Captcha: Como hemos comentado antes, este plugin te ayudará al frenar el spam de tu formulario.
Condicional Fields: Este útil plugin te permite crear condicionales, para, por ejemplo, si el usuario marca una opción le aparezca un formulario diferente.
Contact Form Style: Con este plugin puedes cambiar el diseño de tus formularios fácilmente; los colores, el tipo de letra, añadir fotos, etc
Contact Form Skins: Contact Form Skin tiene multitud de plantillas de diferentes formularios para poder ayudarte a construir los tuyos.

Hasta aquí el resumen de uso de Contact Form 7, si necesitas alguna otra funcionalidad que no hayas encontrado en este pequeño tutorial, escríbenos y te ayudaremos a resolverlo.



This post first appeared on Taller De Wordpress, please read the originial post: here

Share the post

Tutorial de funcionalidades en Contact Form 7

×

Subscribe to Taller De Wordpress

Get updates delivered right to your inbox!

Thank you for your subscription

×