Si, como millones de usuarios de WordPress, tu plugin de formularios de contacto es Contact Form 7, seguramente habrás observado que de lo único que peca es de que en según qué situaciones puede ralentizar la carga de tu web, así que vamos a ponerle solución.
Índice de contenidos
Cargar selectivamente Contact Form 7
El principal problema, en cuanto a la carga se refiere, que tiene el plugin Contact Form 7 y la mayoría de plugins, es que carga todos sus estilos y scripts globalmente en tu web, da igual si hay un formulario o no en cada página.
Esto, que es comprensible, pues el desarrollador no sabe dónde vas a poner un formulario, supone un lastre en la carga de páginas y entradas que no mostrarán formulario alguno pero que, sin embargo, si que se cargará en ellas todo el CSS y JavaScript del plugin.
Imagina, pues, una web con 20 páginas y 500 entradas en la que solo una de las páginas tiene formulario. Lo que obtendrás es que los estilos y scripts de Contact Form 7 se cargarán en todas ellas, da igual si tienen formulario o no.
La solución pasa por registrar estilos y scripts solo en las páginas o entradas en las que hay formulario.
No registrar estilos CSS de Contact Form 7
Para no registrar (deregister) los estilos de Contact Form 7 en cualquier página o entrada que no sea en la que sí hay un formulario solo tenemos que saber el slug de la página con formulario, y anularlos en el resto, así:
// Deregister estilos CSS de Contact Form 7 en las páginas sin formulario
add_action( 'wp_print_styles', 'ayudawp_deregister_styles', 100 );
function ayudawp_deregister_styles() {
if ( ! is_page( 'contacto' ) ) {
wp_deregister_style( 'contact-form-7' );
}
}Este código hay que ponerlo en tu plugin de personalizaciones o al final del archivo functions.php del tema activo (mejor si es el tema hijo).
Lo que hace el código es comprobar si la página no es la que tiene el slug contacto, en cuyo caso des-registra los estilos de Contact Form 7 mediante la función de WordPress wp_deregister_style.
No registrar el JavaScript de Contact Form 7
Para des-registrar el JavaScript en las páginas que no tengan formulario haremos casi lo mismo, pero en esta ocasión con la función wp_deregister_script. Siguiendo el ejemplo anterior sería así:
// Deregister JavaScrip de Contact Form 7 en las páginas sin formulario
add_action( 'wp_print_scripts', 'ayudawp_deregister_javascript', 100 );
function ayudawp_deregister_javascript() {
if ( ! is_page( 'contacto' ) ) {
wp_deregister_script( 'contact-form-7' );
}
}Por supuesto, acuérdate de guardar cambios en tu plugin de personalizaciones o archivo functions.php, el que hayas elegido para añadir estas funciones.
¿Y si tengo formularios en varias páginas?
Buena pregunta. No hay problema, entonces adaptaremos el código para incluir los slugs de todas las páginas que tengan formulario.
Lo único es modificar la línea que busca la condición is_page, y que modificarla indicando el array de slugs en vez de uno único. Por ejemplo:
if ( ! is_page( array( 'nosotros', 'contacto' ) )) {Cómo localizar los slugs de tus páginas con formularios
Si no sabes dónde localizar los slugs de tus páginas solo tienes que ir a la ventana de administración de entradas o páginas y hacer clic en cualquiera de ellas en Edición rápida y copiar de ahí el slug.
Carga selectiva de Contact Form 7 localizando el shortcode
Como ya sabrás, el plugin Contact Form 7 mostrará tus formularios donde encuentre un shortcode que contenga contact-form-7, así que otro modo mediante el que podemos cargar estilos y scripts es localizando en tus contenidos esta cadena y des-registrando estilos y scripts en el resto.
Solo tendríamos que crear una función así:
/** 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 );Lo que hace el código anterior es anular las acciones por las que Contact Form 7 carga estilos y scripts allí donde no esté el shortcode del plugin.
No cargar nada de CSS ni JavaScript de Contact Form 7
Si, por cualquier motivo, en algún momento quieres anular completamente la carga de los estilos y scripts de Contact Form 7 puedes definir unas nuevas constantes en tu archivo wp-config.php, estas:
define ('WPCF7_LOAD_JS', false); // false Desactiva carga de JS
define ('WPCF7_LOAD_CSS', false); // false Desactiva carga de CSSEsto puede ser interesante en entornos de desarrollo, por ejemplo.
¿Se puede hacer con plugins?
Te diré que sí, pero el asunto es que el único disponible para esto básicamente lo que te pide es el condicional sobre el que no se aplicará, que tienes que conocer y aplicar, así que viene a ser lo mismo que hacíamos con los primeros códigos.
Si te apetece probarlo, se llama Script Logic.
El problema con el refill de Contact Form 7
Hace unos meses surgió un problema de optimización por el cual los habituales medidores de velocidad web como GTMetrix mostraban importantes retardos de carga de página a causa de la siguiente cadena:
/wp-json/contact-form-7/v1/contact-forms/13891/refill
El problema ocurría donde tuvieses cargada caché de página con algún plugin, por lo que el contenido activo como el reCAPTCHA integrado de Contact Form 7 necesita actualizarse en cada carga de página, generando una llamada al famoso refill.
Si aún tienes este problema puedes solucionarlo de dos maneras:
Actualiza
Desde la versión 7.4.9.2, de diciembre de 2017, este problema se ha solucionado, así que actualiza.
Anula manualmente la caché de página del plugin
Aunque ya sabes que nunca recomiendo modificar archivos propios de plugins, temas o WordPress, si por otro motivo no puedes actualizar, y no usas ningún tipo de CAPTCHA, localiza el archivo includes/controller.php y anula (comenta) o borra estas líneas:
if ( defined( 'WP_CACHE' ) && WP_CACHE ) {
$wpcf7['cached'] = 1;
}¿Y por qué mejor no cambio de plugin?
Tú mismo, pero Contact Form 7 es el plugin con un desarrollo más continuado, que más se actualiza para ir mejorando, y con un ecosistema más amplio, debido a los cientos de extensiones que lo mejoran.
Lo único es que si te provoca algún problema de retardo de carga de páginas ya sabes cómo solucionarlo.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Echaba de menos este tipo de contenidos en «ayudadivi» 🙂
Cada día los tienes, o eso intento, de hecho escribo sobre Divi como mucho solo 1 día a la semana.
Gracias
Hola Fernando,
Veo que ya le han dado solución y te agradezco enormemente este tutorial.
Aunque para mí ya es tarde por otros motivos aparte del rendimiento, CF7 es un magnífico plugin.
Un saludo.
Tenía pensado escribir este artículo hace tiempo pero tu tuit del otro día me lo recordó 😀
Un gran tip para un gran plugin, aunque en realidad no solo aplica a Contact Form 7 ya que este mismo truco puede aplicarse a otros plugins conociendo el nombre que utilice su script.
Saludos!!
Por supuesto, como dices solo hay que saber el nombre del script. También vale para WooCommerce, tuneándolo un poco
Hola, me gustaría saber si existe algún plugin para CF7 para añadir la condición de:
Si el asunto es A enviar email a [email protected]
Si el asunto es B enviar email a [email protected]
Espero haberme explicado 🙂
Muy buen post. ¿Sería posible que publicarais un articulo para agaptar la nueva GDPR a Contact Form 7?
Buenos días Sr Fernando, en una mejora WOP que efectúe a varias paginas, implemente el script en mi function.php pero la única desventaja era que tenia que describir la pagina que quería mostrar y si eran varias era incomodo, por lo que le anexo una nueva versión con la detección automática de las paginas que contienen los formularios de envío y las que debe desconectar, para que lo modifique y publique como usted crea necesario para bien de la comunidad, saludos.
if (!is_admin() && WPCF7_LOAD_JS) {
if (!function_exists(‘jclconsultor_wpcf7_scripts’)){
function jclconsultor__wpcf7_scripts($content) {
$pos=strpos($content,’class=»wpcf7″‘);
if ($pos===false){
if (WPCF7_LOAD_JS){
wp_deregister_script(‘contact-form-7’);
wp_deregister_style(‘contact-form-7’);
}
}
return $content;
}
add_filter(‘the_content’,’jclconsultor_wpcf7_scripts’,99999);
}
}
Muchas gracias 🙂
Hola, te queria consultar si es posible incluir en el mail que recibo con los datos del formulario de mi página, los datos de la página desde donde ha sido enviado la consulta?
Por ejemplo, el modelo, nombre, color, detalles del artículo que estaba viendo cuando envió la consulta.
hola fernando excelente articulo una consulta que no logro resolver, como hago para que el formulario una vez que se completa y se envía, vuelva a estar los campos vacíos ya sea que se recargue la pagina o los vacíe automáticamente
Tendrías que vaciar las cookies
if ( ! is_page( array( ‘nosotros’, ‘contacto’ ) ) {
creo que falta un ) antes del { verdad??
Sí, falta un cierre, gracias por avisar 😉
Buenas tardes,
Tengo un problemón que jamás antes me había pasado. De repente han dejado de funcionar los formularios de contacto, y digo formularios porque aunque ahora de nuevo tengo Contact Form 7, he probado con otros tres más, pensando que podría ser el plugin, pero no. En rodos ocurre lo mismo, el botón enviar se queda pensando. Ni da error, ni dice nada….
Tengo confifurado SMPT y eso está bien, porque llegan los correos de prueba perfectamente, pero desde los formularios no. Nunca en años me había pasado algo parecido.
He probado a instalar y desinstalar el plugin, he probado desactivar el resto de plugins y ver si hay alguno en conflicto y tampoco, he hablado con el hosting y no ven ningún problema…
Esto desesperada, llevo días con esto y no veo la solución.
A ver si algún alma caritativa sabe lo que puede ser, os lo agradecería no sabéis cuanto.
Ideal!
Acabe con este codigo:
add_action( 'wp_enqueue_scripts', 'indigo_deregister_cf7', 99 );
function indigo_deregister_cf7() {
$post_types = array( 'sfwd-lessons', 'sfwd-quiz', 'sfwd-question', 'sfwd-certificates' );
$pages = array( 'contacto' );
if ( ! in_array( get_post_type(), $post_types ) && ! is_page( $pages ) ) {
wp_deregister_style( 'contact-form-7' );
wp_deregister_script( 'contact-form-7' );
}
}