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:

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

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

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

Deja un comentario