💡 Cómo configurar un formulario CF7 universal con un campo oculto

• Instale el plugin Dynamic Text Extension y actívelo en la sección Plugins
• Añada a su formulario una etiqueta oculta dinámica con el identificador id:HIDDENINPUT para transmitir el título del bloque
• Cree un popup en Popup Maker, inserte el shortcode del formulario y configure el disparador Click Open
• Conecte un script jQuery que capture el título del bloque y lo inserte en el campo oculto
• Añada [dynamichidden-120] a la plantilla de correo para que pueda ver desde qué bloque llegó el envío
• Pruebe el envío: popup de error con el formulario vacío y popup de éxito tras un envío correcto

Paso 1: plugin para el campo oculto, Dynamic Text Extension

El plugin básico Contact Form 7 no puede añadir campos ocultos de serie. Hasta hace poco, el plugin Contact Form 7 Modules se encargaba de esta tarea, pero no se actualiza desde 2017 y no se ha probado con versiones recientes de WordPress.

El sustituto actual es Contact Form 7 - Dynamic Text Extension (DTX). Este plugin recibe mantenimiento activo (última actualización en junio de 2026), funciona con WordPress 7.0 y hace mucho más que solo campos ocultos: valores dinámicos desde URLs, cookies, metacampos de entradas, datos del usuario actual y shortcodes personalizados.

Instale el plugin desde Plugins → Añadir nuevo plugin, busque «Dynamic Text Extension», pulse «Instalar ahora» y actívelo. Aparecerán dos nuevos botones en el desplegable del generador de etiquetas del editor de formularios de Contact Form 7: dynamic text y dynamic hidden.

Para nuestro caso necesitamos dynamic hidden. Cree un campo oculto con un identificador a través del cual el script jQuery pasará el título del bloque:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Si por alguna razón DTX no se ajusta a sus necesidades, aún puede usar el antiguo Contact Form 7 Modules: sigue funcionando para campos ocultos básicos, pero no se ha probado con versiones recientes de WordPress y no se actualiza desde 2017. El shortcode tendría este aspecto: [hidden hidden-120 id:HIDDENINPUT].

Paso 2: formulario y plantilla de correo

El formulario se construye con los campos estándar de CF7 más nuestro campo oculto. Esta es una plantilla funcional; cópiela en el editor de formularios:

