Cómo obtener una vista previa de una entrada de formulario antes de enviarla

Publicado: 2022-01-27

¿Quiere que sus visitantes obtengan una vista previa de las entradas de su formulario antes de enviarlas?

Permitir que los usuarios obtengan una vista previa de sus entradas reduce en gran medida las posibilidades de errores e imprecisiones mientras completan formularios.

WPForms tiene un campo de vista previa de entrada que puede agregar fácilmente a sus formularios, para que sus usuarios puedan ver un resumen rápido de sus entradas durante y después del envío.

En esta publicación, le mostraremos cómo agregar el campo Vista previa de entrada y personalizarlo de diferentes maneras en WPForms.

Cree un formulario con vistas previas de entrada ahora

¿Por qué debería mostrar una vista previa de la entrada?

La capacidad de obtener una vista previa de las entradas es muy útil, especialmente cuando se trata de formularios más largos y complejos.

WPForms es el mejor complemento de WordPress Form Builder. ¡Consíguelo gratis!

Es normal cometer errores tipográficos y errores al completar un formulario, pero una vista previa antes del envío le permite revisar la información antes de presionar el botón Enviar.

Por lo tanto, si desea minimizar los errores y brindar a sus usuarios la capacidad de corregir cualquier error antes del envío, debe agregar el campo Vista previa de entrada que ofrece WPForms.

Cómo obtener una vista previa de una entrada de formulario antes de enviarla

Siga nuestro tutorial paso a paso para aprender cómo puede agregar una vista previa de envío a sus formularios:

  1. Instalar WPForms
  2. Agregar un nuevo formulario
  3. Agregar campo de vista previa de entrada de formulario
  4. Personalizar aviso de vista previa y estilo
  5. Agregar confirmación de vista previa de entrada

Vamos a empezar.

1. Instalar WPForms

Para empezar, elija un plan WPForms adecuado y registre su cuenta. Luego, inicie sesión en el área de su cuenta de WPForms y haga clic en la pestaña Descargas . Esto abrirá una página donde puede presionar el botón Descargar WPForms para descargar el archivo zip.

Botón Descargar WPForms

Mientras esté en esta página, asegúrese de copiar su clave de licencia. Lo necesitará más adelante cuando active WPForms Pro en su sitio de WordPress.

Clave de licencia de WPForms

Después de que el archivo zip se haya descargado en su computadora, abra su panel de administración de WordPress y haga clic en Complementos » Agregar nuevo. Luego, haga clic en el botón Cargar complemento .

Subir complemento

Ahora, haga clic en el botón Elegir archivo y elija el archivo de complemento que acaba de descargar.

Haga clic en Instalar ahora cuando se cargue el archivo.

Instalar ahora wpforms

WPForms ahora se instalará en su sitio de WordPress. Esto debería tomar solo unos segundos. Cuando finalice la instalación, presione el botón Activar complemento .

Activar complemento WPForms

Ahora haga clic en WPForms » Configuración. Esto abrirá la pestaña Configuración general de forma predeterminada. Desplácese hacia abajo para encontrar el campo Clave de licencia e ingrese su clave aquí (que copió anteriormente).

Clave de licencia de WPForms

Luego, haga clic en el botón Verificar clave . Esto completará la instalación de WPForms Pro en su sitio.

2. Agregar un nuevo formulario

Ahora, abra el área de administración de WordPress de su sitio y haga clic en WPForms » Agregar nuevo en la barra lateral izquierda. Ahora puede dar un nombre a su formulario para que le resulte más fácil encontrarlo más tarde.

Agregar nuevo formulario

Desplácese hacia abajo para seleccionar una plantilla para comenzar a crear su formulario. Como todos los campos de WPForms, el campo Vista previa de entrada es compatible con la mayoría de las más de 300 plantillas disponibles.

Seleccionar plantilla

Cuando haya seleccionado una plantilla, agregaremos el campo Vista previa de entrada en el siguiente paso.

3. Agregue el campo de vista previa de entrada de formulario

En el siguiente ejemplo, estamos usando un formulario de reserva de cita personalizado, pero puede usar cualquier plantilla de formulario de su elección.

Para agregar una función de vista previa a su formulario, simplemente arrastre y suelte el campo Vista previa de entrada desde el panel de la izquierda del generador al panel de la derecha, donde se encuentran los campos de su formulario real.

Vista previa del formulario de contacto simple

