Com afegir un formulari de contacte al teu lloc web (que realment et arribi)

Per afegir un formulari de contacte que funcioni, construeix un formulari curt (nom, correu, missatge) i envia'l a una ruta del servidor que valida les dades, desa el missatge en una base de dades i després t'envia una notificació per correu a través d'un proveïdor de correu fent servir una clau d'API secreta. Afegeix un camp ocult de tipus trampa (honeypot) i una limitació de peticions per aturar la majoria del correu brossa, mostra un missatge d'èxit clar i prova-ho de principi a fi al lloc publicat. Desar abans d'enviar el correu és la part important: si el correu falla mai, encara tens la consulta.

Les teves opcions

Opció	Com funciona	Millor per a	Inconvenients
Enllaç mailto	«Escriu-nos» obre l'aplicació de correu del visitant	Llocs personals	Falla en molts dispositius; exposa la teva adreça als robots
Servei de formularis allotjat	El formulari s'envia a un servei de tercers que t'envia el correu	Llocs estàtics sense backend	Un altre compte; límits i marca en els plans gratuïts
Eina de formulari incrustada	Un giny del constructor de formularis incrustat a la pàgina	Enquestes complexes, configuració ràpida	No encaixa amb el teu disseny; les dades són en un altre lloc
El teu formulari + base de dades + correu	El teu servidor desa i notifica	La majoria d'aplicacions i llocs d'empresa	Has de configurar un proveïdor de correu

Si el teu lloc ja té un backend i una base de dades —cosa que sovint passa amb les aplicacions construïdes amb constructors d'aplicacions amb IA—, l'última opció és la més fiable i manté les consultes en un lloc on les pots veure.

Què inclou un bon formulari de contacte

Els menys camps possibles. Nom, correu, missatge. Afegeix un desplegable d'assumpte («Vendes», «Suport», «Altres») només si els encaminaràs segons això.
Etiquetes clares sobre cada camp, no només text de marcador que desapareix.
Validació útil: «Introdueix una adreça de correu vàlida», mostrada al costat del camp.
Un estat d'èxit que digui què passa després: «Gràcies, et respondrem en un dia laborable.»
Una nota de privadesa que digui com faràs servir les dades, amb enllaç a la teva política de privadesa.
Una alternativa, com la teva adreça de correu o el telèfon, per a les persones que ho prefereixin.

Prompts d'exemple

El formulari bàsic:

Afegeix un formulari de contacte a la pàgina de Contacte amb nom, correu i missatge (tots obligatoris, el missatge fins a 2.000 caràcters). Envia'l a una ruta del servidor que valida les dades, el desa en una taula contact_messages amb l'hora de recepció, i mostra un missatge d'èxit: «Gràcies, et respondrem en un dia laborable». Mostra els errors de camp en línia. Fes que funcioni bé en mòbils.

Notificacions per correu:

Quan es desi un missatge de contacte, envia'm una notificació per correu a hola@example.com fent servir Resend amb la clau a RESEND_API_KEY. Posa reply-to a l'adreça de qui envia perquè li pugui respondre directament. Si l'enviament falla, mantén el missatge desat i registra l'error sense mostrar la clau.

Protecció contra el correu brossa:

Afegeix protecció contra el correu brossa al formulari de contacte: un camp ocult tipus trampa que ha de quedar buit, un límit de 5 enviaments per IP cada hora al servidor, i rebutja missatges amb més de 3 enllaços. Descarta en silenci els enviaments amb la trampa però mostra igualment l'èxit.

Una safata d'entrada:

Afegeix una pàgina d'administració protegida amb contrasenya que mostri els missatges de contacte del més recent al més antic, amb una casella «gestionat» i un filtre per als missatges no gestionats.

Pas a pas

Decideix on van els missatges: qui rep les notificacions i qui respon.
Construeix el formulari amb els camps de dalt, etiquetes accessibles i camps adaptats als mòbils (usa el tipus de camp de correu perquè els mòbils mostrin el teclat adequat).
Crea la ruta del servidor. Comprova els camps obligatoris, el format del correu i els límits de longitud. Mai no confiïs només en la validació del navegador.
Desa a la base de dades primer. Consulta com afegir una base de dades a la teva aplicació.
Configura un proveïdor de correu. Crea un compte, verifica el teu domini d'enviament i guarda la clau d'API com a secret. Com enviar correus des de la teva aplicació explica la configuració del domini (SPF, DKIM) en detall.
Envia la notificació des del servidor després de desar. Fes servir el teu domini verificat com a remitent i l'adreça del visitant com a reply-to; no enviïs el correu «des de» l'adreça del visitant, perquè probablement es rebutjarà com a suplantació.
Opcionalment, envia una resposta automàtica al visitant, però que sigui curta; les respostes automàtiques a adreces de correu brossa poden perjudicar la reputació del teu remitent.
Afegeix protecció contra el correu brossa: camp trampa, limitació de peticions i, si cal, una comprovació tipus CAPTCHA.
Prova-ho al lloc publicat: envia un missatge, comprova la base de dades, comprova la safata d'entrada i la carpeta de correu brossa, i fes clic a respondre.

