Un usuario abre un formulario, ve un botón «Enviar», hace clic y recibe errores de validación. La ventana resalta campos en rojo: «Obligatorio». ¿Le suena familiar?

Contact Form 7, el plugin de formularios más popular para WordPress, tiene más de 5 millones de instalaciones activas. Pero tal como viene, siempre muestra el botón de envío, incluso con los campos vacíos. Para el usuario, esto significa un clic extra y frustración. Para el dueño del sitio, implica perder contactos: un tercio de los visitantes que se topan con un error en un formulario simplemente se van y no vuelven.

Usted puede solucionarlo con tres líneas de jQuery. O puede hacerlo sin ningún script, usando solo CSS. En este análisis obtendrá ambos enfoques, más un plugin listo para usar para quienes no quieran tocar código.

💡 Resumen rápido:

• Seguimiento con jQuery: oculta el botón y lo muestra solo cuando la longitud del texto en todos los campos alcanza sus límites
• CSS puro: un truco con :valid, :has() y el atributo required, sin una sola línea de JavaScript
• Plugin Conditional Fields para Contact Form 7: un constructor visual de condiciones para lógica compleja sin código

Por qué ocultar el botón de envío

Un usuario no debería tener que adivinar qué salió mal. Cuando un botón está visible y se puede hacer clic pero el formulario no está listo, se genera disonancia cognitiva. La persona hace clic, recibe un error, busca los campos resaltados, los corrige, vuelve a hacer clic. Cada ciclo así reduce la conversión.

Un botón oculto hasta que todo esté listo resuelve tres problemas:

• Elimina los intentos de envío falsos. No hay botón, no hay clic prematuro.
• Proporciona retroalimentación visual. La aparición del botón = una señal de que el formulario está listo para enviarse.
• Reduce la fricción. El usuario completa los campos, aparece el botón, un clic, listo.

Contact Form 7 no tiene un mecanismo integrado para este comportamiento. Pero añadirlo lleva 10 minutos de trabajo.

Método 1: seguimiento de entrada con jQuery

El enfoque más flexible. Usted establece sus propias reglas: cuántos caracteres debe contener cada campo antes de que aparezca el botón. Funciona con cualquier tipo de campo (texto, correo electrónico, área de texto, teléfono).

Cuerpo del formulario en Contact Form 7

Como ejemplo, tomemos un formulario de contacto estándar con tres campos, Google reCAPTCHA y un botón de envío. Este es su marcado en el editor de CF7:

1
[text text-776 id:bim-name class:bim-name placeholder "Name"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4
 
5
<style>
6
.g-recaptcha > div {
7
    width: 100% !important;
8
}
9
.g-recaptcha iframe {
10
    width: 100% !important;
11
}
12
div#GoogleReCapchaFullWidth {
13
    width: 100% !important;
14
    padding-bottom: 6px;
15
}
16
</style>
17
 
18
[recaptcha id:GoogleReCapchaFullWidth]
19
 
20
[submit id:bim-button class:bim-button "Submit"]

El bloque CSS dentro del formulario es una solución para estirar reCAPTCHA al ancho completo del contenedor; resulta útil si el formulario está en una columna estrecha.

Script jQuery

Copie este código en el archivo custom.js de su tema o en el campo «Scripts adicionales» del plugin Code Snippets:

1
jQuery(document).ready(function ($) {
2
 
3
    // Initially the button is hidden
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Listen for input on all three fields
7
    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8
        var nameVal = $('#bim-name').val().trim();
9
        var emailVal = $('#bim-email').val().trim();
10
        var messageVal = $('#bim-message').val().trim();
11
 
12
        // Conditions: name > 4 characters, email > 6, message > 20
13
        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14
            $('#bim-button').fadeIn(200);
15
        } else {
16
            $('#bim-button').fadeOut(200);
17
        }
18
    });
19
 
20
});

Qué sucede aquí:

