Formularios
Los dos formularios que incluye el sitio, qué validan, el captcha opcional y cómo conectar cada uno a tu propio servicio.
Los formularios
| Formulario | Dónde | Qué rellenan los visitantes | Qué valida |
|---|---|---|---|
| Contacto | /contact | Nombre, correo electrónico, teléfono (opcional), asunto y mensaje | Un nombre de 2 a 100 caracteres, un correo válido, un teléfono formado por dígitos y los signos habituales si se indica, un asunto de 5 a 200 caracteres y un mensaje de 20 a 2000 |
| Formulario de mensaje | La última sección de la página de inicio, sobre el mapa del mundo | Nombre, correo y mensaje | Un nombre de al menos 2 caracteres, un correo válido y un mensaje de al menos 5 |
Los dos muestran sus mensajes en el idioma de la página cuando el visitante pulsa el botón, y el formulario de contacto los actualiza a medida que se corrige cada campo. El formulario de contacto marca sus campos obligatorios con un asterisco rojo.
Qué pasa cuando un visitante envía uno
Nada sale del navegador. La plantilla no tiene back end, así que cada formulario está listo para el tuyo:
- El formulario de contacto espera un momento, muestra "Message Sent Successfully!" en su botón durante unos segundos y vacía sus campos.
- El formulario de mensaje espera un momento y muestra un panel de agradecimiento con un botón Send Another Message.
Antes de publicar, conecta cada formulario que conserves a tu propio servicio: tu API, un servicio de formularios o tu plataforma de correo. Quita el que no necesites.
Guarda las claves secretas en un servidor. Todo lo que está en el código del navegador, incluido un valor NEXT_PUBLIC_, puede leerlo cualquier visitante.
El captcha
El formulario de mensaje de la página de inicio puede pedir la casilla "No soy un robot" de Google reCAPTCHA v2 antes de enviar. Solo lo hace cuando NEXT_PUBLIC_RECAPTCHA_SITE_KEY está definida al construir el sitio: su botón dice entonces Continue, el siguiente paso muestra la casilla y Confirm & Send termina el envío. Sin la clave, el botón dice Send Message y envía de inmediato.
Un captcha solo protege un formulario cuyo servidor comprueba la respuesta con Google, usando la clave secreta que acompaña a la clave de sitio. Define la clave de sitio cuando tu endpoint haga esa comprobación. La casilla sigue el tema claro u oscuro del sitio y el idioma de la página.
Adónde se envía cada formulario
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
El archivo y la función detrás del botón de enviar de cada formulario.
Conecta un formulario a tu endpoint
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Un ejemplo práctico que envía cada formulario a tu propio endpoint, y una ruta de servidor que comprueba el captcha.
Las validaciones y sus mensajes
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Dónde se definen las reglas y los mensajes de error de cada formulario, y cómo cambiarlos.