Trucos para Contact Form 7 (actualizado)

[…]


por

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)»

  1. Avatar de Matías Saavedra

    |

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

    1. Avatar de esther

      |

      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!

  2. Avatar de Matías Saavedra

    |

    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

    1. Avatar de esther

      |

      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!

  3. Avatar de Pierre

    |

    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

  4. Avatar de JUAN

    |

    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.

    1. Avatar de esther

      |

      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!

  5. Avatar de emilia

    |

    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

    1. Avatar de esther

      |

      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,

  6. Avatar de Carlos

    |

    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 🙂

    1. Avatar de esther

      |

      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 callback
      function 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!

  7. Avatar de Cesar

    |

    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?

    1. Avatar de esther

      |

      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!

      1. Avatar de Cesar

        |

        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!

        1. Avatar de esther

          |

          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!

          1. Avatar de Cesar

            |

            Genial, mira que lo he buscado pero no lo he encontrado, muchas gracias de antemano!!

          2. Avatar de Cesar

            |

            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

          3. Avatar de esther

            |

            Genial Cesar! enhorabuena por sacarlo… al final he tenido una temporada complicada y no he podido ponerme.

            Saludos!

  8. Avatar de Maikel Aduarte

    |

    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

    1. Avatar de esther

      |

      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,

  9. Avatar de Juan Fco. Díaz

    |

    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.

    1. Avatar de esther

      |

      Genial! Me alegra que te haya sido útil 😉

  10. Avatar de Javier Cortes

    |

    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

    1. Avatar de esther

      |

      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!

  11. Avatar de jibran

    |

    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.

    1. Avatar de esther

      |

      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!