• Línea 4: el botón se oculta inmediatamente al cargar la página (display: none).
• Línea 7: el método .on('input', ...) escucha cualquier cambio de texto en los tres campos (el usuario teclea, pega desde el portapapeles, borra caracteres). Antes se usaba .keyup(), pero input es más fiable: también se dispara al pegar con el ratón.
• Líneas 8-10: leemos los valores actuales y eliminamos los espacios en blanco de los extremos con .trim().
• Línea 13: comprobación de la condición. Puede cambiar los números según sus necesidades: por ejemplo, > 1 puede bastar para un campo de nombre, > 10 para un mensaje.
• Líneas 14 y 16: fadeIn y fadeOut proporcionan una aparición y desaparición suave del botón en 200 milisegundos. Se ve más limpio que un abrupto show()/hide().

Físicamente, el elemento del botón siempre está en el árbol DOM de la página; la visibilidad se controla mediante la propiedad CSS display. Esto es seguro: incluso si el script no se carga (por un problema de red o un bloqueador de anuncios), el botón simplemente permanece visible y el usuario no pierde la capacidad de enviar el formulario.

Cómo adaptarlo a su formulario

Cambie tres cosas:

• IDs de campo: en el marcado de CF7, sustituya bim-name, bim-email y bim-message por sus propios identificadores.
• Límites de caracteres: en la condición if introduzca los números que necesite. Para un campo de teléfono puede comprobar .replace(/\D/g, '').length > 9 (solo dígitos, al menos 10).
• Lista de campos: si tiene 5 campos, añádalos al selector $('#id1, #id2, ...') y a la condición if.

Para tipos de campo [checkbox], [select] o [radio], la longitud del texto no funciona; compruebe la selección en sí:

1
var agreeChecked = $('#bim-agree').is(':checked');

Método 2: CSS puro sin scripts

Para formularios simples con uno o dos campos puede prescindir completamente de JavaScript. La idea es que los navegadores modernos pueden verificar la validez del campo mediante la pseudoclase :valid, y el combinador CSS :has() (compatible con todos los navegadores desde 2023) le permite mirar «dentro» de un elemento padre.

Funciona así:

1
form.wpcf7-form .wpcf7-submit {
2
    display: none;
3
}
4
 
5
form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6
    display: none;
7
}
8
 
9
form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10
    display: block;
11
}

Pero hay un matiz: CF7 no añade el atributo required a los campos automáticamente. Debe añadirlo manualmente en el marcado del formulario; un asterisco * junto al nombre del campo en el editor de CF7 es suficiente:

1
[text* text-776 id:bim-name placeholder "Name"]
2
[email* email-498 id:bim-email placeholder "Email"]

El asterisco después del tipo de campo (text*, email*) activa el estado obligatorio. El propio CF7 insertará el atributo HTML required en la etiqueta <input>, y el selector CSS funcionará.

La ventaja del método CSS: cero scripts, no se rompe por conflictos de jQuery y funciona incluso con JavaScript desactivado. La desventaja: la lógica es más simple («todos los campos obligatorios están completos» frente a «el campo de nombre tiene más de 4 caracteres»). Para la mayoría de formularios de contacto, esto es suficiente.

Método 3: plugin Conditional Fields for Contact Form 7

Cuando la lógica se vuelve más compleja (por ejemplo, mostrar el botón solo si se elige un elemento específico en [select] y el correo electrónico está completo), el código jQuery crece. Aquí es donde el plugin gratuito Conditional Fields for Contact Form 7 viene al rescate (más de 100 000 instalaciones activas, valoración de 5 estrellas).

El plugin añade un editor visual de condiciones directamente dentro de la interfaz de CF7. Usted establece reglas en un par de clics:

• «Mostrar el botón si el campo 'Nombre' no está vacío Y el campo 'Email' no está vacío Y el campo 'Mensaje' contiene más de 20 caracteres».
• O: «Mostrar el campo 'Dirección de entrega' si se selecciona el botón de radio 'Entrega por mensajería'».

No se requiere código. Las condiciones pueden aplicarse a cualquier campo o grupo de campos, incluido el propio botón de envío. El plugin recibe mantenimiento activo y se actualiza regularmente; a junio de 2026 es compatible con la versión actual de WordPress.

