Cómo crear un formulario de WordPress con una barra de progreso

¿Estás buscando un plugin de barra de progreso para WordPress?

Los indicadores de progreso, como también se les conoce, rastrearán e indicarán el progreso general del usuario a medida que completa el formulario.

En esta publicación, te mostraremos cómo agregar fácilmente una barra de progreso a tu formulario usando WPForms.

Crea tu formulario de WordPress ahora

¿Cómo agregar una barra de progreso en WordPress?

Las barras de progreso son características visuales que agregan funcionalidad y mejoran la experiencia del usuario. Muestran a los usuarios cuántas páginas tiene tu formulario y en cuál se encuentran actualmente.

Tener una barra de progreso en tu formulario ayuda a reducir el abandono del mismo al mantener informado a tu visitante sobre su progreso.

La forma más fácil de agregarlas a tus formularios es usar un plugin. La buena noticia, especialmente para los principiantes, es que no necesitas un plugin específico de barra de progreso para WordPress. WPForms es muy fácil de usar y simplifica el proceso al hacer que sea muy sencillo crear formularios de varias páginas con barras de progreso.

Cómo crear un formulario de WordPress con una barra de progreso

Estos son los pasos que vamos a seguir:

Comencemos instalando WPForms como nuestro plugin constructor de formularios y barra de progreso.

1. Instala el plugin WPForms

Primero, para tener una barra de progreso en tu formulario, necesitarás comprar una Licencia WPForms Pro y luego iniciar sesión en tu cuenta de WPForms. Una vez que hayas iniciado sesión, haz clic en la pestaña Descargas.

Esto le mostrará una página con todas sus licencias disponibles. Para descargar el plugin, haga clic en el botón Descargar WPForms junto a una de sus licencias. Esto guardará un archivo comprimido del plugin WPForms en su ordenador.

Importante: Necesitarás WPForms Pro ya que incluye el campo Salto de página. Necesitas el campo Salto de página si tienes varios pasos en tu formulario y para mostrar la barra de progreso.

Instalar WPForms en tu sitio de WordPress

Una vez que hayas descargado tu archivo zip, dirígete a tu sitio web de WordPress donde deseas instalar WPForms. Luego, dentro del panel de administración, ve a Plugins » Añadir nuevo y haz clic en el botón Subir plugin.

Desde aquí, haz clic en el botón Elegir archivo y selecciona el archivo zip de WPForms que acabas de descargar.

Después de que tu archivo se haya subido, haz clic en el botón Instalar ahora.

Esto iniciará el proceso de instalación para ti. Una vez que el plugin esté instalado, haz clic en el botón Activar plugin para activar WPForms en tu sitio.

Después de activar el plugin, verifica tu clave de licencia de WPForms para recibir actualizaciones automáticas y soporte del plugin. Agregar tu clave de licencia también te permitirá instalar y activar fácilmente los complementos de WPForms desde dentro de tu panel de WordPress.

¡Eso es todo! Ahora podemos proceder a crear un nuevo formulario.

2. Crear un nuevo formulario

Para empezar, debes haber iniciado sesión en tu área de administración de WordPress. Una vez allí, haz clic en WPForms en la barra lateral de administración para ir a la página de Resumen de formularios.

Luego, para crear un nuevo formulario, haz clic en el botón Añadir Nuevo para iniciar el creador de formularios de WPForms.

En la página de Configuración del creador de formularios, puede nombrar su formulario en el campo de entrada Nombre del formulario.

Si no se elige ningún nombre, el nombre del formulario se establecerá por defecto con el nombre de su plantilla.

Debajo del campo Nombre del formulario, encontrará cientos de plantillas de formularios en la sección Seleccionar una plantilla. Estas son plantillas predefinidas de formularios de uso común, como formularios de contacto, formularios de registro y muchos más, para ayudarle a empezar rápidamente.

Nota: Si desea crear su formulario desde cero, utilice la plantilla Formulario en blanco.

Para seleccionar una plantilla, puede usar las categorías del menú de la izquierda. También puede usar la barra de búsqueda en la esquina superior izquierda de la biblioteca de plantillas para buscar entre las opciones disponibles.

Una vez que encuentre la plantilla deseada, pase el ratón sobre ella y haga clic en el botón Usar plantilla.

Desde allí, entrará en el creador de formularios y podrá arrastrar y soltar elementos adicionales si lo desea. También puede cambiar la disposición del formulario de campos en línea a varias columnas.

Si tiene alguna dificultad para crear su formulario, lea nuestras instrucciones detalladas sobre cómo crear y personalizar completamente su formulario.

