Aunque existen muchos plugins para crear formularios de contacto en WordPress, lo cierto es que Contact Form 7, además de ser ya un clásico, sigue siendo el más utilizado, por su simplicidad, compatibilidad y buen funcionamiento.
Lo cierto es que esa misma simplicidad, que puede ser su punto fuerte, a menudo provoca que echemos algunas cosas de menos que con otros plugins vienen ya por defecto.
En este artículo repasaremos algunas de ellas y cómo solucionarlas fácilmente.
1. Guardar envíos de formularios
No es extraño que en alguna ocasión, por problemas del servidor de correo o configuración, los formularios de contacto no lleguen a su destinatario (o lleguen como spam y no sean vistos). Para evitar perder datos de contacto que pueden ser vitales para nuevos leads de clientes, es básico que éstos se guarden en la base de datos además de enviarlos por email.
Contact Form 7 no tiene esa funcionalidad por defecto, pero tiene una extensión, Flamingo, que cumple perfectamente con esa tarea.
2. Checkbox de aceptar condiciones
Contact Form 7 trae un tipo de campo por defecto para añadir un checkbox de aceptación de condiciones para poder enviar ([acceptance]), sin embargo, el tipo de validación que efectúa no es muy práctico, ya que simplemente impide que se envíe el formulario pero no muestra ningún mensaje ni error.
Para que el formulario muestre un mensaje de validación, igual que lo hace con los campos obligatorios, sólo debes añadir la siguiente frase en la pestaña de Ajustes Adicionales: acceptance_as_validation: on
3. Redireccionar a otra página al enviar
Es común en las páginas web querer redirigir al visitante a otra página al enviar un formulario de contacto o de algún tipo de solicitud, ya sea para mostrarle más información, añadir códigos de seguimiento, etc..
Hasta hace poco, podía hacerse en Contact Form 7 añadiendo una línea de javascript en Ajustes adicionales, sin embargo esta forma de hacerlo ha quedado depreciada y ahora debe utilizarse un script en la cabecera o pie de página
<script> document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/'; }, false ); </script>Si utilizas Genesis Framework, podrás añadirlo en Genesis -> Theme Settings, en el apartado de Header and Footer Scripts. En otros temas, deberás mirar si en sus opciones hay la posibilidad de añadir scripts o quizás deberás editar la plantilla, modificando la ruta http://example.com/ por la url completa de la página donde quieras redirigir.
4. Diseño en 2 columnas y responsive
Otro clásico en lo que Contact Form 7 se queda corto… es poder añadir los campos del formulario en dos columnas. Algunas plantillas o temas ya llevan estilos predefinidos para los formularios, pero no todos.
Si lo que quieres es un ejemplo fácil de como mostrar algunos campos en dos columnas y otros que ocupen el 100% y que además sea responsive, aquí tienes uno que te puede servir:
<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half">Nombre* [text* first-name]</div> <div class="column-half">Apellido* [text* last-name]</div> </div> <div class="form-row"> <div class="column-half">Email* [email* your-email]</div> <div class="column-half">Teléfono* [text* your-phone]</div> </div> <div class="form-row"> <div class="column-full">Comentarios [textarea your-message]</div> </div> <div class="form-row"> <div class="column-full">[acceptance acceptance-534] He leído y acepto la <a href='#' target='_blank'>Política de privacidad</a></div> <div class="column-full">[submit "Enviar"]</div> </div> </div><!--end responsive-form-->
Y los estilos CSS correspondientes:
#responsive-form{
max-width:900px /*-- cambiar esto para conseguir el ancho de la forma deseada --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
.column-half:first-child {
padding-right: 20px;
}
}
5. Etiquetas especiales
Contact form nos permite añadir algunas etiquetas al contenido de los formularios para poder recibir más información o detalles sobre el origen:
[_remote_ip] — La IP del ordenador de envío
[_user_agent] — Navegador utilizado
[_url] — URL desde donde se ha enviado (si tenemos el mismo formulario en distintas páginas, por ejemplo, nos servirá para saber desde cual han escrito)
[_date] — Fecha del envío
[_time] — Hora
[_invalid_fields] — Si hay campos inválidos
Relacionados con el post:
En el caso que el formulario esté insertado dentro del contenido de un post, estas etiquetas o shortcodes no darán información sobre el mismo:
[_post_id]
[_post_name]
[_post_title]
[_post_url]
[_post_author]
[_post_author_email]
Además de estas, existen otras relacionados con el usuario, por ejemplo si está logeado, puedes consultarlas todas aqui
¡Espero que estos trucos te hayan servido!
Si tienes alguna duda o hay alguna otra funcionalidad para Contact Form 7 que necesitas y no sabes cómo hacer, déjalo en los comentarios.
Comentarios
26 respuestas a «Trucos para Contact Form 7 (actualizado)»
|
Tengo una consulta sobre Contact Form 7
Le he dado muchas vueltas al asunto y no lo he conseguido. Necesito tener un formulario con letras en Mayusculas, para eso usé text-transform: uppercase* ( esto esta OK ) y funciona en el front-end..
El problema pasa cuando Se envía el formulario. Las etiquetas del contact form llegan en minúscula ( lowercase).. Quiero saber si existe alguna forma de que al llegar el correo a mi Cuenta de Mail .. puedan llegar los datos de forma normal con Mayúscula y luego minuscula es decir ( * capitalize ) … ya que siempre llegan al correo en minúscula los datos de las etiquetas de contact form 7 ..
|
Hola Matías!
Cuando dices que las etiquetas del formulario llegan en minúscula, ¿te refieres a la etiqueta del campo o al contenido que escribe el usuario?
¿Has probado añadiendo estilos inline en el contenido del email que se envía?
Saludos!
|
Hola. Gracias por contestar.
El formulario en el Front End funciona bien.. es un formulario con hartos campos porque es de solicitud de examenes médicos.
Los mensajes llegan bien en el cuerpo del mensaje es decir .. por ejemplo puse lo siguiente
Nombre del Paciente: [nombre] ( y esto llega así por ejemplo «Nombre del Paciente: Juan Gonzalez»)
Asi que esta parte esta bien, esta OK.
El problema es con el Asunto del mensaje.
Por ejemplo en el Asunto puse el siguiente texto.
Solicitud de Exámenes Médicos [nombre] [apellido] [telefono]
Al poner este texto … llega de esta forma
«Solicitud de Exámenes Médicos juan gutierrez 888999888»
El texto esta bien .. pero las etiquetas no permiten que llegue en «Capitalize» ..
Utilice hacerlo de la siguiente forma pero no me funcionó
«Solicitud de Exámenes Médicos [nombre] [apellido] [telefono]»
Pero tampoco funcionó … no cambio el tamaño de la primera letra de las etiquetas.
Ese es el problema que tengo, he intentado css .. pero solo puedo cambiar el cuerpo del mensaje y los placeholders.
Si sabes de alguna solución alternativa me sería de mucha ayuda.
Gracias
|
Hola Matías,
Es que, si no me equivoco, no es posible darle formato al asunto de un email, ya que es texto plano, no html, por eso no te sirven las etiquetas .
La única solución que se me ocurre es modificando los archivos php del plugin, pero tampoco lo recomiendo porque podrías tener problemas con las actualizaciones.
Siento no poder ayudarte!
|
Hola, consulta: en un campo calculado, saben como formatear para que aparezcan las puntuaciones de miles y poner dos decimales. Evitar por ejemplo esto: 51833.333333333336
|
Hola, excelente el contenido de la página, tengo una consulta:
Como hago para redireccionar a un video específico que está en mi página después de enviar el formulario, de hecho sí lo redireccione a la pagina pero no al video, el video se encuentra al final de la página y al llegar ahí tengo que hacer escroll hasta el video y no es correcto eso, la redirección me gustaría que se ubique exactamente en el video. Me gustaria tener una solución con código de javascript si fuese posible.
Gracias.
|
Hola Juan,
No es necesario Javascript, si en el video del final de la página le añades un ID (o fíjate si ya tiene uno específico), puedes redireccionar a esa parte de la página directamente añadiendo #nombredelid al final de la url.
Por ejemplo, si tu video tiene la etiqueta id=»video1″, la url sería http://dominio.com/gracias?#video1
Espero que te sirva!
|
buenos dias:
he instalado send pdf para que al hacer el formulario se abra una nueva ventana con el formulario en pdf, sin embargo lo que hace es abrir una ventana en blanco. He probado a desactivar plugin que podría hacerlo incompatible, pero no ha resultado. Les agradecería ayuda. Gracias
|
Hola Emilia,
Pues lo cierto es que no suelo utilizar ese addon, pero por lo que comentas puede ser problema de permisos del navegador. ¿Has probado con otro o a revisar la configuración?
Saludos,
|
Hola, como puedo hacer para que en el campo de numero telefonico solo escriban 10 digitos y que no sobre pase esa cantidad? de igual manera como puedo hacer que solo escriban numero y no letras porque en ese campo tambien me deja poner palabras y yo solo quiero los numero telefonicos a 10 digitos?
Gracias y Saludos 🙂
|
Hola Carlos,
Tienes la opción de crear un campo numérico, y asignarle un mínimo y máximo, por ejemplo:
[number* tel minlength:10 maxlength:140 placeholder "Teléfono"]O si te apañas bien con el código, puedes usar el tipo de campo tel y añadir una función de validación,por ejemplo:
// define the wpcf7_is_tel callbackfunction custom_filter_wpcf7_is_tel( $result, $tel ) {
$result = preg_match( '/^\(?\+?([0-9]{1,4})?\)?[-\. ]?(\d{10})$/', $tel );
return $result;
}
add_filter( 'wpcf7_is_tel', 'custom_filter_wpcf7_is_tel', 10, 2 );
Saludos!
|
Hola!!, tengo una duda, estoy maquetando una respuesta en html para la persona que rellene un formulario. Me pasa que quiero poner las respuestas en varias líneas (Ya que ahora solo lo separa por comas las respuestas en una misma línea) ¿Eso es posible?
|
Hola Cesar!
¿Te refieres al mensaje de respuesta de CF7 cuando envías el formulario?
Sí es ese, CF7 no deja añadir HTML en los mensajes de respuesta… lo que puedes hacer es darle formato mediante CSS, pero no añadir un salto de línea dentro.
Saludos!
|
Las respuestas a la hora de llegar por correo viene separadas por comas y seguidas una detrás de otra (en el correo que le envío al cliente), pero vienen sin ningún intro en ellas.
En una lista de opciones larga, si marcan muchas opciones, no se pueden separar por un intro () y queda raro en el correo que le llega al cliente con las opciones que ha marcado.
Miraré el código con el sublime text a ver si tiene fácil solución, gracias de todos modos!
|
Hola Cesar,
Creí que te referías al mensaje que aparece en la web conforme el formulario se ha enviado.
El email que se envía si que se puede formatear, en cuanto pueda te preparo un ejemplo.
Saludos!
|
Genial, mira que lo he buscado pero no lo he encontrado, muchas gracias de antemano!!
|
Ya dí con la tecla, hay que modificar el archivo
wp-content\plugins\contact-form-7\includes\functions.php en la línea 92 cambiar la coma que aparece por «return implode( «\r\n», $output );»
luego utilicé la propiedad css «white-space: break-spaces;» para que me respetara los saltos de línea en los correos html que recibe el cliente con las respuestas en modo array
|
Genial Cesar! enhorabuena por sacarlo… al final he tenido una temporada complicada y no he podido ponerme.
Saludos!
|
Hola, muchas gracias por este post genial.
Quería consultar como podría añadir el Shortcode a unas 200 entradas ya creadas en una sola acción, sin tener que ir añadiendo el shortcode entrada por entrada.
Muchas gracias
|
Hola Maikel,
No se que tema utilizas ni si tienes algunos conocimientos de código, pero se me ocurre que podrías añadirlo mediante una función para mostrarlo después del contenido, en todos los posts o con un condicional para una categoría o etiqueta en concreto por ejemplo.
Es decir, no añadirlo en el contenido y que quede incrustado, sino mostrarlo dinámicamente y de esa forma poder cambiarlo en cualquier momento en todos a la vez.
Te lo dejo como idea por si te ayuda!
Saludos,
|
Gracias por el artículo, me ha servido a la perfección para redireccionar a la página deseada cuando el visitante hace click en enviar el formulario.
|
Genial! Me alegra que te haya sido útil 😉
|
Hola…
No tengo mucho conocimiento del tema, pero me lance a hacer una landig para una campaña propia. Utilice CF7 para el formulario, pero noto que en el campo nombre y teléfono se pueden colocar datos erróneo, es decir en el campo de nombre puedo colocar un numero o una letra y el campo teléfono con solo colocar un numero, por ejemplo 1 o el que sea, ya me deja enviar el formulario.
Como puedo mejorar esto?
Gracias
|
Hola Javier!
Se pueden crear funciones personalizadas para validación de los campos (tienes más info aquí: https://contactform7.com/2015/03/28/custom-validation/ )
Pero si no quieres liarte con código, también puedes probar este plugin que además muestra errores de validación personalizados: https://es.wordpress.org/plugins/jquery-validation-for-contact-form-7/
Saludos!
|
Hola! muy buen post.
Tengo una duda, quisiera que cuando rellenen la sección de «email» excluya correos tipo google, yahoo, outlook, etc. Tengo la idea de que con JavaScript se pueda hacer, pero no he podido implementar JS con CF7.
Alguien que pueda asesorarme por favor y gracias.
|
Buenas!
En la documentación de CF7 tienes información y ejemplos de cómo añadir JS mediante DOM events y así controlar cuando se envía el formulario y poder validar el campo. Lo tienes aqui: https://contactform7.com/dom-events/
Saludos!