Cómo hacer un formulario con una barra de progreso
Publicado: 2022-04-22¿Te gustaría saber cómo agregar una barra de progreso a un formulario?
Tener una barra de progreso en su formulario ayuda a reducir el abandono del formulario al mantener a su visitante informado sobre su progreso.
A continuación, le mostraremos cómo agregar uno a su formulario.
¿Qué es la barra de progreso en los formularios?
Las barras de progreso son características visuales que muestran a los usuarios cuántas páginas hay en su formulario y en qué página se encuentran actualmente.
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.
Cómo hacer un formulario con una barra de progreso
Estos son los pasos que vamos a seguir:
- Instale el complemento WPForms
- Crear un nuevo formulario
- Agregue saltos de página a su formulario
- Guarde y publique su formulario
- Verifique la barra de progreso de su formulario
Comencemos instalando el complemento de formulario que necesitaremos para la barra de progreso.
1. Instale el complemento WPForms
En primer lugar, para tener una barra de progreso en su formulario, deberá comprar una licencia de WPForms Pro y luego iniciar sesión en su cuenta de WPForms. Una vez que haya iniciado sesión, haga clic en la pestaña Descargas .
Esto le mostrará una página con todas sus licencias disponibles. Para descargar el complemento, haga clic en el botón Descargar WPForms junto a una de sus licencias. Esto guardará un archivo comprimido del complemento WPForms en su computadora.
Importante: necesitará WPForms Pro ya que incluye el campo Salto de página. Necesita el campo Salto de página si tiene varios pasos en su formulario y para mostrar la barra de progreso.
Instalación de WPForms en su sitio
Una vez que haya descargado su archivo zip, diríjase a su sitio de WordPress donde le gustaría instalar WPForms. Luego, dentro del panel de administración, vaya a Complementos » Agregar nuevo y haga clic en el botón Cargar complemento .
Desde aquí, haga clic en el botón Elegir archivo y seleccione el archivo zip de WPForms que acaba de descargar.
Después de cargar su archivo, haga clic en el botón Instalar ahora .
Esto comenzará el proceso de instalación por usted. Una vez que el complemento esté instalado, haga clic en el botón Activar complemento para activar WPForms en su sitio.
Después de activar el complemento, verifique su clave de licencia de WPForms para recibir actualizaciones automáticas y compatibilidad con el complemento. Agregar su clave de licencia también le permitirá instalar y activar fácilmente los complementos de WPForms desde su panel de control de WordPress.
¡Eso es todo! Ahora podemos seguir adelante y crear un nuevo formulario.
2. Crear un nuevo formulario
Para comenzar, deberá iniciar sesión en su área de administración de WordPress. Una vez allí, haga clic en WPForms en la barra lateral de administración para ir a la página de información general de formularios.
Luego, para crear un nuevo formulario, haga clic en el botón Agregar nuevo para iniciar el generador de formularios WPForms.
En la página Configuración del generador 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 será el nombre predeterminado de la plantilla que elija.
Debajo del campo Nombre del formulario, encontrará cientos de plantillas de formulario en la sección Seleccione una plantilla . Estas son plantillas preconstruidas de formularios de uso común para ayudarlo a comenzar rápidamente.
Nota: si desea crear su formulario desde cero, use la plantilla de formulario en blanco.
Para seleccionar una plantilla, puede usar las categorías en el 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, desplace el cursor sobre ella y haga clic en el botón Usar plantilla .
Si tiene alguna dificultad para crear su formulario, lea nuestras instrucciones detalladas sobre cómo crear y personalizar completamente su formulario.
3. Agregue saltos de página a su formulario
Ahora está listo para agregar sus saltos de página y una barra de progreso. Al agregar un salto de página, el formulario incluirá automáticamente la barra de progreso.
Una vez que haya abierto el generador de formularios, continúe y agregue los campos que le gustaría incluir en su formulario. A continuación, 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 agregue dividirá el formulario en páginas adicionales y podrá agregar tantas páginas como sea necesario. Para mover el Salto de página a una sección diferente de su formulario, simplemente 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 agregado un Salto de página, puede notar que en el área de vista previa apareció un área de Primera página en la parte superior de su formulario. 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.
A continuación, puede elegir entre los tres estilos de Indicador de progreso: Barra de progreso, Círculos o Conector .
Barra de progreso:
Círculos:
Conector:
Para cambiar el color de su indicador de progreso, use el selector de color o ingrese el código HEX.
Finalmente, ingrese un nombre para la primera página de su formulario en el campo Título de la página .
Sin embargo, si está satisfecho con el aspecto de su formulario, puede ocultar la barra de progreso seleccionando Ninguno .
¿Querer aprender más? Lea las instrucciones completas sobre cómo crear formularios de varias páginas y personalice los detalles para aprovechar al máximo esta función de formulario.
4. Guarde y publique su formulario
Una vez que haya terminado de personalizar su formulario, ahora puede publicarlo. Primero, haga clic en el botón naranja grande Guardar en la esquina superior derecha de su generador de formularios.
A continuación, puede utilizar el asistente de inserción para integrar su formulario en su sitio web haciendo clic en el botón de inserción.
Desde aquí, tendrá la opción de crear una nueva página para incrustar su formulario o seleccionar una página existente para agregar su formulario.
Si selecciona la opción Crear nueva página , se le pedirá que ingrese un nombre para la página. Luego haga clic en el botón Let's Go para incrustar su formulario y publicar su página.
Si elige la opción Seleccionar página existente , se le pedirá que elija en qué página insertar su formulario desde el menú desplegable.
Luego haga clic en el botón Let's Go para incrustar su formulario.
Ahora puede ver su formulario en la página seleccionada. Vaya a la página en la que lo incrustó o vaya a WPForms » Todos los formularios . Pase el cursor sobre el título del formulario para mostrar un menú adicional de opciones. Una vez que aparezcan las opciones, haga clic en Vista previa .
5. Verifique la barra de progreso de su formulario
Ahora tendrá un formulario que tendrá un indicador de progreso similar a este:
Recomendamos probar su formulario completando los campos y enviándolo, para asegurarse de que todo se ve bien y funciona de la manera que desea.
Nota : los campos de salto de página se pueden mover hacia arriba o hacia abajo en el formulario si desea ajustar el diseño.
A continuación, conviértase en un experto en creación de formularios
¿Le gustaría aumentar su conocimiento de creación de WPForm? Asegúrese de consultar nuestra guía completa de campos de formulario y cómo personalizar los campos en sus formularios.
¿Estás listo para construir tu formulario ahora? Recuerde registrarse en WPForms Pro, ya que incluye el campo Salto de página y la barra de progreso, cientos de plantillas gratuitas y también ofrecemos una garantía de devolución de dinero de 14 días.
Crea tu formulario de WordPress ahora
Si este artículo te ayudó, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitos de WordPress.