Cuando agrega el campo Vista previa de entrada a su formulario, automáticamente agregará una nueva página donde aparecerá la vista previa.

El campo Vista previa de entrada con salto de página en el área de vista previa del generador de formularios

Así es como aparece la vista previa en acción cuando un usuario está completando un formulario:

Vista previa de formulario simple

También puede colocar el campo Vista previa de entrada varias veces dentro de su formulario. Por ejemplo, si tiene un formulario de varias páginas, puede colocar un campo Vista previa de entrada después de cada página. Esto significa que sus usuarios pueden obtener una vista previa de la información que completaron en las páginas anteriores a medida que continúan completando el resto de su formulario.

vista previa de varios campos de entrada de formulario

Agregar múltiples campos de vista previa de entrada en sus formularios largos es una excelente manera de asegurarse de que sus usuarios puedan obtener una vista previa de sus entradas y volver en cualquier momento para hacer cambios si es necesario.

4. Personalice el estilo y el aviso de vista previa

WPForms le permite personalizar el aviso de vista previa. Simplemente haga clic en el campo Vista previa de entrada en la vista del generador de formularios para abrir su configuración de campo.

Puede usar el botón de alternancia Mostrar aviso de vista previa para mostrar el mensaje encima de la vista previa de la entrada u ocultarlo por completo.

Habilitación del aviso de campo Vista previa de entrada

Además, tiene la libertad de editar el aviso de vista previa a su gusto o dejar el mensaje predeterminado como está.

A continuación, es posible que desee cambiar el estilo de vista previa de entrada. Haga clic en la pestaña Avanzado en las opciones del campo Vista previa de entrada para elegir entre 4 estilos de vista previa diferentes:

  • Básico
  • Compacto
  • Mesa
  • Mesa, Compacto

Elegir un estilo de vista previa de entrada

El estilo predeterminado es Básico, que muestra una vista previa línea por línea de la entrada del formulario.

Vista previa de formulario simple

Si desea darle a su vista previa un aspecto más ajustado, puede optar por la opción de estilo Compacto .

formulario de estilo compacto

Esto completa la configuración del campo Vista previa de entrada dentro de sus formularios. Pero hay otro tipo de vista previa de entrada que puede agregar, como mostramos en el siguiente paso.

5. Agregar confirmación de vista previa de entrada

Además de las vistas previas de entrada que aparecen cuando completa un formulario, WPForms también le permite mostrar vistas previas después de que un usuario haya enviado un formulario.

A diferencia del campo Vista previa de entrada, sus usuarios no pueden cambiar sus entradas cuando se muestra una confirmación de vista previa. En cambio, solo muestra a sus usuarios una copia de su envío que ya no se puede cambiar.

Para configurar confirmaciones de vista previa de entradas, diríjase a Configuración » Confirmaciones en el generador de formularios de WPForms. Aquí, puede activar Mostrar vista previa de entrada después del botón de mensaje de confirmación.

Habilitación de la confirmación de vista previa de entrada

Cuando haya habilitado esta opción, verá que aparece un menú desplegable que le permite elegir un estilo de vista previa como mostramos arriba para los campos de Vista previa de entrada.

Seleccionar el estilo de confirmación de vista previa de entrada

Todavía puede usar las vistas previas de entrada (que aparecen cuando se completa un formulario) junto con la confirmación de vista previa (que solo aparece después de que se hayan enviado las entradas). O solo puede usar una u otra de estas opciones. Todo depende de sus preferencias y de lo que intente lograr con sus formularios.

Confirmación de vista previa

¡Y eso es! Ahora puede permitir que sus usuarios obtengan una vista previa de una entrada de formulario antes de enviarla.

A continuación, haga cumplir las restricciones de acceso en los formularios de WordPress

¿Desea restringir sus formularios de WordPress solo a usuarios registrados? WPForms le permite seleccionar niveles de permiso de usuario por su estado de inicio de sesión. Consulte nuestro artículo sobre cómo restringir los formularios de WordPress a los usuarios registrados para obtener más información.

También puede leer nuestra guía sobre los mejores complementos de la barra de notificaciones de WordPress para promocionar sus ventas y ofertas especiales en su sitio.

¿Listo para construir tu formulario? Comience hoy con el complemento de creación 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.

Cree un formulario con vistas previas de entrada ahora

Si este artículo te ayudó, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitos de WordPress.