Så lägger du till ett kontaktformulär på din webbplats (som faktiskt når dig)

För att lägga till ett kontaktformulär som fungerar, bygger du ett kort formulär (namn, e-post, meddelande), skickar det till en serverrutt som validerar indata, sparar meddelandet i en databas och sedan skickar dig ett e-postmeddelande via en e-postleverantör med en hemlig API-nyckel. Lägg till ett dolt honeypot-fält och hastighetsbegränsning för att stoppa de flesta spamförfrågningar, visa ett tydligt bekräftelsemeddelande och testa hela flödet på den publicerade sajten. Att spara innan du skickar e-post är det viktiga: om e-posten någon gång misslyckas har du fortfarande förfrågan.

Dina alternativ

Om din sajt redan har en backend och en databas, vilket appar byggda med AI-appbyggare ofta har, är det sista alternativet det mest tillförlitliga och håller förfrågningarna där du kan se dem.

Vad ett bra kontaktformulär innehåller

• Så få fält som möjligt. Namn, e-post, meddelande. Lägg till en ämnesrullgardin ("Försäljning", "Support", "Annat") bara om du ska dirigera efter den.
• Tydliga etiketter ovanför varje fält, inte bara platshållartext som försvinner.
• Hjälpsam validering: "Ange en giltig e-postadress", visat bredvid fältet.
• Ett bekräftelsetillstånd som säger vad som händer nu: "Tack, vi svarar inom en arbetsdag."
• En integritetsnotis som säger hur du använder uppgifterna, med länk till din integritetspolicy.
• En reservväg som din e-postadress eller ditt telefonnummer för personer som föredrar det.

Exempelprompter

Det grundläggande formuläret:

Lägg till ett kontaktformulär på kontaktsidan med namn, e-post och meddelande (alla obligatoriska, meddelandet upp till 2 000 tecken). Skicka till en serverrutt som validerar indata, sparar det i tabellen contact_messages med mottagningstiden och visar ett bekräftelsemeddelande: "Tack, vi svarar inom en arbetsdag." Visa fältfel direkt vid fältet. Se till att det fungerar bra på telefoner.

E-postaviseringar:

När ett kontaktmeddelande sparas, skicka ett aviseringsmail till hello@example.com med Resend och nyckeln i RESEND_API_KEY. Sätt svarsadressen (reply-to) till avsändarens e-post så att jag kan svara direkt. Om sändningen misslyckas, behåll det sparade meddelandet och logga felet utan att exponera nyckeln.

Skydd mot spam:

Lägg till spamskydd i kontaktformuläret: ett dolt honeypot-fält som måste förbli tomt, en gräns på 5 inskick per IP-adress per timme på servern och avvisa meddelanden med fler än 3 länkar. Släpp tyst honeypot-inskick men visa ändå bekräftelse.

En inkorg:

Lägg till en lösenordsskyddad adminsida som listar kontaktmeddelanden, nyast först, med en kryssruta "hanterad" och ett filter för ohanterade meddelanden.

Steg för steg

1. Bestäm vart meddelandena ska: vem som tar emot aviseringar och vem som svarar.
2. Bygg formuläret med fälten ovan, tillgängliga etiketter och mobilvänliga inmatningar (använd e-postinmatningstypen så att telefoner visar rätt tangentbord).
3. Skapa serverrutten. Den kontrollerar obligatoriska fält, e-postformat och längdgränser. Lita aldrig på validering som bara görs i webbläsaren.
4. Spara i databasen först. Se hur du lägger till en databas i din app.
5. Sätt upp en e-postleverantör. Skapa ett konto, verifiera din avsändardomän och lagra API-nyckeln som en hemlighet. Så skickar du e-post från din app täcker domäninställningen (SPF, DKIM) i detalj.
6. Skicka aviseringen från servern efter att du sparat. Använd din verifierade domän som avsändare och besökarens adress som svarsadress; skicka inte "från" besökarens adress, eftersom den troligen avvisas som förfalskning.
7. Valfritt automatiskt svar till besökaren, men håll det kort; automatiska svar till spamadresser kan skada din avsändarreputation.
8. Lägg till spamskydd: honeypot, hastighetsbegränsning och sedan en CAPTCHA-liknande kontroll vid behov.
9. Testa på den publicerade sajten: skicka, kontrollera databasen, kontrollera inkorgen och skräppostmappen, klicka på svara.

Stoppa spam

Kontaktformulär lockar bottar inom några dagar efter att de gått live. Lägg på skydd från minst till mest påträngande:

1. Honeypot-fält. Ett fält dolt för människor; bottar fyller i det. Det kostar riktiga besökare ingenting.
2. Hastighetsbegränsning på servern. Begränsar hur många meddelanden en adress kan skicka under en period.
3. Innehållsregler. Avvisa meddelanden fulla av länkar, eller med ett meddelandefält som är tomt eller absurt långt.
4. En CAPTCHA-liknande kontroll, till exempel Cloudflare Turnstile eller Google reCAPTCHA. Token måste verifieras på din server; en kontroll som bara körs i webbläsaren kan kringgås.

Vanliga misstag

• Att visa "Skickat!" när inget skickats. Gränssnittet visar framgång före eller oavsett serverns svar. Vänta alltid på servern.
• Bara e-post, ingen databas. En felkonfigurerad nyckel så försvinner förfrågningar i veckor utan att någon märker det.
• API-nyckel i frontend-kod. Vem som helst kan använda den för att skicka e-post som du.
• Overifierad avsändardomän. Aviseringar hamnar i skräppost eller kommer aldrig fram.
• Att skicka "från" besökarens e-post. Använd svarsadress i stället.
• Inga längdgränser. Bottar klistrar in stora textblock.
• Att aldrig testa den levande sajten. Nycklar och domäner skiljer sig ofta mellan förhandsvisning och produktion.

Checklista

• Kort formulär med synliga etiketter och tydliga fel
• Validering och längdgränser på servern
• Varje meddelande sparas i databasen
• Aviseringsmail skickas från en verifierad domän, med svarsadress satt
• E-post-API-nyckeln lagras endast som hemlighet på servern
• Honeypot och hastighetsbegränsning på plats
• Bekräftelsemeddelandet visas först när servern bekräftat
• Integritetsnotisen länkar till din integritetspolicy
• Testad från början till slut på den publicerade sajten, inklusive skräppostmappen

Kontaktformulär i Mythex

I Mythex kan du bygga hela detta från chatten. Be om formuläret och en databas i samma prompt (eller skriv /database) så att inskickningarna sparas. Mythex har ingen inbyggd produkt för att skicka e-post, så för aviseringar tar du med en leverantör som Resend, SendGrid eller Postmark, lägger till nyckeln med /secrets eller i projektinställningarna och ber agenten skicka från servern. Se Skicka e-post från din app. Innan du litar på det, kör App Testing (/test) mot formuläret i förhandsvisningen, publicera sedan och testa på den levande URL:en.

Ett kontaktformulär är en nyckeldel av de flesta webbplatser för småföretag och landningssidor. Gå igenom säkerhetschecklistan före lansering.

Frågor