3. Agregar saltos de página a tu formulario

Ahora está listo para añadir sus saltos de página y una barra de progreso. Al añadir un salto de página, el formulario incluirá automáticamente la barra de progreso.

Una vez que tenga abierto el creador de formularios, añada los campos que desee incluir en su formulario. Luego, arrastre un campo Salto de página al área de vista previa y suéltelo donde desee crear una nueva página de formulario.

Cada campo Salto de página que añada dividirá el formulario en páginas adicionales, y puede añadir tantas páginas como necesite. Para mover el Salto de página a una sección diferente de su formulario, haga clic en él en el área de vista previa y arrástrelo donde desee.

Personalización de su barra de progreso

Una vez que haya añadido un Salto de página, es posible que observe que en el área de vista previa, ha aparecido una sección Primera página en la parte superior de su formulario. Este es el marcador de posición para la barra de progreso horizontal. Haga clic en Primera página / Indicador de progreso para acceder a las opciones de su formulario de varias páginas.

Puede personalizar su barra de progreso en el menú desplegable Indicador de progreso, y hay varias opciones de personalización disponibles para usted.

En primer lugar, elija los estilos de su indicador de progreso. WPForms ofrece Barras de progreso, Barras de progreso circulares y Barras de progreso conectoras.

Barra de progreso:

Círculos:

Conector:

Tiene algunas opciones de estilo en cuanto a estos formularios de varias páginas. Para cambiar el color de su Indicador de progreso, utilice el selector de color o introduzca el código hexadecimal.

Finalmente, introduzca un nombre para su formulario en el campo Título de la página.

Sin embargo, si está satisfecho con el aspecto de su formulario tal como está, puede ocultar la barra de progreso seleccionando Ninguno.

¿Quiere saber más? Lea las instrucciones completas sobre cómo crear formularios de varias páginas para aprovechar al máximo esta función de formulario.

Es posible que también desees permitir que tus usuarios guarden su progreso y completen el resto de tu formulario más tarde. Esta es una excelente manera de reducir el abandono de formularios y aumentar las tasas de finalización.

4. Guardar y publicar tu formulario

Una vez que hayas terminado de personalizar tu formulario, puedes publicarlo. Primero, haz clic en el botón Guardar en la esquina superior derecha de tu creador de formularios.

Puedes agregar tu formulario a tu sitio web haciendo clic en el botón Incrustar.

Desde aquí, tendrás la opción de crear una nueva página o seleccionar una página existente para agregar tu formulario.

Ten en cuenta que también hay una opción de código corto, si deseas incrustar el formulario directamente en tu página más tarde. Esto también es útil si planeas colocar formularios en widgets en su lugar.

Si seleccionas la opción Crear Nueva Página, se te pedirá que introduzcas un nombre para la página. Luego haz clic en el botón ¡Vamos! para incrustar tu formulario y publicar tu página.

Si elige la opci ilde{A}^{3}n Seleccionar p ilde{A}gina existente, se le pedir ilde{A} que elija en qu ilde{A} p ilde{A}gina desea incrustar su formulario desde el men ilde{A} desplegable.

Luego haz clic en el botón ¡Vamos! para incrustar tu formulario.

Ahora puedes ver tu formulario en la página seleccionada. Ve a la página en la que lo has incrustado o ve a WPForms » Todos los Formularios. Pasa el cursor sobre el título del formulario para mostrar un menú adicional de opciones. Una vez que aparezcan las opciones, haz clic en Vista previa.

5. Comprobar la barra de progreso de tu formulario

Ahora tendrás un formulario que mostrará un indicador de progreso similar a este:

Recomendamos probar tu formulario rellenando los campos y enviándolo para asegurarte de que todo se ve bien y funciona como deseas.

Nota: Los campos de salto de página se pueden mover hacia arriba o hacia abajo en el formulario si deseas ajustar el diseño.

A continuación, Conviértete en un Experto en Creación de Formularios

¿Te gustaría aumentar tus conocimientos sobre la creación de formularios con WPForms? Asegúrate de consultar nuestra guía completa de campos de formularios y cómo personalizar los campos de tus formularios.

Si estás listo para llevar tus formularios al siguiente nivel, nuestro artículo sobre cómo personalizar tus formularios para que coincidan con tu tema de WordPress vale la pena leerlo. Aprenderás a personalizar la apariencia de tu formulario, botones, color de fondo y más, directamente desde el editor de bloques de WordPress. ¿La mejor parte? Si no sabes CSS, no pasa nada. ¡No necesitas CSS personalizado para estas personalizaciones!

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.