¿Quieres mostrar a los usuarios vistas previas de sus entradas antes o después de que envíen tu formulario? Nuestro campo Vista previa de la entrada le permite añadir fácilmente una página de vista previa a cualquier formulario de su sitio. Además, nuestra configuración de confirmaciones de formularios también te permite mostrar vistas previas de las entradas en tus confirmaciones.
Esta guía le mostrará cómo utilizar el campo Vista previa de entrada y la configuración de confirmaciones en WPForms.
En este artículo
Antes de sumergirse en el tutorial a continuación, asegúrese de que WPForms está instalado y activado en su sitio de WordPress. A continuación, puede crear un nuevo formulario o editar uno existente para abrir el constructor de formularios y acceder al campo Vista previa de entrada.
Añadir un campo de vista previa de entrada al formulario
En primer lugar, tendrá que añadir un campo Vista previa de entrada a su formulario. Este campo solo está disponible con una licencia de pago, por lo que lo encontrarás en Campos de fantasía en el constructor de formularios.
Haga clic en Vista previa de la entrada o arrástrela y suéltela en el área de vista previa para añadirla a su formulario.
Al añadir un campo Vista previa de entrada a su formulario también se añadirá automáticamente un campo Salto de página y se dividirá su formulario en varias páginas.
Nota: Para más detalles sobre las opciones disponibles para saltos de página en WPForms, por favor vea nuestro tutorial sobre formularios multipágina.
El campo Vista previa de entrada requiere un formulario multipágina para funcionar, y no puede eliminar el campo Salto de página que añade a su formulario a menos que elimine primero el campo Vista previa de entrada.
En la mayoría de los casos, recomendamos colocar la vista previa de la entrada al final del formulario para que los usuarios vean la vista previa sólo después de haber rellenado todos los campos.
Nota: Aunque puede añadir más campos a su formulario después del campo Vista previa de entrada, sólo mostrará los datos de las páginas de formulario anteriores.
Por ejemplo, si coloca un campo Vista previa de entrada en la segunda página de un formulario de 3 páginas, sólo mostrará las entradas y selecciones del usuario de los campos de la primera página del formulario.
Personalización del campo de vista previa de la entrada
A continuación, haga clic en el campo Vista previa de entrada en el área de vista previa del generador de formularios para abrir sus opciones de campo.
Aquí puede utilizar el conmutador Mostrar aviso previo para mostrar u ocultar un mensaje adicional antes de la vista previa de la entrada.
También puede personalizar el aviso que aparecerá sobre la vista previa de la entrada cuando este formulario se publique en su sitio.
Este campo acepta texto y etiquetas HTML.
Elegir un estilo de vista previa de entrada
En la pestaña Opciones avanzadas de campo, puede seleccionar entre 4 estilos diferentes para la vista previa de entrada de su formulario: Básico, Compacto, Tabla o Tabla, Compacto.
Todas estas opciones muestran la misma información, sólo que en diferentes diseños.
El estilo básico de previsualización de entradas
El estilo de vista previa de entrada básica es una simple lista de etiquetas de campo seguidas de las entradas o selecciones del usuario. A continuación se muestra un ejemplo de cómo aparece este estilo en el frontend.
La entrada compacta Estilo Vista Previa
El estilo Compacto utiliza el texto igual que el estilo Básico, pero coloca las etiquetas de los campos y los datos introducidos por el usuario en columnas separadas para que ocupen menos espacio en la página.
Nota: ¿Quieres conocer más formas de condensar tus formularios? Consulte nuestro tutorial sobre diseños de varias columnas.
El estilo de vista previa de entrada de tabla
El estilo Tabla muestra las entradas en una tabla con filas sombreadas para distinguir las etiquetas de los campos de las entradas del usuario.
La Mesa, Estilo Entrada Compacta
Y, por último, el estilo Tabla, compacto coloca las entradas en una tabla con columnas separadas para las etiquetas de los campos y la entrada del usuario.
Añadir CSS personalizado a un campo de vista previa de entrada
También puede añadir clases CSS personalizadas en el campo Clases CSS de las opciones avanzadas de campo.
Nota: ¿Quiere aprender más sobre el uso de clases CSS personalizadas en WPForms? Echa un vistazo a nuestra guía para agregar CSS personalizado a sus formas para más detalles.
Configuración de las confirmaciones previas de entrada
Puede utilizar confirmaciones de vista previa de entrada en lugar o además del campo Vista previa de entrada.
El campo Vista previa de la entrada permite a los usuarios volver atrás y cambiar sus entradas o selecciones. Esto puede ser útil si desea que los visitantes corrijan errores en sus entradas antes de enviar el formulario.
Sin embargo, hay algunas situaciones en las que puede que desee permitir a los usuarios previsualizar sus entradas sin darles la opción de cambiar sus entradas o selecciones. En estos casos, puede utilizar una confirmación de vista previa de la entrada.
Para ello, vaya a Configuración " Confirmaciones en el generador de formularios. Para cualquier confirmación que haya creado, puede activar la opción Mostrar vista previa de entrada después del mensaje de confirmación.
Nota: ¿Necesita ayuda para configurar las confirmaciones de sus formularios? Nuestros tutoriales sobre la configuración de las confirmaciones de WPForms y la creación de confirmaciones de formularios condicionales tienen todos los detalles.
Una vez activada esta opción, aparecerá un menú desplegable en el que podrá seleccionar el estilo de vista previa de entrada que desea utilizar para esta confirmación.
Asegúrese de guardar los cambios antes de salir del generador de formularios. En el frontend, la confirmación de la vista previa de la entrada puede tener este aspecto.
Ya está. Ahora puede permitir que los usuarios previsualicen sus entradas antes o después de enviar los formularios.
A continuación, ¿quieres aprender a gestionar las entradas de los usuarios? Echa un vistazo a nuestra guía completa a las entradas en WPForms para todos los detalles.