1
[text* text-59 placeholder "Your Name*"]
2
[tel* tel-116 placeholder "Phone*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Send"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Los campos text-59, tel-116 y Email son obligatorios (asterisco después del tipo). reCAPTCHA protege contra el spam. El botón de envío y el campo oculto completan el formulario.

Ahora configure la plantilla de correo electrónico en la pestaña «Mail» del editor de formularios. El punto clave es añadir [dynamichidden-120] (o [hidden-120] para CF7 Modules) al cuerpo del correo para que pueda ver de qué bloque provino el envío:

Para: moc.niamodruoy@liame-ruoy

De: [Email]

Asunto: Consulta del sitio web, [dynamichidden-120]

Cuerpo del correo:

1
Selected product/service: [dynamichidden-120]
2
---
3
Name: [text-59]
4
Phone: [tel-116]
5
Email: [Email]
6
---
7
Message sent from page: [_url]

Asegúrese de marcar la casilla «Use HTML content type», de lo contrario el formato se romperá. Para una entrega confiable del correo, configure SMTP (mediante cualquier plugin SMTP: Post SMTP, WP Mail SMTP o la API de Google Gmail); sin esto, los correos de CF7 suelen terminar en spam.

Paso 3: crear un popup en Popup Maker

El antiguo plugin Popups - WordPress Popup fue cerrado en julio de 2022 debido a una vulnerabilidad y no está disponible para instalación. El reemplazo moderno es Popup Maker: más de 780.000 instalaciones activas, integración con CF7 lista para usar y decenas de disparadores y reglas de segmentación.

Instale Popup Maker desde Plugins → Añadir nuevo plugin, luego vaya a Popup Maker → Crear Popup. Asigne un nombre al popup e inserte el shortcode del formulario en el editor de contenido:

1
[contact-form-7 id="123" title="Universal Form"]

Encuentre el ID del formulario en la lista de formularios de CF7 (columna «Shortcode»). En la configuración del popup a la derecha, en el bloque Triggers, seleccione Click Open y especifique el selector CSS del botón que abrirá el popup (por ejemplo, .jet-button-order). Esto es análogo al «Manual Triggering» del antiguo plugin Popups.

Ahora encuentre el ID del popup que creó. Abra el popup en el editor y observe la URL del navegador: post.php?post=4197&action=edit; el número después de post= es el ID (4197 en este ejemplo). Lo necesitará para el script del siguiente paso.

Paso 4: script jQuery para capturar el título del bloque

El script resuelve la tarea principal: al hacer clic en un botón dentro de un bloque, captura el texto del título de ese bloque y lo inserta tanto en el título del popup como en el campo oculto del formulario. Vamos a desglosarlo.

Primero, asigne una clase CSS común a todos los bloques donde necesite encontrar el título (por ejemplo, ForContactForm7HiddenInput). En Elementor, esto se hace mediante «Avanzado → Clases CSS» para la sección contenedora.

El script en sí se conecta a través del archivo functions.php del tema hijo o mediante el plugin Code Snippets (más seguro, no se perderá cuando el tema se actualice):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Contenido del archivo cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Variable for storing the block title
4
    var blockTitle = '';
5
 
6
    // Capture the title text on button click
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Wait for popup to open via MutationObserver
16
    var popupId = '4197'; // Your popup ID from Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Insert the title into the popup
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Insert the title into the form's hidden field
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Start observing the popup
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

Qué está sucediendo aquí:

• Capturar el título: al hacer clic en el botón con la clase .jet-button-order, el script recorre el DOM hacia arriba hasta el bloque padre .ForContactForm7HiddenInput, encuentra el h3.elementor-heading-title dentro de él y almacena su texto en la variable blockTitle.
• Monitorear la ventana emergente: en lugar del obsoleto attrchange.js (cuyo CDN rawgit.com está fuera de servicio), el script utiliza el MutationObserver nativo, que observa los cambios de clase en el contenedor de Popup Maker. Cuando aparece la clase active (la ventana emergente está abierta), el script inserta el título guardado en el encabezado de la ventana emergente y en el campo oculto #HIDDENINPUT.
• Selectores: .jet-button-order es la clase del botón de Elementor JetElements; reemplácela con la clase de su botón. Popup Maker se renderiza con el ID #popmake-{ID}, por lo que el código usa #popmake-4197; reemplace 4197 con el ID de su ventana emergente.

Debajo del bloque jQuery hay un ejemplo visual de cómo se ve una página con múltiples bloques y botones «Order Now»:

Después de hacer clic en el botón del primer bloque, el script captura el texto «Roller Blinds», lo inserta en el título de la ventana emergente y en el campo oculto del formulario:

Lo mismo aplica para los cinco bloques: el título cambia dinámicamente mientras el formulario permanece igual.

Paso 5: ventanas emergentes para envío exitoso y error

Popup Maker le permite crear tantas ventanas emergentes como necesite. Para los mensajes de estado (éxito / error), cree dos ventanas emergentes más de forma similar al paso 3. No necesita vincularlas manualmente a disparadores; CF7 las controla mediante eventos de JavaScript.

La ventana emergente de error se muestra cuando el formulario falla la validación. Contenido:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Error icon" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    The form has errors. Check the messages under the input fields and try again.
6
</p>

La ventana emergente de éxito se muestra después de un envío exitoso. Contenido:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Successful submission icon" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Done! Your message has been sent successfully. We will contact you shortly.
6
</p>

Estos iconos SVG se usaban en la antigua ventana emergente para indicar el estado del envío. Puede reemplazarlos por los suyos o dejarlos como están; son neutros y no están vinculados a ningún plugin específico.

Conecte las ventanas emergentes de estado mediante eventos de CF7. Agregue este código al mismo archivo JS cf7-universal-form.js después del script principal:

1
// Show popup on CF7 validation error
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Show popup on successful submission
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Reemplace 1065 y 1068 con los IDs reales de sus ventanas emergentes de estado de Popup Maker.

Los estilos CSS básicos para las ventanas emergentes de estado se conectan mediante Apariencia → Personalizar → CSS adicional o en el archivo del tema:

1
/* Error popup */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Success popup */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Paso 6: pruebas y depuración

Antes de publicar en un sitio en producción, verifique cada escenario:

• Clic en diferentes bloques: el título en la ventana emergente y el campo oculto cambia correctamente para cada bloque.
• Formulario vacío: enviar sin completar los campos obligatorios muestra el mensaje de error emergente.
• Envío completo: el correo llega y el campo oculto contiene el título correcto del bloque.
• Reapertura: después de cerrar y reabrir la ventana emergente, el título se actualiza.

Si el título no se inserta, verifique en la consola del navegador (F12 → Consola) que:

• El selector jQuery .ForContactForm7HiddenInput h3.elementor-heading-title encuentra un elemento en la página;
• La variable popupId coincide con el ID real de la ventana emergente en el administrador;
• La clase del botón (.jet-button-order) coincide con la clase real en la página.

Los selectores en el código están vinculados a Elementor + JetElements. Si usa otro constructor (Gutenberg, Bricks, Oxygen), sustituya sus propias clases y estructura de título. El principio sigue siendo el mismo: botón → bloque padre → título → campo oculto.

Vea este video para una demostración visual de cómo configurar un formulario emergente con Contact Form 7:

⁉️🤔 Preguntas frecuentes

¿Puedo prescindir de un plugin adicional para el campo oculto?

CF7 básico no admite campos ocultos. DTX es una solución mínima y con mantenimiento activo. En teoría, podría añadir <input type="hidden"> directamente al DOM del formulario mediante JavaScript, pero esto es menos fiable: el script podría no ejecutarse antes del envío y el valor no aparecerá en el correo si no está vinculado a una etiqueta específica de CF7. Use DTX o el antiguo Contact Form 7 Modules; ambos añaden soporte para campos ocultos a nivel de etiqueta y el valor tiene garantizado aparecer en el correo.

¿Por qué Popup Maker es mejor que el antiguo plugin Popups?

Popup Maker se actualiza activamente (última versión abril de 2026), tiene integración nativa con CF7 y otros formularios, y admite docenas de disparadores y reglas de segmentación. El antiguo Popups fue cerrado oficialmente por WordPress.org en julio de 2022 debido a una vulnerabilidad no parcheada y no debe usarse en sitios activos. Popup Maker es su sucesor directo y seguro, con más de 780 000 instalaciones activas. Ventaja clave: integración nativa con CF7 (los eventos wpcf7mailsent / wpcf7invalid funcionan sin código adicional) y un editor visual de ventanas emergentes.

¿Por qué usar MutationObserver en lugar de attrchange.js?

La librería attrchange.js se distribuía a través de rawgit.com, que cerró en 2020. El repositorio de GitHub en sí sigue activo, pero conectar el script desde allí es inconveniente. MutationObserver es una API nativa del navegador, compatible con todos los navegadores modernos desde 2014, no requiere dependencias externas y resuelve la misma tarea: rastrear cambios de atributos en el DOM. Menos peticiones HTTP, sin necesidad de actualizar dependencias.

¿Qué debo hacer si el título en el campo oculto aparece como caracteres cirílicos ilegibles en el correo?

Verifique la codificación en los ajustes de CF7 y del plugin SMTP; debe ser UTF-8. Asegúrese de que el asunto del correo no contenga caracteres corruptos. Si usa SMTP a través de la API de Gmail, el problema podría estar en la codificación del encabezado del correo; revise los ajustes del plugin Post SMTP o WP Mail SMTP. Normalmente, el origen del problema es el servidor de correo, no el script. Verifique: (1) wp-config.php, la línea define('DB_CHARSET', 'utf8'); sin espacios extra antes de <?php; (2) ajustes del plugin SMTP, codificación de correo UTF-8; (3) asunto del correo en CF7, elimine caracteres no estándar, deje solo [dynamichidden-120] sin corchetes ni comillas adicionales.

¿Puedo usar este enfoque para múltiples formularios diferentes en un mismo sitio?

Sí. Cree un formulario separado en CF7 para cada tipo de bloque y una ventana emergente separada en Popup Maker. En el script, duplique la lógica para cada par «selector de bloque → ID de ventana emergente → ID de campo oculto». Alternativamente, use una ventana emergente y un formulario con diferentes clases de bloque; el campo oculto recibirá el título del bloque en el que se hizo clic, sin configuración adicional.

Un formulario universal para todos los bloques de la página es la idea principal de esta solución. Para tipos de bloque completamente diferentes (productos vs servicios), cree dos conjuntos: formulario_producto + ventana_producto y formulario_servicio + ventana_servicio. En el script, simplemente duplique el bloque de código con selectores diferentes.

Qué stack de plugins usar en 2026

Un formulario universal con campo oculto es una solución probada para páginas de aterrizaje con docenas de bloques similares. En lugar de 30 formularios separados, configura uno y el script inserta automáticamente el título del bloque. Este es el stack que recomendamos en 2026:

• Contact Form 7: más de 10 millones de instalaciones, ligero, gratuito.
• Dynamic Text Extension (DTX): campos ocultos y dinámicos, soporte activo.
• Popup Maker: ventanas emergentes con disparadores de clic e integración nativa con CF7.
• MutationObserver (JS nativo): seguimiento de la apertura de ventanas emergentes sin librerías externas.

Si necesita capturar el título de un bloque y pasarlo a un formulario, use este stack. En la práctica, funciona sin problemas y la configuración toma alrededor de una hora incluso con conocimientos básicos de WordPress.

🔗 Dynamic Text Extension en WordPress.org | 🔗 Popup Maker en WordPress.org