Vas a construir: Un formulario de contacto con campos de nombre, email, tema, mensaje y consentimiento que guarda los envíos y te manda un email por cada uno
Lee primero: Recorrido por el editorConstruye una landing page
En este tutorial agregas un formulario de contacto a una página, configuras sus campos, diseñas lo que ven los visitantes después de enviarlo, lo publicas y lees los envíos en el espacio de trabajo Forms. Luego activas un email por cada mensaje nuevo. Necesitas un sitio que puedas editar, por ejemplo el del tutorial de la landing page.
Agrega el formulario
Inserta un formulario
Abre la página del formulario y selecciona el frame donde debe ir. Presiona + en la pestaña Layers y elige Form en el grupo Forms. El formulario viene con tres campos y dos frames ocultos. En la pestaña Layers son Email (un input), Textarea (con la etiqueta Message), Submit (el botón Send), Success y Error.
Ponle nombre al formulario
En la sección Form del inspector, pon Name en
Contact. El espacio de trabajo Forms muestra el formulario con este nombre. Deja Action en Store submissions y Redirect en Stay on page.
Configura los campos
Agrega un campo de nombre
Con el formulario seleccionado, presiona + y elige Input. Los campos nuevos van al final del formulario, así que arrastra el input encima de Email en la pestaña Layers. En la sección Field, pon Name en
name, Label enNombrey activa Required.Revisa el campo de email
Selecciona Email. Su Type es Email y Required está activado, así que el navegador revisa la dirección antes de enviar el formulario. Name es la clave con la que se guarda el envío; mantenla corta y única dentro del formulario.
Agrega un selector de tema
Selecciona el formulario, presiona +, elige Select y arrástralo encima de Textarea. Pon Name en
topicy Label enTema. En Options, cambia las dos filas aVentasySoporte(cada una con una etiqueta y un valor) y presiona Add option para agregar una tercera,Otro.Limita el mensaje
Selecciona Textarea, el campo del mensaje. Required ya está activado. Pon Max length en
2000para que nadie pueda pegar una novela.Agrega una casilla de consentimiento
Agrega un Checkbox de la misma forma y arrástralo encima de Submit. Pon Label en
Acepto que me contacten sobre mi mensajey activa Required.Revisa el botón
Selecciona Submit. En la sección Button, Type es Submit: eso es lo que envía el formulario. Cambia Text si quieres una etiqueta distinta de
Send. Un botón dentro de un formulario siempre lo envía, así que su sección Link no tiene destino.
El formulario muestra Nombre, Email, Tema, Mensaje, la casilla de consentimiento y el botón de enviar, en ese orden.
Diseña los estados de éxito y de error
Muestra el estado de éxito
Selecciona el formulario y pon Show en Success en la sección Form. El lienzo muestra el frame Success en lugar de los campos. Edita su texto, por ejemplo
Gracias, te responderemos en un día hábil., y dale el mismo estilo que al resto de la página.Muestra el estado de error
Pon Show en Error y escribe un mensaje para cuando el envío falle, por ejemplo cuando un visitante manda demasiados mensajes seguidos. Vuelve a poner Show en Form cuando termines.
Publica y prueba
Publica en staging
Presiona Publish en la barra de herramientas, deja Staging seleccionado y presiona Publish to staging. Los formularios solo reciben envíos en el sitio publicado.
Envía un mensaje de prueba
Abre el enlace de staging y completa el formulario. Arriba del botón aparece una verificación de Cloudflare Turnstile que normalmente se aprueba sola. Presiona Send: los campos se reemplazan por tu mensaje de éxito.
Lee los envíos
Abre el espacio de trabajo Forms
De vuelta en el editor, presiona Forms debajo de las pestañas de la barra lateral. Cambia el selector de arriba de la lista a Staging: los envíos de prueba nunca se mezclan con los reales de Production.
Abre un envío
Selecciona Contact. La pestaña Submissions muestra cada mensaje con la hora en que llegó. Haz clic en una fila para leer todos sus campos y la página desde la que se envió. Presiona Export CSV para descargarlos.
La pestaña Submissions de Contact, en Staging, muestra tu mensaje de prueba.
Recibe un email por cada mensaje
Agrégate a las notificaciones
Abre la pestaña Settings de Contact. En Notifications, agrega tu email y presiona Save. Solo se pueden agregar miembros del sitio o de su espacio de trabajo.
Elige qué conservar
En Storage, deja Store submissions activado. Usa Keep for para eliminar los envíos antiguos después de un tiempo. Desactiva Store submissions solo si quieres los emails y que no se guarde nada.
Publica en producción
Los emails de notificación se envían solo para los envíos de producción. Presiona Publish, elige Production y presiona Publish to production. Esto requiere un administrador del sitio.
Envía un mensaje en el sitio de producción: aparece en Production en el espacio de trabajo Forms, y recibes un email titulado "New submission: Contact" con el nombre del sitio.
Lo que aprendiste
- Un formulario contiene campos; el Name de cada campo es la clave con la que se guarda su valor, y Required, Type y las longitudes se revisan antes de enviar.
- El control Show te permite diseñar los estados de éxito y de error en el lienzo.
- Los envíos se guardan por entorno, y los envíos de producción pueden mandar un email a los miembros del sitio.
Sigue con los próximos tutoriales o lee las guías en las que se basa este: