Sådan tilføjer du en kontaktformular til din hjemmeside (som faktisk når dig)

For at tilføje en kontaktformular, der virker, bygger du en kort formular (navn, e-mail, besked), sender den til en serverrute, der validerer input, gemmer beskeden i en database og derefter sender dig en e-mailnotifikation via en e-mailudbyder med en hemmelig API-nøgle. Tilføj et skjult honeypot-felt og hastighedsbegrænsning for at stoppe det meste spam, vis en tydelig succesbesked, og test det fra ende til ende på den udgivne side. At gemme før du sender e-mail er det vigtige: hvis e-mailen nogensinde fejler, har du stadig henvendelsen.

Dine muligheder

Har dit site allerede en backend og en database — hvilket apps bygget med AI-app-builders ofte har — er den sidste mulighed den mest pålidelige, og den holder henvendelserne et sted, hvor du kan se dem.

Hvad en god kontaktformular indeholder

• Så få felter som muligt. Navn, e-mail, besked. Tilføj en emnerulleliste ("Salg", "Support", "Andet") kun hvis du router efter den.
• Tydelige labels over hvert felt, ikke kun pladsholdertekst, der forsvinder.
• Hjælpsom validering: "Indtast en gyldig e-mailadresse", vist ved siden af feltet.
• En succestilstand, der siger, hvad der sker nu: "Tak — vi svarer inden for én arbejdsdag."
• En privatlivsnote om, hvordan du bruger oplysningerne, linket til din privatlivspolitik.
• En reserveløsning, som din e-mailadresse eller dit telefonnummer, til dem der foretrækker det.

Eksempelprompts

Den grundlæggende formular:

Tilføj en kontaktformular på kontaktsiden med navn, e-mail og besked (alle påkrævet, beskeden op til 2.000 tegn). Send den til en serverrute, der validerer input, gemmer den i en contact_messages-tabel med modtagetidspunkt og viser en succesbesked: "Tak, vi svarer inden for én arbejdsdag." Vis feltfejl inline. Gør den god at bruge på telefoner.

E-mailnotifikationer:

Når en kontaktbesked gemmes, send mig en notifikationsmail på hello@example.com via Resend med nøglen i RESEND_API_KEY. Sæt reply-to til afsenderens e-mail, så jeg kan svare direkte. Hvis afsendelsen fejler, behold den gemte besked og log fejlen uden at afsløre nøglen.

Spambeskyttelse:

Tilføj spambeskyttelse til kontaktformularen: et skjult honeypot-felt, der skal forblive tomt, en grænse på 5 indsendelser pr. IP pr. time på serveren, og afvis beskeder med mere end 3 links. Kassér honeypot-indsendelser stille, men vis stadig succes.

En indbakke:

Tilføj en adgangskodebeskyttet adminside, der lister kontaktbeskeder med de nyeste først, med et "behandlet"-afkrydsningsfelt og et filter for ubehandlede beskeder.

Trin for trin

1. Beslut hvor beskeder skal hen: hvem der modtager notifikationer, og hvem der svarer.
2. Byg formularen med felterne ovenfor, tilgængelige labels og mobilvenlige felter (brug e-mail-inputtypen, så telefoner viser det rigtige tastatur).
3. Opret serverruten. Den tjekker påkrævede felter, e-mailformat og længdegrænser. Stol aldrig kun på validering i browseren.
4. Gem i databasen først. Se sådan tilføjer du en database til din app.
5. Opsæt en e-mailudbyder. Opret en konto, verificér dit afsenderdomæne, og gem API-nøglen som en hemmelighed. Sådan sender du e-mails fra din app dækker domæneopsætning (SPF, DKIM) i detaljer.
6. Send notifikationen fra serveren efter lagring. Brug dit verificerede domæne som afsender og besøgendes adresse som reply-to — send ikke "fra" besøgendes adresse, for den vil sandsynligvis blive afvist som spoofing.
7. Valgfrit: automatisk svar til besøgende, men hold det kort; automatiske svar til spamadresser kan skade din afsenderreputation.
8. Tilføj spambeskyttelse: honeypot, hastighedsbegrænsning og derefter et CAPTCHA-lignende tjek, hvis det er nødvendigt.
9. Test på den udgivne side: send en besked, tjek databasen, tjek din indbakke og spamfolder, og klik på svar.

Stop spam

Kontaktformularer tiltrækker bots få dage efter, de går live. Læg forsvar på i lag, fra mindst til mest påtrængende:

1. Honeypot-felt. Et felt skjult for mennesker; bots udfylder det. Det koster ægte besøgende intet.
2. Hastighedsbegrænsning på serveren. Begrænser hvor mange beskeder én adresse kan sende i en periode.
3. Indholdsregler. Afvis beskeder proppet med links, eller med et beskedfelt, der er tomt eller absurd langt.
4. Et CAPTCHA-lignende tjek, såsom Cloudflare Turnstile eller Google reCAPTCHA. Tokenet skal verificeres på din server; et tjek, der kun kører i browseren, kan omgås.

Almindelige fejl

• At vise "Sendt!", når intet blev sendt. UI'en siger succes før eller uanset serverens svar. Vent altid på serveren.
• Kun e-mail, ingen database. Én forkert konfigureret nøgle, og henvendelser forsvinder i ugevis uden at nogen opdager det.
• API-nøgle i frontend-koden. Alle kan bruge den til at sende e-mail som dig.
• Ikke-verificeret afsenderdomæne. Notifikationer havner i spam eller kommer aldrig frem.
• At sende "fra" besøgendes e-mail. Brug reply-to i stedet.
• Ingen længdegrænser. Bots indsætter enorme tekstblokke.
• Aldrig at teste den live side. Nøgler og domæner er ofte forskellige mellem forhåndsvisning og produktion.

Tjekliste

• Kort formular med synlige labels og tydelige fejl
• Validering på serversiden og længdegrænser
• Hver besked gemt i databasen
• Notifikationsmail sendt fra et verificeret domæne, med reply-to sat
• E-mail-API-nøglen gemt kun i hemmeligheder på serversiden
• Honeypot og hastighedsbegrænsning på plads
• Succesbeskeden vises først, når serveren bekræfter
• Privatlivsnoten linker til din privatlivspolitik
• Testet fra ende til ende på den udgivne side, inklusive spamfolderen

Kontaktformularer i Mythex

På Mythex kan du bygge det hele fra chatten. Bed om formularen og en database i samme prompt (eller skriv /database), så indsendelser bliver gemt. Mythex har ikke et indbygget produkt til afsendelse af e-mail, så til notifikationer bruger du en udbyder som Resend, SendGrid eller Postmark, tilføjer dens nøgle med /secrets eller projektindstillinger, og beder agenten sende fra serveren — se Send e-mail fra din app. Før du stoler på det, så kør App Testing (/test) mod formularen i Preview, og udgiv derefter og test på den live URL.

En kontaktformular er en central del af de fleste små virksomheders hjemmesider og landingssider. Tjek sikkerhedstjeklisten før lancering.

Spørgsmål