Cómo personalizar formularios de contacto con Contact Form 7

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.

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.

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:

1. [_date] → Fecha del envío
2. [_time] → Hora
3. [_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.
4. [_remote_ip] → IP del ordenador desde el que se envían los datos.
5. [_user_agent] → Navegador utilizado por el usuario.
6. [_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:

1. [_post_id] → Id del producto.
2. [_post_name] → Nombre del producto.
3. [_post_title] → Título del producto.
4. [_post_url] → URL del producto.
5. [_post_author] → Autor del artículo.
6. [_post_author_email] → Email del autor del artículo.

Aquí podéis ver más shortcodes.

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.