Hvordan lage et kontaktskjema ved hjelp av Formspree

Du kan bruke mange metoder på nettstedet ditt for å tillate brukere å sende e-poster til deg på en sikker måte. Et eksempel er å bruke mailto-attributtet på et kontaktskjema. Mailto-attributtet åpner et installert e-postprogram slik at brukeren kan skrive inn en melding.

For en bedre opplevelse bør du vurdere å integrere et verktøy som Formspree. Formspree fungerer som en mellommann, registrerer skjemadata og sender dem til din spesifiserte e-postadresse.

Hva er Formspree og hvordan fungerer det?

Formspree er en e-posttjeneste som du kan integrere i et tilpasset kontaktskjema. Når du logger på Formspree, kan du spesifisere mål-e-postadressen for et skjema. Formspree håndterer skjemainnsendinger på dine vegne. Det lar deg opprette et gratis kontaktskjema, som Google Forms, men du er vert for selve skjemaoppmerkingen på ditt eget nettsted.

Formspree vil generere et endepunkt, som du må legge til i det tilpassede skjemaet. Når en bruker trykker på «Send»-knappen, vil skjemaet bruke endepunktet til å ringe Formsprees API-tjeneste. Dette vil generere en e-post med innholdet i kontaktskjemaet.

Formspree sender denne e-posten til mål-e-posten du har oppført i Formspree-kontoen din. Du vil da motta e-posten i innboksen din. Formspree-kontoen din har også et sted hvor du kan se kontaktskjemainnsendingene dine.

For å registrere e-posten din med Formspree, logg inn og skriv inn mål-e-postadressen for skjemaet.

1. Logg på Formspree. Hvis du ikke har en konto, må du skrive inn e-postadressen din og et passord. Registrer deg med e-postadressen du vil at kontaktskjemaet skal sende innsendinger til. Du må kanskje også bekrefte denne e-postadressen under registreringsprosessen.
2. Når registreringsprosessen er fullført, åpnes "Skjemaer"-siden. Klikk på Nytt skjema.
3. Skriv inn et hvilket som helst navn for kontaktskjemaet ditt og la standard prosjektinnstillingene stå. Skriv inn mål-e-postadressen i "Send e-poster til"-feltet. Det er her Formspree vil sende kontaktskjemainnsendingene dine. Når du er ferdig, klikker du på Lag skjema.
4. Formspree vil gi deg et endepunkt og eksempler på hvordan du bruker det. Du må legge til dette endepunktet i ditt tilpassede kontaktskjema på nettstedet ditt (mer om dette senere).
5. Som standard lagrer Formspree skjemaet ditt under et prosjekt kalt "Mitt første prosjekt". Hvis du ønsker å endre navnet på denne, gå tilbake til "Skjemaer"-siden. Klikk på Innstillinger ved siden av navnet på prosjektet.
6. Her kan du endre navnet på prosjektet ditt til noe annet. Du kan for eksempel gi det samme navn som nettstedet ditt. Du kan også legge til URL-en til nettstedet ditt.

Du må legge til endepunktet gitt av Formspree i kontaktskjemaet i nettstedets kode.

1. Legg til endepunktet i "action"-attributtet for skjemaet. Dette vil føre til at en brukers nettleser sender skjemaet til den nettadressen når de sender det.

   <form handling="https://formspree.io/f/xjvlaqpe" metode="POST">
   <!-- Skjemaet ditt her -->
   <knapp type="sende inn" klasse="knapp"> Sende inn </button>
   </form>

2. Legg til inndata i skjemaet ditt. Du kan bruke dette eksempelskjemaet som bruker Bootstrap CSS-rammeverket:

   <form handling="https://formspree.io/f/mbjqjrdl" klasse="ekstra polstring" metode="POST">
   <div klasse="form-gruppe">
   <merke for="svare på"> Din epostadresse </label>
   <input type="e-post" klasse="form-kontroll" id="svare på" navn="_svare på" ngModel="svare" aria-beskrevet av="e-postHjelp" plassholder="[email protected]">
   <liten id="e-postHjelp" klasse="form-tekst tekst-dempet"> E-posten din vil ikke bli delt med noen andre. </small>
   </div>
   <div klasse="form-gruppe">
   <merke for="beskjed"> Din beskjed </label>
   <tekstområdenavn="beskjed" stil="høyde: 200px" klasse="form-kontroll" id="beskjed" plassholder="Hei der! Jeg'jeg kontakter deg fordi..."></textarea>
   </div>
   <knapp type="sende inn" klasse="knapp"> Sende inn </button>
   </form>
   

For å teste om Formspree fungerer, send deg selv en melding ved å bruke kontaktskjemaet, trykk Sende inn, og sjekk e-postens innboks.

1. Kjør nettstedet ditt og åpne siden som har kontaktskjemaet. Skriv inn en melding i kontaktskjemaet og trykk Sende inn.
2. Du vil motta kontaktskjemameldingen i innboksen din.
3. Hvis du går tilbake til Formspree, klikker du på Innleveringer fanen. Her vil du også kunne se innsendte meldinger fra kontaktskjemaet ditt.

Formspree er en av de mange tjenestene du kan bruke for å integrere et tilpasset kontaktskjema på nettstedet ditt. Den lar deg raskt begynne å godta tilbakemeldinger fra brukere uten å måtte bekymre deg for backend-detaljene.

Hvis du er ny på å lage skjemaer med HTML og JavaScript, kan du også lære mer om skjemavalidering på klientsiden. Dette bidrar til å sikre at kontaktskjemaene dine kan validere alle brukerinndata.

Om forfatteren

Sharlene Von Drehnen (9 artikler publisert)

Sharlene er teknisk skribent ved MUO og jobber også fulltid innen programvareutvikling. Hun har en bachelor i IT og har tidligere erfaring innen kvalitetssikring og universitetsveiledning. Sharlene elsker å spille og spille piano.

Mer fra Sharlene Von Drehnen