Ir al artículo
Aniq-UI

SaaS TemplateFormularios

Formularios

Los formularios que incluye el sitio, qué validan y cómo conectar cada uno a tu propio servicio.

Los formularios

FormularioDóndeQué rellenan los visitantes
Contacto/contactNombre, correo electrónico, teléfono (opcional), asunto y mensaje
Inicio de sesión/auth/signinCorreo electrónico, contraseña y Remember me
Registro/auth/signupNombre, correo electrónico, contraseña y la casilla de términos
Recuperación de contraseña/auth/forgot-passwordCorreo electrónico
Botones de Google, GitHub y X/auth/signin, /auth/signupNada: un clic
NewsletterEl pie de página de todas las páginasCorreo electrónico
Registro por correo electrónicoLa sección Where we work de la página de inicioCorreo electrónico
NewsletterLa barra lateral del blogCorreo electrónico

Los formularios de contacto y de cuenta validan cada campo cuando el visitante sale de él, con mensajes en el idioma de la página: un correo electrónico válido, un nombre de al menos 2 caracteres, un asunto de contacto de al menos 5 y un mensaje de al menos 20, y en el registro una contraseña de al menos 8 caracteres con una mayúscula, una minúscula, un número y un símbolo.

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:

  • Los formularios de contacto y de cuenta esperan un momento y muestran su mensaje de éxito.
  • El cuadro de newsletter del blog muestra un estado de agradecimiento.
  • El cuadro de newsletter del pie de página, el registro por correo electrónico de la página de inicio y los botones sociales aún no hacen nada.

Antes de publicar, conecta cada formulario que conserves a tu propio servicio: tu API, un servicio de formularios, tu plataforma de correo electrónico o tu proveedor de inicio de sesión. Quita los 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.

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 completo que envía el formulario de contacto a tu propio endpoint, y una ruta de servidor para ello.

Los dos cuadros de correo electrónico sin formulario

Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.

Cómo convertir el cuadro de newsletter del pie de página y el registro por correo electrónico de inicio en formularios que funcionen.

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.

Los botones de inicio de sesión social

Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.

Dónde se gestionan los botones de Google, GitHub y X, y cómo conectarlos.

¿Te atascaste en un paso?

Busca una solución antes de empezar de nuevo.

Solución de problemas

Preferencias de Cookies

Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies para análisis y publicidad personalizada.