10 trucos para Contact Form 7
Cuando hablamos de crear un formulario de contacto para WordPress lo tenemos claro, nuestra primera opción siempre es Contact Form 7. ¿No estás convencido? Con estos 10 trucos que te mostramos saldrás de dudas.
Contact Form 7 es uno de los plugin más populares en el repositorio de WordPress, su más de 1 millón de instalaciones activas y sus más de 28 millones de descargas lo elevan a la categoría de plugins indispensables.
Si además le sumas que es gratuito, su facilidad de uso y su capacidad para adaptarse a lo que necesitas con los trucos que te mostramos, Contact Form 7 se vuelve imprescindible casi obligatorio.
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>
Como puedes ver, podemos personalizar nuestros formularios de contacto con mucha facilidad.
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');
Con estos 10 trucos para Contact Forms 7 no tienes excusa para no hacer formularios de contacto personalizados de la manera más sencilla, pero si necesitas que te ayudemos tan solo tienes que escribir a nuestro departarmento de desarrollo web.
Artículos relacionados:
- factory_shortcodes_assets:
- a:0:{}
- classic-editor-remember:
- block-editor