Aturar el correu brossa

Els formularis de contacte atrauen robots a pocs dies de publicar-se. Afegeix defenses de la menys a la més intrusiva:

Camp trampa (honeypot). Un camp amagat per a les persones; els robots l'omplen. No costa res als visitants reals.
Limitació de peticions al servidor. Limita quants missatges pot enviar una adreça en un període.
Regles de contingut. Rebutja missatges plens d'enllaços, o amb un camp de missatge buit o absurdament llarg.
Una comprovació tipus CAPTCHA, com Cloudflare Turnstile o Google reCAPTCHA. El token s'ha de verificar al teu servidor; una comprovació que només s'executa al navegador es pot saltar.

Errors habituals

Mostrar «Enviat!» quan no s'ha enviat res. La interfície diu èxit abans de rebre la resposta del servidor o sense tenir-la en compte. Espera sempre la confirmació del servidor.
Només correu, sense base de dades. Una clau mal configurada i les consultes desapareixen durant setmanes sense que ningú se n'adoni.
Clau d'API al codi del frontend. Qualsevol pot usar-la per enviar correus com si fossis tu.
Domini d'enviament no verificat. Les notificacions van a la carpeta de correu brossa o no arriben mai.
Enviar «des de» el correu del visitant. Fes servir reply-to.
Sense límits de longitud. Els robots enganxen blocs enormes de text.
No provar mai el lloc en directe. Les claus i els dominis sovint són diferents entre la previsualització i la producció.

Llista de comprovació

Formulari curt amb etiquetes visibles i errors clars
Validació al servidor i límits de longitud
Cada missatge desat a la base de dades
Notificació per correu enviada des d'un domini verificat, amb reply-to configurat
Clau d'API del correu guardada només com a secret del servidor
Camp trampa i limitació de peticions implantats
El missatge d'èxit apareix només després que el servidor ho confirmi
La nota de privadesa enllaça a la teva política de privadesa
Provat de principi a fi al lloc publicat, incloent la carpeta de correu brossa

Formularis de contacte a Mythex

A Mythex pots construir tot això des del xat. Demana el formulari i una base de dades en el mateix prompt (o escriu /database) perquè els enviaments es guardin. Mythex no té un producte integrat per enviar correus, així que per a les notificacions utilitzes un proveïdor com Resend, SendGrid o Postmark, afegeixes la seva clau amb /secrets o a la configuració del projecte, i demanes a l'agent que enviï des del servidor; consulta Envia correus des de la teva aplicació. Abans de confiar-hi, executa la prova d'aplicació (/test) sobre el formulari a la previsualització, després publica i prova-ho a la URL en directe.

Un formulari de contacte és una part clau de la majoria de llocs web de petites empreses i de les pàgines de captació. Revisa la llista de seguretat abans del llançament.

Preguntes

Com faig que un formulari de contacte m'enviï un correu?

El formulari envia les dades a una ruta del servidor, que desa el missatge i després t'envia una notificació a través d'un proveïdor de correu com Resend, SendGrid o Postmark, fent servir una clau d'API guardada com a secret del servidor. Un navegador per si sol no pot enviar correus de manera fiable.

Per què no rebo els correus del formulari de contacte?

Les causes habituals són una clau d'API que falta o és incorrecta, un domini d'enviament no verificat, notificacions que van a la carpeta de correu brossa, o un formulari que mostra èxit sense que la crida al servidor funcioni. Desar cada enviament a una base de dades primer fa que mai no perdis un missatge mentre arregles el correu.

Com paro el correu brossa del formulari de contacte?

Comença amb un camp ocult de tipus trampa (honeypot) i una limitació de peticions al servidor. Si el correu brossa continua, afegeix una comprovació tipus CAPTCHA com Cloudflare Turnstile o Google reCAPTCHA, verificada al servidor.

He d'usar un enllaç mailto en lloc d'un formulari?

Un enllaç mailto és simple però obre l'aplicació de correu del visitant, cosa que falla per a moltes persones en ordinadors compartits o de feina, i exposa la teva adreça als robots de correu brossa. Un formulari és més fiable per als visitants i et permet controlar els camps que reps.