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

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

Share on facebook
Share on google
Share on twitter
Share on linkedin

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 ool_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', 'ool_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)

 

Share on facebook
Share on google
Share on twitter
Share on linkedin

2 comentarios en “Función de mostrar y ocultar campos en formulario de Elementor”

    • 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!

Deja un comentario