Slik legger du til et kontaktskjema på nettstedet ditt (som faktisk når deg)

For å legge til et kontaktskjema som fungerer, bygg et kort skjema (navn, e-post, melding), send det til en serverrute som validerer innputten, lagrer meldingen i en database, og sender deg deretter et varsel via en e-postleverandør med en hemmelig API-nøkkel. Legg til et skjult honeypot-felt og begrensning av hastighet for å stoppe det meste av spam, vis en tydelig suksessmelding, og test hele flyten på det publiserte nettstedet. Å lagre før du sender e-post er det viktige: hvis e-posten noen gang feiler, har du fortsatt henvendelsen.

Dine alternativer

Hvis nettstedet ditt allerede har en backend og en database — noe apper bygget med KI-appbyggere ofte har — er det siste alternativet det mest pålitelige, og det holder henvendelsene der du kan se dem.

Hva et godt kontaktskjema inneholder

• Så få felt som mulig. Navn, e-post, melding. Legg til en emnerullegardin («Salg», «Støtte», «Annet») bare hvis du skal rute etter den.
• Tydelige etiketter over hvert felt, ikke bare plassholdertekst som forsvinner.
• Nyttig validering: «Skriv inn en gyldig e-postadresse», vist ved siden av feltet.
• En suksesstilstand som sier hva som skjer videre: «Takk — vi svarer innen én arbeidsdag.»
• Et personvernnotat som forklarer hvordan du bruker opplysningene, med lenke til personvernerklæringen din.
• En reserveløsning som e-postadressen eller telefonnummeret ditt for folk som foretrekker det.

Eksempelprompter

Det grunnleggende skjemaet:

Legg til et kontaktskjema på kontaktsiden med navn, e-post og melding (alle påkrevd, meldingen opptil 2 000 tegn). Send til en serverrute som validerer innputten, lagrer den i en contact_messages-tabell med mottakstidspunkt, og viser en suksessmelding: «Takk, vi svarer innen én arbeidsdag.» Vis feil under hvert felt. Gjør det godt å bruke på telefon.

E-postvarsler:

Når en kontaktmelding lagres, send meg et varsel på e-post til hei@eksempel.no ved hjelp av Resend med nøkkelen i RESEND_API_KEY. Sett svar-til til avsenderens e-post slik at jeg kan svare direkte. Hvis sendingen feiler, behold den lagrede meldingen og logg feilen uten å eksponere nøkkelen.

Spambeskyttelse:

Legg til spambeskyttelse i kontaktskjemaet: et skjult honeypot-felt som må være tomt, en grense på 5 innsendinger per IP per time på serveren, og avvis meldinger med mer enn 3 lenker. Forkast honeypot-innsendinger stille, men vis fortsatt suksess.

En innboks:

Legg til en passordbeskyttet adminside som lister kontaktmeldinger, nyeste først, med en «behandlet»-avkrysning og et filter for ubehandlede meldinger.

Steg for steg

1. Bestem hvor meldingene skal gå: hvem som mottar varsler, og hvem som svarer.
2. Bygg skjemaet med feltene over, tilgjengelige etiketter og mobilvennlige inndatafelt (bruk e-postinndatatypen slik at telefoner viser riktig tastatur).
3. Lag serverruten. Den sjekker påkrevde felt, e-postformat og lengdegrenser. Stol aldri på validering som bare kjører i nettleseren.
4. Lagre i databasen først. Se slik legger du til en database i appen din.
5. Sett opp en e-postleverandør. Opprett en konto, verifiser avsenderdomenet ditt, og lagre API-nøkkelen som en hemmelighet. Slik sender du e-post fra appen din dekker domeneoppsett (SPF, DKIM) i detalj.
6. Send varselet fra serveren etter lagring. Bruk ditt verifiserte domene som avsender og besøkendes adresse som svar-til — ikke send «fra» besøkendes adresse, for da blir den sannsynligvis avvist som forfalsking.
7. Svar automatisk til besøkende hvis du vil, men hold det kort; automatiske svar til spamadresser kan skade avsenderrykteet ditt.
8. Legg til spambeskyttelse: honeypot, begrensning av hastighet, deretter en CAPTCHA-lignende sjekk hvis det trengs.
9. Test på det publiserte nettstedet: send inn, sjekk databasen, sjekk innboksen og spam-mappen, klikk svar.

Stopp spam

Kontaktskjemaer tiltrekker seg roboter innen dager etter lansering. Legg på forsvar fra minst til mest påtrengende:

1. Honeypot-felt. Et felt skjult for mennesker; roboter fyller det ut. Det koster ekte besøkende ingenting.
2. Begrensning av hastighet på serveren. Begrenser hvor mange meldinger én adresse kan sende i en periode.
3. Innholdsregler. Avvis meldinger fylt med lenker, eller med et meldingsfelt som er tomt eller absurd langt.
4. En CAPTCHA-lignende sjekk, for eksempel Cloudflare Turnstile eller Google reCAPTCHA. Tokenet må verifiseres på serveren din; en sjekk som bare kjører i nettleseren kan omgås.

Vanlige feil

• Å vise «Sendt!» når ingenting ble sendt. Grensesnittet sier suksess før eller uavhengig av serverens svar. Vent alltid på serveren.
• Bare e-post, ingen database. Én feilkonfigurert nøkkel, og henvendelser forsvinner i ukevis uten at noen merker det.
• API-nøkkel i frontend-kode. Hvem som helst kan bruke den til å sende e-post som deg.
• Ikke-verifisert avsenderdomene. Varsler havner i spam eller kommer aldri frem.
• Å sende «fra» besøkendes e-post. Bruk svar-til i stedet.
• Ingen lengdegrenser. Roboter limer inn enorme tekstblokker.
• Aldri teste det live nettstedet. Nøkler og domener er ofte forskjellige mellom forhåndsvisning og produksjon.

Sjekkliste

• Kort skjema med synlige etiketter og tydelige feil
• Validering og lengdegrenser på serveren
• Hver melding lagret i databasen
• Varsel-e-post sendt fra et verifisert domene, med svar-til satt
• E-post-API-nøkkel lagret kun som hemmeligheter på serveren
• Honeypot og begrensning av hastighet på plass
• Suksessmelding vises først etter at serveren har bekreftet
• Personvernnotat lenker til personvernerklæringen din
• Testet fra start til slutt på det publiserte nettstedet, inkludert spam-mappen

Kontaktskjemaer i Mythex

I Mythex kan du bygge hele dette fra chatten. Be om skjemaet og en database i samme prompt (eller skriv /database) slik at innsendinger lagres. Mythex har ikke et innebygd produkt for å sende e-post, så for varsler tar du med en leverandør som Resend, SendGrid eller Postmark, legger til nøkkelen med /secrets eller prosjektinnstillinger, og ber agenten sende fra serveren — se Send e-post fra appen din. Før du stoler på det, kjør App Testing (/test) mot skjemaet i Preview, deretter publiser og test på den live URL-en.

Et kontaktskjema er en nøkkeldel av de fleste småbedriftsnettsteder og landingssider. Sjekk sikkerhetssjekklisten før lansering.

Spørsmål