10 trucos para Contact Form 7 – Primera parte

Cómo mostrar en WordPress el formulario de suscripción a tus boletines
mayo 26, 2017

Truco 1: Mover el mensaje de confirmación

Al hacer un envío, Contact Form 7 muestra por defecto los mensajes de confirmación tipo “Su mensaje se ha enviado con éxito” o “Falló el envío del mensaje” al final del formulario.

Si lo deseas, puedes mover este mensaje a cualquier otro sitio usando la etiqueta:

[response]

Por ejemplo puedes ponerlo en la parte superior o incluso repetidas veces, aunque no tenga mucho sentido, pero que sepas que se puede.

 

Truco 2: Redirecciona a una página de agradecimiento

Después de enviar un formulario, Contact Form 7 se queda en la misma página. Si necesitas redireccionar al usuario a la típica Página de gracias o Thank you page tan solo necesitas añadir en la “Configuración adicional” el siguiente action hook con tu URL de destino:

on_sent_ok: "location = '/gracias';"

 

 

Truco 3: Seguimiento de eventos con Analytics

Si usas Google Analytics es muy probable que quieras medir las veces que se ha usado tu formulario de contacto. Contact Form 7 permite hacer un seguimiento de eventos usando el siguiente action hook en la “Configuración adicional”:

on_sent_ok: "_gaq.push(['_trackEvent', 'Formulario de contacto 1', 'Enviado']);"

 

 

 

Truco 4: Añadir más destinatarios a Contact Form 7

Cuando se rellena y envía un formulario, normalmente hacemos que llegue el mensaje a la dirección de correo que hemos especificado. También deberías saber lo fácil que es añadir más destinatarios con copia CC y con copia oculta BCC escribiendo sus direcciones en los “Encabezados adicionales”

 

 

 

Truco 5: Checkbox de términos y condiciones

Es muy posible que necesites añadir el típico checkbox de “Acepto los términos y condiciones”. Contact Form 7 tiene un campo específico bastante configurable el cual no deja enviar el formulario hasta que no se clica (o al contrario si se configura para que lo haga al revés).

Podemos añadir la casilla de verificación, la frase y el enlace con la siguiente etiqueta en el campo “Formulario” encima del botón “Enviar”.

[acceptance terminos-condiciones] Acepto los <a href="/terminos-condiciones" target="_blank"> términos y condiciones</a> 

 

 

Truco 6: Añadir captcha a Contact Form 7

Usar un formulario de contacto sin algún mecanismo de seguridad es una práctica bastante peligrosa, a no ser que quieras tener un montón de contactos desconocidos ofreciéndote productos de dudosa legalidad, lo mejor será protegerse con un captcha.

Los creadores de Contact Form 7 nos ofrecen Really Simple Captcha, un plugin sencillo pero fácil de usar y configurar con el que no tendremos ningún conflicto.

Para usarlo tan solo debemos añadir su etiqueta correspondiente:

[captchac captcha-endeos] 
[captchar captcha-endeos]

También permite cierta configuración de tamaño y colores:

[captchac captcha-endeos size:l fg:#00ff00 bg:#01338d] 
[captchar captcha-endeos]

Truco 7: Guardar los registros enviados con Contact Form 7

Una de las “carencias” de Contact Form 7 es que por defecto no hay donde consultar los mensajes enviados a través del formulario.

Los mismos desarrolladores de Contact Form 7 lo saben, por eso han creado Flamingo, un plugin que guarda un registro de los campos que se envían, como pueden ser nombres, correos, asuntos, mensajes…

Este plugin también te permitirá exportar en CSV toda la información que vaya recopilando.

Una alternativa creada por otros desarrolladores es Contact Form DB.

 

 

 

Truco 8: Etiquetas especiales para emails

Hay ocasiones en las que queremos más información de la que realmente nos envían desde el formulario. Insertando estas etiquetas especiales en el campo Cuerpo del mensaje o Message Body obtendremos detalles muy interesantes.

[_remote_ip] Muestra la IP del usuario
[_user_agent] Muestra la información del agente de usuario usado
[_url] Muestra la página desde la que nos envían el formulario
[_date] Muestra la fecha de envío
[_time] Muestra la hora de envío
[_post_title] Muestra el título del artículo donde está el formulario

 

 

 

Truco 9: Cargar los ficheros .js y .css solo cuando sea necesario

Con la configuración por defecto, Contact Forms 7 carga sus ficheros JavaScript y CSS en todas las páginas de la web. Como buenos optimizadores que somos, deberían dolernos los ojos al ver estas peticiones innecesarias. Lo más correcto sería cargar estos ficheros solamente cuando estemos mostrando un formulario de contacto.

En primer lugar haremos que no se cargue por defecto los ficheros .js y .css añadiendo en el functions.php de nuestra plantilla:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

En segundo lugar haremos que se carguen estos ficheros solo cuando estemos en la página de contacto. Para ello deberemos colocar en nuestra plantilla de página contact.php antes de llamar al wp_head():

<?php
     if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
         wpcf7_enqueue_scripts();
     }
 
     if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
         wpcf7_enqueue_styles();
      }
?>



Truco 10: Añadir shortcodes en el editor de formularios

El editor HTML de Contact Form 7 permite adaptar el formulario a tus necesidades, pero ¿no echas de menos poder usar shortcodes? Para que funcionen deberás editar tu fichero functions.php y añadir las siguientes líneas:

function endeosshortcode_wpcf7_form_elements($form){
      $form = do_shortcode($form);
      return $form;
}
add_filter('wpcf7_form_elements', 'endeosshortcode_wpcf7_form_elements');

 

A %d blogueros les gusta esto: