Configurar Contact Form 7 en WordPress para SEO

Contact Form 7 es el plugin para formularios gratuito más famoso y utilizado en WordPress, aunque su uso conlleva un leve problema de lentitud. Si tienes instalado Contact Form 7 en tu página web WordPress, habrás notado que este plugin ralentiza todas las páginas aunque no contengan un formulario. Aquí te enseñamos a hacer que cargue en las páginas en las que lo necesitamos para que nuestra web esté correctamente optimizada para SEO.

¿Cuánto ralentiza Contact Form 7?

CF7 carga por defecto en todas las páginas de nuestra web, así que es posible que hayas analizado tu página con Google Page Speed antes de instalar este plugin y obtengas una puntuación de 92 puntos y que una vez activas el plugin repitas el test y pases a tener una puntuación de 70 puntos de velocidad. Como ves, CF7 ralentiza todas nuestras páginas aunque no contengan un formulario, haciendo que bajemos hasta 20 puntos de velocidad en el test de Google. Por eso, es necesario optimizarlo.

Optimizar Contact Form 7

El primer paso para desactivar la carga de CF7 de toda nuestra web es anular la carga de CSS y JavaScript. Esto podremos hacerlo accediendo al archivo wp-config.php desde el administrador de archivos del hosting en el que tenemos alojada nuestra web y pegando el siguiente código:

//* Desactivar carga de CF7 */
define( ‘WPCF7_LOAD_JS’, false );
define( ‘WPCF7_LOAD_CSS’, false );

El segundo y último paso es hacer que el plugin CF7 solo cargue los estilos y scripts en las páginas en las que tengamos un formulario activo. Para esto hay que acceder al archivo functions.php de nuestro tema activo desde el propio WordPress o desde el administrador de archivos del hosting, si WordPress no nos lo permite. En el administrador de archivos lo encontrarás dentro de la carpeta …/wp-content/themes/nombredetutema.

//* Optimizar CF7 */
function ayudawp_dequeue_scripts() {

    $load_scripts = false;

    if( is_singular() ) {
    	$post = get_post();

    	if( has_shortcode($post->post_content, 'contact-form-7') ) {
        	$load_scripts = true;
    	}
    }
    if( ! $load_scripts ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'ayudawp_dequeue_scripts', 99 );

Personaliza los formularios de Contact Form con CSS muy fácilmente

Personalizar nuestros formularios de CF7 parece un poco engorroso pero es muy sencillo. Tenemos que hacerlo desde WordPress modificando nuestra hoja de estilos CSS. Simplemente tendremos que ir a la opción de Personalizar de nuestro tema y una de las últimas opciones que nos aparecerá se llamará CSS, en mi tema se llama CSS adicional, donde al pulsarle se nos abrirá un pequeño editor de texto en el que podremos añadir todas las líneas de CSS que queramos para personalizar cualquier elemento de nuestra web.

Personalizar la caja que contendrá nuestro formulario:

/* Color CF7 */
.wpcf7 {
	background-color: #F7FAFC; /* Color de fondo del formulario */
	color: #000000; /* Color del texto. Lo más normal es que sea negro (#000000) */
 	padding: 2em 5em 2em 5em; /* Para establecer la anchura y altura de la caja de formulario */
	border: 2px solid #0f0; /* Establecer un borde en la caja del formulario. Si no se desea se puede eliminar esta linea */
}

Personalizar el color de fondo y texto de los campos del formulario:

/* Color cajas de formulario CF7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #ffffff; /* Color de fondo de las cajas de texto formulario */
    color: #000000; /* Color del texto. Lo más normal es que sea negro (#000000) */
}

Personalizar color de los mensajes de confirmación y error cuando alguien envía un formulario:

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2; /* Blue */
}
 
.wpcf7 form.init .wpcf7-response-output {
    display: none;
}
 
/* Mensaje enviado */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Color del borde */
	background-color: #F7FAFC; /* Color del fondo. Borrar línea si no lo necesitas */
}

/* Error al enviar mensaje */ 
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Color del borde */
	background-color: #F7FAFC; /* Color del fondo. Borrar línea si no lo necesitas */
}

/* Mensaje de SPAM */ 
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Color del borde */
	background-color: #F7FAFC; /* Color del fondo. Borrar línea si no lo necesitas */
}

/* Mensaje inválido */ 
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #ffb900; /* Color del borde */
	background-color: #F7FAFC; /* Color del fondo. Borrar línea si no lo necesitas */
}

Como ves, este es un truco muy sencillo con el que podemos optimizar CF7 y mejorar la velocidad y posicionamiento (SEO) de nuestra página web.