Sácale todo el partido a Contact Form 7
Si usas WordPress, Contact Form 7 es más que seguro, tu formulario de contacto. El plugin de Takayuki Miyoshi no es solo otro formulario de contacto de WordPress, ya que gracias a su flexibilidad y sobre todo, su sencillez, se ha convertido en el plugin preferido de miles de webmasters de WordPress.
Hoy queremos darle una vuelta de tuerca más a este famoso plugin para sacarle el máximo partido posible y por ello os voy a dar 4 consejos que os ayudarán a potenciar esta herramienta.
Configura las fechas
Contact Form 7 es un tanto especial con las fechas. Además, depende del navegador que utilice el usuario de nuestra web, éste aparecerá de una forma u otra.
Me explico, Contact Form utiliza el formato de fecha por defecto yyyy, mm, dd y es prácticamente imposible modificarlo. Esto es un grave problema cuando el usuario que visita nuestra web utiliza Internet Explorer ya que tendrá que escribir manualmente la fecha y, al menos en España, el formato clásico es dd/mm/yyyy por lo que la fecha no será correcta y no permitirá enviarlo.
En Chrome, gracias a su facilidad de uso, incluye un calendario que permite al usuario seleccionar la fecha. De esta forma, el formato permanece yyyy, mm, dd para Contact Form 7 pero el usuario tiene la facilidad de elegir la fecha en el calendario.
¿Cómo solucionamos este problema?
Existe un plugin bastante interesante: Contact Form 7 Datepicker que incluye un calendario siempre que aparezca una campo de fecha y funciona en casi todas las versiones de los navegadores más importantes (incluyendo IE, pero no en versiones antiguas). El único punto negativo es que en móviles no es responsive y si la pantalla es pequeña puede jugarnos una mala pasada.
Otra solución, siempre que se especifique que el formato es yyyy/mm/dd es añadir en el email que recibimos de contacto, o en el que mandamos a los usuarios el comando [_format_cambiarporcampodefecha «dd/MM/YYYY»]. De este modo, recibiremos la fecha en el formato que elijamos ya que también se puede cambiar por ejemplo a D, d M y.
Redirecciona a una página de agradecimiento.
Las páginas de agradecimiento o thank you page, son muy interesantes ya que, por defecto, Contact Form 7 no redirecciona a ninguna página, tan solo muestra un cartel de confirmación del envío.
Además, si estamos realizando conversiones con AdWords, es interesante redireccionar al usuario a una página de agradecimiento donde instalemos el código de conversiones, como vimos en la entrada Cómo instalar el Código de Seguimiento de AdWords con Contact Form 7.
Para la redirección debemos añadir en la pestaña “Configuración adicional” el siguiente código: on_sent_ok: “location.replace(‘http://tupaginaweb.com/gracias/’);”
De esta manera tan sencilla, tendremos una redirección muy interesante que permitirá al usuario mejorar su experiencia en tu web.
Personaliza el email
Una de las opciones más interesantes de Contact Form 7 es configurar el mensaje que recibiremos y que recibirá el usuario al rellenar el formulario. Para ello debemos gestionar el email y el email (2).
El email (1), es el que deberías recibir tú. Puedes personalizar tu mensaje añadiendo html (no te olvides de seleccionar la opción de usar contenido del tipo HTML) y utilizando los campos que has usado en el formulario para que no pierdas información importante. Te aconsejo que uses un lenguaje coloquial y dejes algún mensaje divertido para que luego te alegre el día. Por ejemplo, nuestro email dice algo así:
¡Hola Marcianos!
¿Qué tal? ¡Nos han hecho una consulta a través de la web! Los datos son:
- Nombre de contacto: [your-name]
- Email: [your-email]
- Teléfono: [telefono]
Además ha dejado el siguiente mensaje: [mensaje]
En fin, espero que sea interesante.
¡Saludos desde Marte! 🙂
Personaliza también el email que llegue al usuario que contacte contigo. Hazle ver que ese mensaje se autogenera pero dale información interesante o cuéntale un chiste. En definitiva, fidelizalo desde ese momento.
Utiliza las columnas
Muchos diseñadores webs se complican poco a la hora de utilizar Contact Form 7. Como norma general, suelen dejar el formulario por defecto y no le añaden funcionalidad o se niegan a mejorar la experiencia del usuario.
En Marte nos gusta complicarnos y jugar con los estilos de las webs que diseñamos y por ello utilizamos columnas en nuestros formularios. Utilizamos 2-3 columnas para que el diseño del formulario se mimetice con el resto de la web y, además, en responsive conseguimos que las columnas se vuelven filas para que no altere la adaptación a dispositivos móviles.
Para ello tendremos que configurar la hoja de style.css y añadirle el formato de columnas que queremos, ya sea ½ , ⅓ u otro que prefiráis.
Luego tendremos que añadir el html en nuestro formulario para tener las columnas que queramos. Por ejemplo:
<div class=»column-one-third»[text* your-name placeholder «Nombre *»]</div>
<div class=»column-one-third»[email* your-email placeholder «Tu Email *»]</div>
<div class=»column-one-third»>[tel* your-phone placeholder «Teléfono *»]</div>
Para que tengáis más información sobre esta personalización de columnas, os recomiendo este post sobre crear un Contact Form 7 de dos columnas.
Existen más trucos sobre Contact Form 7, algunos bastante interesantes que dejo para otras entradas, aunque, si tenéis alguno, no dudes en dejarlo en la sección de comentarios. Y, por supuesto, si te ha gustado comparte este post en tus redes sociales 🙂
9 comments on “Sácale todo el partido a Contact Form 7”
Hemos probado algún otro plugin para formularios de contacto, pero definitivamente nos quedamos con Contact Form 7 por su flexibilidad. Muchas gracias por el post.
Sin duda, contact form 7 es el más sencillo y para mi gusto, el mejor. Gracias por pasarte por nuestro blog 🙂
Hola Enrique,
Estoy utilizando ContactForm 7 junto con DatePiker, y tengo el problema de que en el mail que recibo aparecen todos los datos menos la fecha !! He probado varias configuraciones y no hay forma. ¿Sabes a que puede ser debido?
Muchas gracias !!
Hola Rafel, lo cierto es que no he probado DatePiker pero con respecto a las fechas existen diversos problemas porque cada navegador utiliza un display diferente, sobre todo si usas ese navegador en el móvil. Mucha suerte, gracias por pasaste por nuestro blog y un abrazo.
Muy buenas tardes, primero que nada quisiera saber como editar los cuadros de texto de manera que salga antes de que el cliente haga click «Nombre*, E-Mail*, Sitio Web*» Es lo que deseo ya que veo que el contact form de mi página se ve muy simple y además no sé como centrarlo, colocarlo para ahorrar mas espacio y mejorar la experiencia del usuario. Gracias por toda la información y el apoyo
Una consulta y he buscado por todo lado, como podríamos generar un número para cada llenado de formulario para tener un orden y seguimiento del mismo, no se si me dejo entender, que cuando el usuario llene el form este genere algun numero para que le demos seguimiento a esa entrada.
Desde ya muchas gracias
Hola me encanta contact form 7 y me cuesta mucho despegarme de él.
El caso es que tengo un cliente que necesita un sistema de reservas. Mi pregunta es si recomiendas algún plugin para añadir un sistema de reservas a Contact Form 7. He buscado miles pero no he encontrado nada que me de confianza del todo. No quiero gastar el dinero de mi cliente inútilmente. Solo necesito que la información de contact form se añada a un calendario.
Hola yo he intentado hacer un formulario coomo el de la primer imagen en su blog que es de reservaciones pero nose como hacer para que me salga el calendario y seleccionar un dia.. 🙁 alguien que pueda ayudarme con eso..
gracias…
Hola, la verdad es que llevo mucho tiempo utilizando form 7 y es el que más seguridad me da. Ahora lo tengo configurado en una página en la que quiero tener perfecto al 100% todos los temas legales. Técnicamente no sé muy bien cómo funciona el tema de las cookies. Y mi pregunta es si el form 7 por defecto utiliza cookies.