Formulario por pasos con Elementor

En este artículo te explico cómo implementar un formulario por pasos con Elementor siguiendo unos pasos muy sencillos.

Foto del autor

Juanma Aranda

1 comentario

4 minutos de lectura
formulario-por-pasos-con-elementor

Colaboran con este sitio web:

Los formularios con demasiados campos son los más abandonados sin llegar a completarlos. En la mayoría de los casos, los usuarios se abruman antes de llegar al final. Es por eso que se utilizan formularios por pasos.

Cómo hacer un formulario en WordPress con Elementor

Crear un formulario en WordPress con Elementor es una tarea bastante sencilla y eficiente para recolectar información de tus visitantes. Comienza instalando y activando Elementor Pro, ya que la versión gratuita no incluye el widget de formularios. Una vez activado, abre la página o entrada donde deseas insertar el formulario y haz clic en el botón “Editar con Elementor”.

En el editor de Elementor, arrastra y suelta el widget de Formulario en la ubicación deseada de tu página. Al instante, verás un formulario básico que puedes comenzar a personalizar. Agrega los campos necesarios haciendo clic en el botón “+ Campo” y selecciona el tipo de campo que quieres añadir, como texto, email, teléfono, etc. Cada campo ofrece opciones de personalización como etiquetas, marcadores de posición y requerimientos.

Para mejorar la experiencia del usuario y evitar la sobrecarga de información, divide tu formulario en pasos utilizando la opción de “Paso” en los tipos de campos. Configura la etiqueta de cada paso y ajusta el orden arrastrando y soltando los campos en la estructura que prefieras. Recuerda que un diseño claro y ordenado facilitará la comprensión y la finalización del formulario por parte de los usuarios.

En la sección de Estilo, personaliza la apariencia de tu formulario para que coincida con la estética de tu sitio web. Modifica colores, tipografías, márgenes, rellenos y otros elementos visuales para que tu formulario no solo sea funcional sino también atractivo. No olvides configurar los estilos de los pasos, como la barra de progreso o el diseño de los iconos y números, para dar un indicativo visual claro del progreso del formulario.

Finalmente, ajusta la configuración de envío en la sección de “Acciones después del envío” para definir lo que sucederá una vez que el usuario complete el formulario. Puedes optar por enviar un email de confirmación, redirigir a una página de agradecimiento o integrar con servicios de marketing por correo electrónico. Con Elementor Pro, tienes control total sobre la interacción posterior, lo que te permite gestionar eficientemente las respuestas de tus formularios.

Crear un formulario por pasos con Elementor

El primer paso, obviamente, consiste en arrastrar el widget de formulario nativo de Elementor al lienzo.

Como siempre, por defecto, aparecerá un formulario de contacto simple, con 3 campos y un botón: nombre, email, mensaje y enviar.

Añadir campos de tipo paso

Después de crear el formulario base, hay que añadir y configurar los pasos del formulario de la siguiente manera.

formulario por pasos con elementor
  1. Pulsa sobre añadir elemento nuevo al formulario.
  2. Elige “Step” en tipo de campo.
  3. Elementor añadirá dos nuevos campos: uno al inicio y otro al final del formulario. Cada uno de ellos equivale al inicio de un paso del formulario.

Personalizar los pasos

formulario por pasos con elementor
  1. Personaliza el nombre de los pasos utilizando el campo “etiqueta” del item correspondiente.
  2. Personaliza el texto de los botones para avanzar o retroceder un paso, utilizando los campos correspondientes dentro del item.
  3. Selecciona un icono si quieres mostrarlo en lugar del número de cada paso.

Ajustes de los pasos

Dentro de los ajustes de contenido del widget de formulario de Elementor, tienes la posibilidad de elegir el modo en que quieres mostrar los pasos:

  • Texto
  • Icono
  • Número
  • Barra de progreso
  • Número y texto
  • Icono y texto
  • Ninguno

Y, además, puedes seleccionar la forma del adorno:

  • Circulo
  • Cuadrado
  • Cuadrado redondeado
  • Ninguno

Estilo de los pasos

Además, como en cualquier widget, podrás personalizar el estilo. En este caso, encontrarás una sección específica llamada “Steps” donde podrás cambiar el espaciado, el relleno, el tamaño de los iconos, los colores, el ancho de la barra separadora, etc.

Conclusión

Aunque posiblemente la interfaz del formulario por pasos con Elementor vaya mejorando en próximas actualizaciones, es un sueño hecho realidad para muchos usuarios que demandaban esta funcionalidad desde hace tiempo.

El resto de funcionalidades del formulario de Elementor se mantienen intactas, por lo que el envío de datos, suscripción a listas de correo o la redirección funcionan del mismo modo.

¿Y tú qué opinas? ¿Eres partidario de utilizar formularios muy simples o prefieres utilizar formularios por pasos? De ser así, ¿cómo los implementas?

Deja tu comentario debajo y comparte tu experiencia con el resto de usuarios.

1 comentario en «Formulario por pasos con Elementor»

Deja un comentario

En wpnovatos.com, los datos personales que nos proporciones serán tratados con el fin de moderar tus comentarios por Juanma Aranda. Puede que los datos que nos facilites sean compartidos con terceros de acuerdo con lo que se establece en la Política de Privacidad y Cookies. Además, puedes revocar tu consentimiento, consultar cómo ejercer tus derechos y ampliar la información sobre el tratamiento de tus datos en nuestra Política de Privacidad y Cookies.