Cum adaugi un formular de contact pe site-ul tău (care chiar ajunge la tine)

Ca să adaugi un formular de contact care funcționează, construiește un formular scurt (nume, e-mail, mesaj), trimite-l către o rută de pe server care validează datele, salvează mesajul într-o bază de date și apoi îți trimite o notificare prin e-mail, printr-un furnizor de e-mail, folosind o cheie API secretă. Adaugă un câmp ascuns de tip honeypot și limitarea ratei de trimitere ca să oprești cea mai mare parte a spamului, afișează un mesaj clar de succes și testează de la un capăt la altul pe site-ul publicat. Partea importantă este salvarea înainte de e-mail: dacă e-mailul eșuează vreodată, tot ai solicitarea.

Opțiunile tale

Dacă site-ul tău are deja un backend și o bază de date — ceea ce aplicațiile construite cu constructori de aplicații cu AI au adesea — ultima opțiune este cea mai fiabilă și ține solicitările acolo unde le poți vedea.

Ce include un formular de contact bun

• Cât mai puține câmpuri. Nume, e-mail, mesaj. Adaugă un meniu derulant pentru subiect („Vânzări”, „Suport”, „Altele”) doar dacă vei redirecționa după el.
• Etichete clare deasupra fiecărui câmp, nu doar text de sugestie care dispare.
• Validare utilă: „Introdu o adresă de e-mail validă”, afișată lângă câmp.
• O stare de succes care spune ce urmează: „Mulțumim — răspundem în cel mult o zi lucrătoare.”
• O notă de confidențialitate care spune cum vei folosi datele, cu link către politica ta de confidențialitate.
• O variantă de rezervă, precum adresa de e-mail sau numărul de telefon, pentru cei care le preferă.

Prompturi exemplu

Formularul de bază:

Adaugă un formular de contact pe pagina Contact, cu nume, e-mail și mesaj (toate obligatorii, mesajul până la 2.000 de caractere). Trimite-l către o rută de pe server care validează datele, le salvează într-un tabel contact_messages cu ora primirii și afișează un mesaj de succes: „Mulțumim, vă vom răspunde în cel mult o zi lucrătoare.” Afișează erorile de câmp în linie. Asigură-te că funcționează bine pe telefoane.

Notificări prin e-mail:

Când un mesaj de contact este salvat, trimite-mi o notificare prin e-mail la hello@example.com folosind Resend, cu cheia din RESEND_API_KEY. Setează reply-to la adresa expeditorului, ca să pot răspunde direct. Dacă trimiterea eșuează, păstrează mesajul salvat și înregistrează eroarea fără să expui cheia.

Protecție împotriva spamului:

Adaugă protecție împotriva spamului la formularul de contact: un câmp ascuns de tip honeypot, care trebuie să rămână gol, o limită de 5 trimiteri pe IP pe oră, pe server, și respinge mesajele cu mai mult de 3 linkuri. Renunță silențios la trimiterile cu honeypot completat, dar afișează totuși succesul.

O cutie de intrare:

Adaugă o pagină de administrare protejată cu parolă, care listează mesajele de contact, cele mai noi întâi, cu o casetă „rezolvat” și un filtru pentru mesajele nerezolvate.

Pas cu pas

1. Decide unde ajung mesajele: cine primește notificările și cine răspunde.
2. Construiește formularul cu câmpurile de mai sus, etichete accesibile și câmpuri adaptate telefonului (folosește tipul de câmp e-mail, ca telefoanele să afișeze tastatura potrivită).
3. Creează ruta de pe server. Verifică câmpurile obligatorii, formatul e-mailului și limitele de lungime. Nu te baza niciodată doar pe validarea din browser.
4. Salvează întâi în baza de date. Vezi cum adaugi o bază de date în aplicația ta.
5. Configurează un furnizor de e-mail. Creează un cont, verifică domeniul de trimitere și stochează cheia API ca secret. Cum trimiți e-mailuri din aplicația ta explică în detaliu configurarea domeniului (SPF, DKIM).
6. Trimite notificarea de pe server, după salvare. Folosește domeniul tău verificat ca expeditor și adresa vizitatorului ca reply-to — nu trimite „de la” adresa vizitatorului, pentru că probabil va fi respins ca spoofing.
7. Opțional, trimite un răspuns automat vizitatorului, dar păstrează-l scurt; răspunsurile automate către adrese de spam pot afecta reputația expeditorului tău.
8. Adaugă protecție împotriva spamului: honeypot, limitarea ratei, apoi o verificare de tip CAPTCHA dacă este nevoie.
9. Testează pe site-ul publicat: trimite un mesaj, verifică baza de date, verifică cutia de intrare și folderul de spam, apasă reply.

Oprirea spamului

Formularele de contact atrag roboți în câteva zile după lansare. Pune apărările în straturi, de la cea mai puțin intruzivă la cea mai intruzivă:

1. Câmp honeypot. Un câmp ascuns de oameni; roboții îl completează. Nu costă nimic vizitatorii reali.
2. Limitarea ratei pe server. Limitează câte mesaje poate trimite o adresă într-o perioadă.
3. Reguli de conținut. Respinge mesajele pline de linkuri sau cu un câmp de mesaj gol ori absurd de lung.
4. O verificare de tip CAPTCHA, precum Cloudflare Turnstile sau Google reCAPTCHA. Tokenul trebuie verificat pe serverul tău; o verificare care rulează doar în browser poate fi ocolită.

Greșeli frecvente

• Afișarea „Trimis!” când nu s-a trimis nimic. Interfața afișează succesul înainte sau indiferent de răspunsul serverului. Așteaptă întotdeauna serverul.
• Doar e-mail, fără bază de date. O singură cheie configurată greșit și solicitările dispar săptămâni întregi fără ca cineva să observe.
• Cheia API în codul de front-end. Oricine o poate folosi ca să trimită e-mail în numele tău.
• Domeniu de trimitere neverificat. Notificările ajung în spam sau nu ajung deloc.
• Trimiterea „de la” e-mailul vizitatorului. Folosește reply-to în schimb.
• Fără limite de lungime. Roboții lipesc blocuri uriașe de text.
• Niciodată testat pe site-ul live. Cheile și domeniile diferă adesea între previzualizare și producție.

Listă de verificare

• Formular scurt, cu etichete vizibile și erori clare
• Validare pe server și limite de lungime
• Fiecare mesaj salvat în baza de date
• Notificare trimisă de pe un domeniu verificat, cu reply-to setat
• Cheia API a e-mailului stocată doar ca secret pe server
• Honeypot și limitarea ratei active
• Mesajul de succes apare doar după confirmarea serverului
• Nota de confidențialitate are link către politica de confidențialitate
• Testat de la un capăt la altul pe site-ul publicat, inclusiv folderul de spam

Formulare de contact în Mythex

În Mythex poți construi tot din chat. Cere formularul și o bază de date în același prompt (sau scrie /database), ca trimiterile să fie păstrate. Mythex nu are un produs propriu de trimitere de e-mail, așa că pentru notificări aduci un furnizor, precum Resend, SendGrid sau Postmark, adaugi cheia cu /secrets sau din setările proiectului și ceri agentului să trimită de pe server — vezi Trimite e-mail din aplicația ta. Înainte să te bazezi pe el, rulează App Testing (/test) pe formular în Preview, apoi publică și testează pe URL-ul live.

Un formular de contact este o parte cheie a majorității site-urilor pentru afaceri mici și a paginilor de aterizare. Verifică lista de securitate înainte de lansare.

Întrebări