Qué solución elegir

Tres enfoques cubren tres escenarios diferentes:

• CSS puro: ideal para una página de aterrizaje con un formulario simple de 2 o 3 campos. Mínimas partes móviles, nada que pueda romperse.
• Script jQuery: su elección cuando necesita límites precisos («nombre de más de 4 caracteres, mensaje de más de 20»). Control total sobre las condiciones.
• Conditional Fields: utilícelo cuando la lógica se ramifica (diferentes conjuntos de campos para distintas opciones, condiciones anidadas, mostrar/ocultar secciones enteras del formulario). El constructor visual ahorra horas de depuración.

Para la mayoría de los sitios WordPress, la combinación de «jQuery + sentido común» es suficiente. El script anterior (20 líneas) se inserta una vez y funciona durante años sin actualizaciones.

Vídeo: configuración paso a paso

Este tutorial de 8 minutos recorre todo el proceso, desde la creación de un formulario en CF7 hasta un script terminado para ocultar el botón que comprueba si todos los campos están completos:

⁉️🤔 Preguntas frecuentes

¿Funciona el script con plugins de caché?

Sí, siempre que se use el envoltorio adecuado jQuery(document).ready(...). Si el sitio emplea minificación agresiva (Autoptimize, WP Rocket con combinación de scripts), excluya el archivo del script de la combinación o use el plugin Code Snippets: este inserta el código en el pie de página como un bloque separado que los minificadores no tocan.

¿Qué pasa si un usuario tiene JavaScript desactivado?

Con JavaScript desactivado, el botón permanece visible; el script simplemente no lo oculta. Esto es degradación controlada: CF7 realizará la validación del lado del servidor y mostrará los errores de la forma estándar. Para el método CSS que usa :has(), la situación es la misma: sin validación JS, CF7 igualmente comprueba los campos en el servidor al enviar.

¿Puedo ocultar el botón para un formulario específico si hay varios en la página?

La forma más sencilla es dar al botón un id único en el editor de CF7 y luego usar ese ID como selector en el script. Si hay múltiples formularios, duplique el bloque de código para cada botón con su propio ID, o encuentre dinámicamente el botón dentro del formulario actual mediante $(this).closest('form').find('.wpcf7-submit').

¿Por qué no usar simplemente required en los campos y confiar en la validación del navegador?

Porque required no oculta el botón; solo bloquea el envío del formulario y muestra una información sobre herramientas nativa del navegador. Nuestro objetivo es eliminar la posibilidad misma de un clic erróneo. Además, la validación estándar del navegador no comprueba la longitud del texto, solo el hecho de que se haya rellenado, y para un mensaje de 2 caracteres esto es una protección débil.

¿Sigue siendo necesario validar los campos en el servidor?

Sí, absolutamente. La lógica del lado del cliente para ocultar el botón no sustituye la validación del lado del servidor de CF7. Configure siempre los campos obligatorios en el editor de formularios (el * en el marcado) y verifique que los correos electrónicos se entreguen. Dos capas de protección: frontend para la comodidad, backend para la seguridad.

Botón oculto, contactos limpios: qué usar en su sitio

El enfoque de ocultar el botón de envío es una de esas micro-mejoras invisibles al ojo pero perceptibles al tacto. Un usuario no dirá «genial, el botón apareció en el momento justo». Pero completará el formulario y no se irá tras el primer clic al vacío.

Para un formulario de contacto simple, use el método CSS con :has(): 5 líneas de código, cero dependencias. Para límites de longitud personalizados en los campos, use el script jQuery del método 1 (copie y pegue en Code Snippets). Para formularios complejos con lógica ramificada, use Conditional Fields.

Pruébelo ahora mismo: abra el editor de su formulario de contacto en CF7, añada id: a los campos y al botón, pegue el script y compruebe cómo el botón aparece solo cuando todos los campos están completos de forma significativa, no a tontas y a locas.