El editor de formularios es una herramienta fácil de usar que le permite crear varios tipos de formularios web para interactuar con los visitantes del sitio o recopilar información del usuario. Con su interfaz intuitiva, similar al editor de texto e imágenes, pero con opciones de personalización adicionales, puede diseñar y configurar formularios como de comentarios, de suscripción, encuestas y más.
Agregar un formulario a su sitio web
1. Vaya a la pestaña Crear en el menú de la izquierda y seleccione la categoría Formularios.
2. Arrastre el elemento de formulario y suéltelo en el lugar de la página que desee. El marcador de posición azul indicará la ubicación disponible más cercana.
Componentes del formulario
1. Elementos: Configure el contenido, lo que incluye los campos de formulario, las casillas de verificación, los botones de selección y el botón de llamada a la acción.
2. Configuración: Defina lo que sucede al enviar un formulario, como enviar datos a un correo electrónico o a una base de datos.
Elementos del formulario
1. Campo de texto
El campo de texto permite a los usuarios ingresar entradas de texto cortas de una sola línea en el formulario.
Tipos de campo
Esta configuración determina el tipo de datos que los usuarios pueden ingresar:
- Texto: muestra la entrada exactamente como se escribió.
- Contraseña: oculta los caracteres ingresados y los muestra como *** (p. ej., para contraseñas).
- Oculto: almacena información relacionada con el sistema (p. ej., detalles del referente o navegador) o datos precargados que los usuarios no deberían ver.
- Archivo*: permite que los visitantes carguen imágenes, audio, video u otros archivos. Los archivos enviados generan un correo electrónico con un enlace de descarga cliqueable.
Opciones de personalización
- Nombre: un identificador único para hacer referencia al campo dentro del editor de formularios y en correos electrónicos o entradas de blog generadas por el formulario.
- Ancho: ajusta el ancho del campo ingresando un valor o arrastrando los controladores de redimensión.
- Longitud máxima: establece la cantidad máxima de caracteres que puede aceptar el campo.
- Validar como: define el tipo de contenido obligatorio (p. ej., un campo de correo electrónico debe contener una dirección de correo electrónico con el formato adecuado). Si la entrada no es válida, los usuarios verán un mensaje para corregirla.
- Sugerencia: muestra texto auxiliar cuando los usuarios hacen clic dentro del campo y brinda orientación o ejemplos.
- Valor predeterminado: rellena previamente el campo con un valor predefinido que los usuarios pueden modificar.
Carga de archivos*
- Para almacenar los archivos cargados, el formulario debe estar vinculado a una base de datos.
- Los archivos almacenados en la base de datos permanecerán accesibles y contarán para el límite de almacenamiento de la cuenta.
- Los enlaces a archivos enviados por correo electrónico no utilizan almacenamiento, pero caducarán a los 30 días.
2. Área de texto
El campo del formulario Área de texto es parecido al campo de texto, pero admite entradas de texto más largas con múltiples líneas.
Opciones de personalización
Además de los parámetros idénticos para el campo de texto, es decir, Nombre, Etiqueta, Ancho, Sugerencia, Validar como y Valor predeterminado, tiene las siguientes opciones para el área de texto:
- Altura: modifica la altura del área de texto, ya sea cambiando el número en el campo de altura o arrastrando los controles de redimensión del área de texto.
- Ajuste: define cómo se muestra el texto cuando se envía en correos electrónicos o se muestra en foros o blogs.
- Predeterminado: utiliza la configuración de ajuste de texto predeterminada del navegador o del cliente de correo electrónico.
- Desactivado: deshabilita el ajuste de texto, por lo que el texto no se dividirá en nuevas líneas cuando se escriba.
- Físico: muestra el texto tal cual se ajustó en el área de texto.
- Virtual: permite que el usuario del correo electrónico decida cómo se ajustará el texto.
3. Campo Seleccionar
El campo Seleccionar permite a los usuarios elegir entre una lista predefinida de opciones. Se puede mostrar como un menú desplegable o una lista, según la configuración seleccionada.
Opciones de personalización
- Tipo: define cómo se muestran las opciones:
- Menú: muestra un menú desplegable en el que los usuarios pueden seleccionar una opción.
- Lista: muestra todas las opciones disponibles en una lista vertical.
- Opciones: representa las opciones seleccionables en el campo.
- Nombre de la opción: el texto que se muestra en el menú desplegable o en la lista.
- Valor de la opción: los datos reales enviados por correo electrónico cuando se selecciona la opción.
- Orden y administración: utilice las flechas arriba/abajo para reorganizar las opciones, eliminar las no deseadas o establecer una selección predeterminada que aparezca cuando se cargue el formulario.
4. Casillas de verificación
Las casillas de verificación permiten a los usuarios seleccionar varias opciones de una lista o activar o desactivar una sola opción. Son útiles para presentar selecciones de opción múltiple en las que se puede elegir más de una opción.
Opciones de personalización
- Nombre: es el identificador único de la casilla de verificación, que se utiliza en el editor de plantillas de formulario, correos electrónicos y entradas de blog. Piense que es como la pregunta que los usuarios responden seleccionando o desmarcando casillas de verificación.
- Valor: representa la respuesta seleccionada. Por ejemplo, si el valor de la casilla de verificación se establece en "Sí", marcar la casilla significa que el usuario ha respondido de manera afirmativa.
- Seleccionado por defecto: si esta opción está habilitada, la casilla de verificación se preseleccionará cuando se cargue el formulario.
- Obligatorio: los usuarios deben marcar la casilla antes de enviar el formulario. Esto es útil para las casillas de verificación de acuerdos, como exigir a los usuarios que acepten los Términos y condiciones antes de enviarlos.
5. Botones de selección
Los botones de selección se utilizan cuando solo se puede seleccionar una opción de una lista predefinida. A diferencia de las casillas de verificación, la selección de uno de estos botones anula automáticamente la selección de cualquier otra opción en el mismo grupo.
Opciones de personalización
- Nombre del grupo: todos los botones de selección representan las opciones para una sola pregunta que debe pertenecer al mismo grupo. Solo se puede seleccionar un botón por grupo a la vez.
- Valor: representa la opción de respuesta. Por ejemplo, si la pregunta es "¿Le gusta mi sitio?", el nombre del grupo podría ser "LeGustaMiSitio", con las opciones de valor Sí, No y Debe mejorar. Si un usuario selecciona Sí, la respuesta enviada aparecerá como: LeGustaMiSitio: Sí.
- Estado predeterminado: permite preseleccionar un botón de selección cuando se carga el formulario.
- Obligatorio: requiere que el usuario seleccione una opción antes de enviar el formulario.
6. Formulario de comentarios
El editor de formularios incluye un asistente de formularios de comentarios incorporado, que se puede agregar fácilmente seleccionando el ícono F.
Este formulario viene preconfigurado con todos los campos necesarios para enviar comentarios, incluido un botón de llamada a la acción. Los campos se configuran con opciones predeterminadas, pero puede personalizarlos según sea necesario para que se adapten mejor a sus requisitos.
7. Mensajes de éxito o error
Una vez enviado el formulario, el sistema muestra un mensaje de éxito o error. Puede controlar la ubicación de estos mensajes especificando su ubicación en el editor.
Utilice el ícono Información para seleccionar dónde desea que aparezcan los mensajes. En las propiedades del formulario, cuando las opciones avanzadas están habilitadas, también puede personalizar el mensaje de éxito. Si deja el campo en blanco, se mostrará el mensaje de éxito predeterminado. Sin embargo, si lo prefiere, puede escribir un mensaje personalizado en las propiedades del formulario, que se mostrará a los visitantes una vez que el formulario se envíe correctamente.
8. Botón de llamada a la acción
El botón de llamada a la acción (CTA) es un elemento fundamental del formulario, ya que permite que los usuarios envíen su entrada y completen las acciones previstas del formulario. Sin este botón, no se puede enviar el formulario.
Para insertar un botón CTA, busque su ícono en la sección Elementos en línea de la barra de herramientas del editor de formularios y haga clic. Una vez agregado, haga clic en el botón para configurarlo como botón de envío. En el menú desplegable Enlace, seleccione {Enviar formulario} para habilitar el envío de formularios.
Si se requiere un botón de reinicio, puede crear uno siguiendo los mismos pasos y seleccionando {Restablecer} en su lugar. Además, el panel derecho proporciona un campo editable desde el que puede personalizar el texto del título del botón para que coincida con las necesidades de su formulario.
Propiedades y personalización del botón de llamada a la acción
- Título y subtítulo del botón: configure el texto principal y el subtexto opcional que se muestra en el botón.
- Tamaño: elija el tamaño pequeño, mediano o grande para el botón.
- Ancho mínimo: defina un ancho mínimo para el botón a fin de mantener la coherencia en el diseño.
- Título y subtítulo al pasar el ratón por encima: especifique el texto alternativo que aparecerá cuando los usuarios pasen el cursor por encima del botón.
- Transición de texto: si se configuró un subtítulo al pasar el ratón por encima, seleccione un efecto de transición para que el cambio visual sea fluido.
- Resaltar efecto: agregue un efecto de animación que se active 3 segundos después de que se cargue la página y se repita cada 30 segundos.
- Color: elija entre los tres colores predefinidos para el botón.
- Alineación: alinee el botón dentro del contenido (izquierda, centro o derecha).
- Relleno: ajuste el relleno del botón en píxeles para que el espaciado sea óptimo.
- Ícono del botón: elija un ícono de la galería de imágenes almacenadas o cargue una imagen personalizada.
- Ícono al pasar el ratón por encima: como opción, puede agregar un ícono diferente que aparezca al pasar el ratón.
- Ubicación del ícono: coloque el ícono antes o después del título del botón.
Configuración del formulario
1. Siguiente página
Especifique la página que debe abrirse después de enviar el formulario con éxito. Puede ser una página dedicada con el mensaje "¡Gracias!" o cualquier otra página relevante de su sitio. Por defecto, el formulario está configurado para mantener a los usuarios en la misma página una vez que lo envíen con texto. Si desea modificarlo, a través del tipo de enlace, elija la página deseada.
2. Enviar a correo electrónico
Habilite la opción Enviar a correo electrónico para recibir los envíos de formularios de los visitantes de su sitio web por correo electrónico. Esto ampliará las opciones adicionales:
| - Correo electrónico de destino: ingrese la dirección de correo electrónico a la que llegarán los envíos de formularios, por ejemplo, orders@contactmywebsite.com. | |
| - Correo electrónico de origen: para garantizar la capacidad de entrega de los envíos de formularios, hemos deshabilitado la opción de especificar la dirección de correo electrónico del remitente. | |
| - Asunto del correo: defina el asunto del correo electrónico (p. ej., "Nueva solicitud de información"). También puede utilizar comodines $xxxxx$ para personalizar el asunto en función de las entradas del usuario. |
3. Editor de plantillas y formato de correos electrónicos
Elija el formato del correo electrónico:
- Simple: envía correos electrónicos de solo texto y elimina cualquier formato.
- HTML: envía correos electrónicos con formato, siempre que su cliente de correo electrónico sea compatible con HTML.
Para diseños de correo electrónico personalizados, seleccione Usar plantilla, que abre el editor de plantillas:
- El editor de plantillas funciona como un editor de texto e imágenes simplificado.
- Utilice el menú desplegable Valor para insertar marcadores de posición correspondientes a los campos del formulario.
- Una vez guardado, cada envío de formulario generará un correo electrónico según la estructura de su plantilla.
4. Enviar correo electrónico de confirmación
Esta función envía una respuesta automática a los visitantes para confirmar su envío.
- Correo electrónico de destino: ingrese la dirección de correo electrónico a la que llegarán los envíos de formularios, por ejemplo, orders@contactmywebsite.com.
- Correo electrónico de origen: para garantizar la capacidad de entrega de los envíos de formularios, hemos deshabilitado la opción de especificar la dirección de correo electrónico del remitente.
- Asunto del correo: defina el asunto del correo electrónico (p. ej., "Nueva solicitud de información").
- Contenido del mensaje: habilite esta opción mediante Usar plantilla > Editar para abrir el editor de plantillas de texto. Desde allí, puede personalizar el mensaje de confirmación. Utilice la opción Fusionar etiquetas para insertar datos del campo de formulario (p. ej., $Email$).
5. Enviar a la base de datos
Habilite Enviar a la base de datos para almacenar los datos del formulario enviado en una base de datos hospedada en el sitio. El formulario crea automáticamente una base de datos dedicada con las columnas necesarias que coincidan con los nombres y los tipos de datos de los campos del formulario. También puede usar una base de datos importada, pero asegúrese de que tenga nombres y tipos de columna coincidentes.
Ajustes adicionales:
- Confirmación obligatoria: envía un correo electrónico con un enlace de confirmación en el que los usuarios deben hacer clic para validar su envío.
- Aprobación obligatoria: envía una notificación por correo electrónico a un moderador para solicitar que apruebe o rechace el envío antes de que se almacene. Esto ayuda a evitar el spam o los envíos accidentales.
Para obtener más información, consulte el tutorial de la aplicación Editor de base de datos.