El editor visual Elementor, en su versión , 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:
- Creamos un campo tipo texto «Nombre agente comercial».
- 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.
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
Buenos días
Estoy intentando realizar el formulario tal como indicas con Elementor. He modificado archivo functions.php. Pero no sé como se crea el botón (paso·3) ¿Podrías darme más info?
Este es el formulario: https://pcordobaseguros.com/calculadora-de-salud
Intento ocultar (Quieres añadir más asegurados? con la función que indicas para que no quede tan largo
Gracias¡¡
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!
Me gustaría poder ocultar mas de un campo pero no me esta funcionando me gustaría saber como editar el código para que se oculten 4 fields mas
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,