Descripción general de formularios - Ayuda de Webflow
Los formularios son una de las herramientas más poderosas en la web, permitiéndote capturar información de manera eficiente, ya sea que estés recopilando suscripciones a boletines de correo electrónico o consultas de trabajo de clientes potenciales. Con Webflow, puedes personalizar y optimizar completamente tus formularios para que se ajusten a tus necesidades. Puedes agregar un bloque de formulario a tu sitio desde Panel de adición → Elementos → Formularios.
Anatomía del formulario
El bloque de formulario hereda el ancho completo de su elemento padre y contiene tres elementos secundarios:
- Formulario — contiene todos tus campos y elementos del formulario
- Mensaje de éxito — el mensaje que se devuelve cuando el formulario se ha enviado con éxito
- Mensaje de error — el mensaje que se devuelve cuando hay un problema con el envío del formulario
Estructura del formulario
Puedes agregar o eliminar cualquiera de los siguientes elementos dentro del formulario para personalizarlo según sea necesario:
| Elemento del formulario | Propósito |
|---|---|
| Etiqueta de campo | Se utiliza para describir la función o propósito de un campo del formulario. Crucial para la accesibilidad. |
| Entrada | Se utiliza para recopilar datos de una sola línea, como una respuesta corta a una pregunta (por ejemplo, nombre o correo electrónico) |
| Carga de archivo | Permite a los visitantes del sitio adjuntar un archivo a su envío de formulario |
| Área de texto | Permite a los visitantes del sitio ingresar datos de varias líneas, como un mensaje extenso |
| Casilla de verificación | Se utiliza para datos de entrada donde los visitantes del sitio pueden elegir una o varias opciones |
| Botón de opción | Se utiliza para datos de entrada donde los visitantes del sitio pueden elegir solo una de muchas opciones |
| Seleccionar | Se utiliza para permitir que los visitantes del sitio seleccionen opciones de una lista desplegable. Se permiten múltiples selecciones |
| reCAPTCHA | Servicio de Google que previene el spam en formularios |
| Botón de envío | Envía todos los datos recopilados en un formulario. Ningún formulario está completo sin el Botón de envío |
Cómo configurar elementos de formulario
Puedes hacer doble clic en un elemento de formulario (por ejemplo, Entrada, Botón de envío) para abrir su configuración. Cada elemento de formulario tiene diferentes configuraciones de entrada según su tipo:
| Configuración de entrada | Propósito | Notas adicionales |
|---|---|---|
| Nombre | Identifica el campo en los envíos de formularios | n/a |
| Requerido | Permite requerir que se complete un campo de formulario para enviar el formulario | Bloquea envíos vacíos |
| Marcador de posición | Muestra texto en la entrada que desaparece al escribir; NO debe reemplazar etiquetas o instrucciones cruciales | No disponible para tecnología asistiva o herramientas de traducción; estilizable desde el menú de estados |
| Tipo de texto | Especifica el tipo de entrada (por ejemplo, correo electrónico, teléfono, contraseña) | Teléfono acepta caracteres y muestra teclado; contraseña oculta caracteres escritos |
| Autofoco | Decide si el campo se enfoca automáticamente al cargar la página | Cuidado con problemas de desplazamiento/salto o campos ocultos que bloquean envíos |
Botón de Envío
La configuración del botón de envío te permite establecer:
- Texto del botón: Lo que aparece en el botón (por defecto: “Enviar”)
- Texto de espera: Lo que reemplaza al botón después de hacer clic y antes de completar el envío (por defecto: “Por favor espera…”)
Cómo gestionar configuraciones de formulario
Personalizar estados de éxito y error
Selecciona el bloque de formulario y ve a Configuraciones del bloque de formulario para:
- Normal: Estado por defecto
- Éxito: Mensaje después de un envío exitoso
- Error: Mensaje después de un envío fallido
Establecer el nombre del formulario
El nombre que establezcas asocia el formulario con sus datos de envío. Si no estableces nombres únicos, todos los datos de envío aparecerán bajo "Formulario de correo electrónico". Da nombres descriptivos para distinguir los formularios.
Gestionar envíos de formularios y notificaciones
- Especifica los destinatarios en Configuración del bloque de formulario.
- Accede a notificaciones avanzadas en Configuración del sitio → Formularios → Notificaciones de formulario.
- Para propietarios de sitios completos: accede/gestiona los datos del formulario en Configuración del sitio → Formularios → Envíos de formulario.
Redirigir a los visitantes del sitio al enviar el formulario
Agrega una URL en el campo Redirigir para enviar a los usuarios a otro lugar después del envío.
Establecer una acción personalizada
Agrega una acción personalizada para enviar envíos a otro lugar (por ejemplo, HubSpot). Cuando agregas esto, Webflow no procesa ni envía la notificación. También puedes conectar Apps para más integraciones.
Ver conexiones de aplicaciones
Las aplicaciones conectadas aparecerán en Conexiones. Nota: Enviar datos del formulario a Webflow siempre aparece a menos que omitas completamente el procesamiento de Webflow.
Datos del formulario y GDPR
- Si recopilas datos personales de residentes de la UE (incluidos a través de formularios), eres un controlador de datos bajo el GDPR.
- Obtén el consentimiento adecuado para la recopilación de datos.
- Si construyes para clientes, edúcalos sobre sus responsabilidades.
- Revisa las responsabilidades si conectas datos a terceros (por ejemplo, Zapier).
Más información:
Solución de problemas
Si tu formulario no se puede enviar:
- Si has habilitado reCAPTCHA, asegúrate de que todos los formularios lo incluyan. De lo contrario, los envíos fallarán.
- Si tienes campos ocultos, asegúrate de que Autofocus esté desactivado para esos.
- Los sitios gratuitos/no alojados están limitados a 50 envíos de formularios en total. Actualiza tu plan de sitio para eliminar el límite.
Si los problemas persisten, contacta al soporte al cliente.