Vamos a ver unos cuantos consejos, recomendaciones y mejoras para Contact Form 7 de WordPress, unos de los plugin de formularios para WordPress más utilizados.
Es posible hacer muchas cosas con Contact Form 7. Gracias a sus múltiples plugin permite hacer una personalización casi ilimitada, como el plugin para integrar un botón de PayPal en el formulario de WCF7, o en formularios complejos añadir campos condicionales.
WordPress form7
Contact Form 7 es uno de los plugins más populares para agregar formularios de contacto en WordPress. Con más de 5 millones de instalaciones activas, es una opción confiable y fácil de usar para cualquier sitio web.
Una de las principales ventajas de Contact Form 7 es su versatilidad. Puedes personalizar completamente el diseño de tus formularios de contacto utilizando HTML y CSS. Esto te permite adaptar los formularios a la estética de tu sitio web y asegurarte de que se integren perfectamente con el diseño general.
Además de la personalización del diseño, Contact Form 7 también te permite agregar campos personalizados a tus formularios de contacto. Puedes añadir campos de texto, casillas de verificación, botones de radio, menús desplegables y mucho más. Esto te brinda la flexibilidad necesaria para adaptar tus formularios a las necesidades específicas de tu negocio o sitio web.
Otra característica destacada de Contact Form 7 es su capacidad para gestionar múltiples formularios de contacto en un mismo sitio web. Puedes crear tantos formularios como necesites y personalizarlos de forma independiente. Esto es especialmente útil si tienes diferentes departamentos o áreas de contacto en tu empresa.
Contact Form 7 es una herramienta flexible para agregar formularios de contacto en WordPress. Con su capacidad de personalización y gestión de múltiples formularios, te permite crear una experiencia de usuario única y adaptada a tus necesidades.
Personalizar contact form 7
Personalizar formularios de contacto con Contact Form 7 es una excelente manera de adaptarlos a las necesidades de tu sitio web. Puedes modificar el diseño, los campos y los mensajes de confirmación para que se ajusten a la imagen de tu marca.
Una de las formas más sencillas de personalizar un formulario de contacto es utilizar las clases de estilo de Contact Form 7. Puedes agregar clases CSS personalizadas a los campos del formulario para cambiar su apariencia. Por ejemplo, puedes cambiar el color de fondo, el tamaño del texto o la alineación de los campos.
Otra forma de personalizar el formulario es editar los mensajes de confirmación que se muestran cuando se envía el formulario. Puedes modificar el mensaje de agradecimiento o agregar instrucciones adicionales para el usuario. Esto te permite dar una respuesta personalizada y brindar una mejor experiencia al usuario.
Si quieres ir un paso más allá, puedes utilizar filtros y ganchos de Contact Form 7 para personalizar aún más el formulario. Estos filtros y ganchos te permiten modificar el código del formulario y realizar acciones específicas antes o después de que se envíe el formulario. Esto es especialmente útil si necesitas integrar el formulario con otros servicios o realizar validaciones adicionales.
Guardar los datos en base de datos y exportarlos
En bastantes ocasiones necesitarás guardar los datos del formulario en base de datos, por si los correos te llegan a «spam», o para poder tener los datos mejor organizados que en tu cuenta de correo.
Contact 7 no trae esta funcionalidad por defecto, pero existe un plugin llamado «Flamingo», del mismo desarrollador, que cumple esa función. Personalmente, prefiero «Advanced CF7 DB» porque tiene la opción de exportar en Excel, función que el otro no tiene. En cuestión de importación de datos, las tablas de la administración donde se ven los registros, es mucho mejor, pudiendo editar los nombres de las columnas, ocultar, etc.
También existen otros plugin que solucionan este problema si estos dos que sugiero no se ajustasen a tus necesidades.
Activar botón de envío sin aceptar las condiciones
Cuando pones por temas legales el checkbox de aceptación, el botón de enviar datos no funciona hasta que seleccionas esa opción. El problema de este funcionamiento que viene por defecto es que el usuario puede que no identifique que tienes que marcar la opción para que valide y envíe el formulario.
Para que el checbox de aceptación se comporte como un checkbox normal, aparezca el aviso de que no está seleccionado, y no envíe los datos hasta que esté marcado, tienes que ir a «Ajustes adicionales» y añadir el texto «acceptance_as_validation: on»
Con esta sencilla línea solucionamos el problema, y cuando el usuario pulse a enviar datos se mostrará un aviso de que le falta marcar la aceptación de las condiciones legales.
Desactivar el envío de emails en WCF7
Por defecto, Contact Form 7 envía un email con los datos del formulario. Sin embargo, hay ocasiones en las que no nos interesa recibir estos emails, especialmente cuando se trata de suscripciones a una newsletter o cuando guardamos los datos en una base de datos.
Para evitar que Contact Form 7 nos envíe emails y evitar llenar nuestro buzón de mensajes innecesarios, debemos ir a la pestaña de «Ajustes Adicionales» y escribir «skip_mail: on». Este sencillo paso desactivará la función de envío de correos automáticamente, permitiéndote gestionar los datos de los formularios de la manera que prefieras.
Personalizar la validación de datos
En ocasiones se necesita limitar los campos o hacer validaciones personalizadas en los formularios de WFC7. Actualmente, por ejemplo, un campo numérico no soporta el atributo «minlength», ni «maxlength». En realidad es que aunque lo pongas al generar el campo no se muestra.
Entonces, si quisiera limitar un campo, por ejemplo, número de teléfono a 9 dígitos, no se puede, pero gracias a los filtros que trae WFC7 podemos añadir las validaciones que necesitemos.
En este caso vamos a validar un número de teléfono, con un campo número para que solo acepte 9 dígitos.
function bk_validation_phone( $result, $tag ) {
$type = $tag['type'];
$name = $tag['name'];
// your-tlf (Nombre del campo) -> [number* your-tlf placeholder "Teléfono móvil*"]
if ( 'your-tlf' === $name ) {
$phone_number = isset( $_POST['your-tlf'] ) ? trim( $_POST['your-tlf'] ) : '';
if ( 9 !== strlen($phone_number) ) {
$result->invalidate( $tag, 'El número de teléfono debe de tener nueve dígitos.' );
}
}
return $result;
}
add_filter('wpcf7_validate_number','bk_validation_phone', 10, 2);
add_filter('wpcf7_validate_number*', 'bk_validation_phone', 10, 2);Otros filtros: wpcf7_validate_text, wpcf7_validate_email, wpcf7_validate_tel, wpcf7_validate_textarea, etc.
Validar emails corporativos en formularios Contact Form 7
Os puede surgir que necesitéis avisar al usuario o no queréis excluir emails genéricos como gmail, etc., para tener leads de mejor calidad.
Con el siguiente código avisamos al usuario de qué no permitimos emails genéricos en formularios WCF7.
function bk_is_email_company( $email ) {
// Lista de email genéricos que no queremos dejar pasar.
if (
preg_match('/@gmail.com/i', $email) ||
preg_match('/@gmx.com/i', $email) ||
preg_match('/@hotmail.com/i', $email) ||
preg_match('/@live.com/i', $email) ||
preg_match('/@msn.com/i', $email) ||
preg_match('/@aol.com/i', $email) ||
preg_match('/@yahoo.com/i', $email) ||
preg_match('/@inbox.com/i', $email) ||
preg_match('/@me.com/i', $email)
) {
// Para saber que es un email común.
return false;
}else{
// Para saber que probablemente es un email de empresa.
return true;
}
}
function bk_validation_email_company( $result, $tag ) {
$type = $tag['type'];
$name = $tag['name'];
// Solo lo hacemos en el campo con ese ID.
if( 'your-email' === $name ) {
$email = isset( $_POST['your-email'] ) ? trim( $_POST['your-email'] ) : '';
// comprobamos el tipo de email con la función anterior «bk_is_email_company»
if( !bk_is_email_company($email) ) {
$result->invalidate( $tag, 'Por favor inserte un email de corporativo.' );
}
}
return $result;
}
add_filter( 'wpcf7_validate_email', 'bk_validation_email_company', 10, 2 );
add_filter( 'wpcf7_validate_email*', 'bk_validation_email_company', 10, 2 );Optimiza la velocidad de carga del formulario Contact Form 7.
Unos de los problemas que tiene el plugin WCF7 es que hace peticiones en todas las páginas, este o no el formulario en ella. Puedes evitarlo siguiendo los pasos de este otro artículo «Trucos para mejorar la velocidad carga de tu sitio web»
Solucionar el problema de recarga en formularios de contacto 7
Si has utilizado Contact Form 7, sabrás que tiene problemas de rendimiento en la solicitud de recarga.
WCF7 detecta mediante un script si la página está en caché y en caso afirmativo envía una solicitud AJAX al servidor. Esto le toma una cantidad de tiempo enorme entre 500 y 1000 ms
Este problema, sobre todo, se nota cuando activamos la opción reCAPTCHA de Google del propio plugin y además recibimos una respuesta del servidor vacía.
Para solucionar el problema solo tenemos que ir a la carpeta del plugin en el archivo «includes/controller.php» y comentar estas líneas. Recuerda que este ajuste se pierde cuando actualicemos el plugin.
if ( defined( 'WP_CACHE' ) && WP_CACHE ) {
$wpcf7['cached'] = 1;
}Shortcodes especiales
Los formularios de Contact Form 7 nos ofrecen unas etiquetas para añadir más información o detalle sobre el envío del formulario. Estos shortcodes son:
- [_date] → Fecha del envío
- [_time] → Hora
- [_url] → URL desde la página de la web donde esté el formulario. Así sabremos si viene el leads y les desde la página de contacto, servicios, etc. o si usamos el mismo formulario en diferentes sitios.
- [_remote_ip] → IP del ordenador desde el que se envían los datos.
- [_user_agent] → Navegador utilizado por el usuario.
- [_invalid_fields] → Si hay campos inválidos.
Relacionado con el artículo, post
En ocasiones necesitamos añadir información de una entrada, artículo de WooCommerce, etc., para identificar mejor la consulta o datos del formulario WCF7.
La información la podemos añadir con el shortcode o etiqueta. Las que tenemos disponibles son:
- [_post_id] → Id del producto.
- [_post_name] → Nombre del producto.
- [_post_title] → Título del producto.
- [_post_url] → URL del producto.
- [_post_author] → Autor del artículo.
- [_post_author_email] → Email del autor del artículo.
Aquí podéis ver más shortcodes.
Contador de formularios enviados con Flamingo y Contact Form 7
¿Quieres añadir un contador en tiempo real que muestre la cantidad de formularios enviados en tu sitio web? Ahora es posible gracias a un plugin creado por Luis Molina, que utiliza Flamingo y Contact Form 7. Este plugin ofrece un shortcode que puedes integrar fácilmente en cualquier página de tu sitio web.
La implementación es sencilla, pero requiere que tengas instalados previamente los plugins Flamingo y Contact Form 7. Puedes descargar el plugin desde su repositorio oficial en GitHub.
Aquí tienes un ejemplo del uso del shortcode:
[flamingo_count]Este código mostrará el número total de formularios enviados, permitiéndote compartir métricas de manera visible y directa.
Luis Molina anunció esta solución en su cuenta de Twitter. Puedes ver el tweet original aquí.
¡Gracias a Luis Molina por compartir este plugin tan útil para los usuarios de WordPress!
Conclusión
Personalmente, Contact Form 7, me parece una buena solución para formularios en WordPress. Existen otros plugin, posiblemente mejores, pero WCF7 es muy versátil y tiene bastantes plugin que amplian las funcionalidades, como por ejemplo «Drag and Drop Multiple File Upload» para subir ficheros arrastrándolos, o Honeypot para Contact Form 7 ****para protegerte del spam.
Si necesitas saber más extensiones puedes verlas en este artículo de Fernando Tellado.
