Resumen de IA
¿Quieres mostrar a los usuarios vistas previas de sus entradas antes o después de que envÃen tu formulario? Nuestro campo de Vista Previa de Entrada te permite añadir fácilmente una página de vista previa a cualquier formulario en tu sitio. Además, nuestra configuración de confirmaciones de formularios te permite mostrar vistas previas de las entradas en tus confirmaciones, también.
Esta guÃa te mostrará cómo usar el campo de Vista Previa de Entrada y la configuración de confirmaciones en WPForms.
En este artículo
Antes de sumergirte en el tutorial a continuación, asegúrate de que WPForms está instalado y activado en tu sitio de WordPress. Luego puedes crear un nuevo formulario o editar uno existente para abrir el constructor de formularios y acceder al campo de Vista Previa de Entrada.
Añadir un campo de Vista Previa de Entrada a tu formulario
Primero, necesitarás añadir un campo de Vista Previa de Entrada a tu formulario. Este campo solo está disponible con una licencia de pago, por lo que lo encontrarás en Campos de Lujo en el constructor de formularios.
Haz clic en Vista Previa de Entrada o arrástralo y suéltalo en el área de vista previa para añadirlo a tu formulario.
Añadir un campo de Vista Previa de Entrada a tu formulario también añadirá automáticamente un campo de Salto de Página y dividirá tu formulario en múltiples páginas.
Nota: Para más detalles sobre las opciones disponibles para los saltos de página en WPForms, por favor consulta nuestro tutorial sobre formularios de múltiples páginas.
El campo de Vista Previa de Entrada requiere un formulario de múltiples páginas para funcionar, y no puedes eliminar el campo de Salto de Página que añade a tu formulario a menos que primero elimines el campo de Vista Previa de Entrada.
En la mayorÃa de los casos, recomendamos colocar la vista previa de la entrada al final de tu formulario para que los usuarios vean la vista previa solo después de haber completado todos los campos.
Nota: Aunque puedes añadir más campos a tu formulario después del campo de Vista Previa de Entrada, solo mostrará los datos de las páginas anteriores del formulario.
Por ejemplo, si colocas un campo de Vista Previa de Entrada en la segunda página de un formulario de 3 páginas, solo mostrará la entrada y las selecciones del usuario de los campos de la primera página del formulario.
Personalizar tu campo de Vista Previa de Entrada
A continuación, haz clic en el campo de Vista Previa de Entrada en el área de vista previa del constructor de formularios para abrir las opciones del campo.
AquÃ, puedes usar el interruptor Mostrar aviso de vista previa para mostrar u ocultar un mensaje adicional antes de la vista previa de la entrada.
También puedes personalizar el aviso que aparecerá encima de la vista previa de la entrada cuando este formulario se publique en tu sitio.
Este campo acepta texto asà como etiquetas HTML.
Elegir un estilo de Vista Previa de Entrada
En la pestaña de opciones avanzadas del campo, puedes seleccionar entre 4 estilos diferentes para la vista previa de entrada de tu formulario: Básico, Compacto, Tabla o Tabla, Compacto.
Todas estas opciones muestran la misma información, solo que en diferentes diseños.
El estilo Básico de Vista Previa de Entrada
El estilo Vista previa básica de entrada es una lista simple de etiquetas de campo seguida de la entrada o selecciones del usuario. Aquí tienes un ejemplo de cómo se ve este estilo en el frontend.
Para hacerlo, ve a Ajustes » Confirmaciones en el constructor de formularios. Para cualquier confirmación que hayas creado, puedes activar la opción Mostrar vista previa de entrada después del mensaje de confirmación.
El estilo Compacto utiliza texto al igual que el estilo Básico, pero coloca las etiquetas de campo y la entrada del usuario en columnas separadas para que ocupen menos espacio en la página.
Nota: ¿Quieres aprender más formas de condensar tus formularios? Consulta nuestro tutorial sobre diseños multicolumna.
El estilo Vista previa de entrada en tabla
El estilo Tabla muestra las entradas en una tabla con filas sombreadas para distinguir las etiquetas de campo de la entrada del usuario.
El estilo Vista previa de entrada compacta en tabla
Y finalmente, el estilo Tabla Compacto coloca las entradas en una tabla con columnas separadas para las etiquetas de campo y la entrada del usuario.
Añadir CSS personalizado a un campo de Vista Previa de Entrada
También puedes añadir clases CSS personalizadas en el campo Clases CSS en las opciones avanzadas del campo.
Nota: ¿Quieres aprender más sobre el uso de clases CSS personalizadas en WPForms? Consulta nuestra guía para añadir CSS personalizado a tus formularios para más detalles.
Configurar confirmaciones de Vista Previa de Entrada
Puedes usar confirmaciones de vista previa de entrada en lugar de o además del campo Vista previa de entrada.
El campo Vista previa de entrada permite a los usuarios retroceder y cambiar su entrada o selecciones. Esto puede ser útil si deseas permitir a los visitantes corregir errores en sus entradas antes de enviar tu formulario.
Sin embargo, hay algunas situaciones en las que puedes querer permitir a los usuarios previsualizar sus entradas sin darles la opción de cambiar su entrada o selecciones. En estos casos, puedes usar una confirmación de vista previa de entrada en su lugar.
Para hacerlo, ve a Configuración » Confirmaciones en el creador de formularios. Para cualquier confirmación que hayas creado, puedes activar la opción Mostrar vista previa de la entrada después del mensaje de confirmación.
Nota: ¿Necesitas ayuda para configurar las confirmaciones de tu formulario? Nuestros tutoriales sobre ajustes de confirmaciones de WPForms y creación de confirmaciones de formularios condicionales tienen todos los detalles.
Una vez que esta opción esté activada, aparecerá un menú desplegable donde podrás seleccionar qué estilo de vista previa de entrada te gustaría usar para esta confirmación.
Asegúrate de guardar tus cambios antes de salir del constructor de formularios. En el frontend, tu confirmación de vista previa de entrada podría verse algo así.
¡Eso es todo! Ahora puedes permitir a los usuarios previsualizar sus entradas antes o después de que envíen tus formularios.
A continuación, ¿quieres aprender a gestionar las entradas de los usuarios? Consulta nuestra guía completa de entradas en WPForms para todos los detalles.