Función de mostrar y ocultar campos en formulario de Elementor

Tabla de contenidos

El editor visual Elementor, en su versión Elementor Pro, trae un módulo para la creación de formularios de contacto. Incluye casi todas las opciones más frecuentes: tipos de campo, validaciones, integración de sistemas como Mailchimp, ActiveCampaign, etc. Sin embargo, en ocasiones podemos necesitar pequeñas funciones no incluidas.

Aquí te explicamos cómo ocultar/mostrar un grupo de campos.

Paso 1: Crear el formulario

Creamos un formulario con el elemento Form. El cual nos permite crear diferentes tipos de campos: texto, email, número, etc. Por ejemplo:

  1. Creamos un campo tipo texto «Nombre agente comercial».
  2. Le asignamos un ID propio en la pestaña Avanzado.

También podemos hacerlo con un campo HTML (para mostrar ocultar una nota, etc.). En este caso, hay una pequeña variante. Puesto que este tipo de campo no deja asignar ID, lo haríamos así:

Paso 2: Añadimos la función que muestra y oculta un conjunto de campos

En el archivo functions.php de nuestro tema, añadimos la función:

function modify_jquery() {
 if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js', false, '1.8.1');
 wp_enqueue_script('jquery');
 }
}
add_action('init', 'modify_jquery');

function tk_script_muestra_oculta(){
 echo '<script type="text/javascript"> 
 $(".boton_mostrar").parent().parent().next().hide().next().hide().next().hide();
 $("#form-field-field_nompre").hide();
 
 function muestra_oculta(){
 $(".boton_mostrar").parent().parent().next().toggle().next().toggle().next().toggle();
 $("#form-field-field_nompre").toggle();
 }
 </script>';
}

add_action( 'wp_footer', 'tk_script_muestra_oculta' );

Paso 3: Creamos el botón o enlace que muestre y oculte los campos

Creamos un botón con referencia a la función:

<a style='cursor: pointer;' onClick="muestra_oculta()" title="" class="boton_mostrar">
Datos opcionales
</a>

Resultado

El resultado es un formulario de contacto, con una serie de campos ocultos y un link para mostrarlos.

Campo formulario Elementor 3

El link: Datos opcionales, que al pulsarlo muestra/oculta el texto y campo siguientes:

  • Datos agente comercial (Etiqueta HTML)
  • Nombre agente (Campo tipo texto)

4 comentarios

    1. Hola Emilio,

      En el ejemplo, lo que realmente hicimos fue incluir un link (en lugar de botón) con el texto «Datos opcionales».

      Lo que hicimos fue insertar un campo tipo HTML en el form de Elementor, justo antes del campo a ocultar, con el código que aparece en el Punto 3 del post.

      Asegúrate también de que has modificado el ID del campo que quieres ocultar. En la función del ejemplo, el ID del campo era field_nompre (pero en la función va como form-field-field_nompre). En tu caso, por lo que he visto, creo que sería form-field-field_7 lo que tienes que tener en la función.

      ¡Espero que te funcione!

    1. Hola Daniel,

      La función de ejemplo es para un campo. Para varios, simplemente duplica las lineas en las que aparece el nombre del campo en la función (#form-field-field_nompre) y cambia el nombre del éste. Recuerda que los nombres de los campos tiene que coincidir con el Custom ID que le hayas asignado en el formulario.

      Un saludo,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Abrir el chat
1
¿Necesitas ayuda?
Alimento Web
Hola,
¿Podemos ayudarte?