Sådan opretter du en kontaktformular ved hjælp af Formspree

Du kan bruge mange metoder på dit websted til at give brugere mulighed for sikkert at sende e-mails til dig. Et eksempel er at bruge mailto-attributten på en kontaktformular. Mailto-attributten åbner et installeret mailprogram, så brugeren kan indtaste en besked.

For en bedre oplevelse kan du overveje at integrere et værktøj som Formspree. Formspree fungerer som en mellemmand, registrerer formulardata og sender dem til din angivne e-mailadresse.

Hvad er Formspree, og hvordan virker det?

Formspree er en e-mail-tjeneste, som du kan integrere i en tilpasset kontaktformular. Når du logger på Formspree, kan du angive din mål-e-mailadresse for en formular. Formspree håndterer formularindsendelser på dine vegne. Det lader dig oprette en gratis kontaktformular, f.eks. Google Forms, men du hoster selve formularmarkeringen på dit eget websted.

Formspree genererer et slutpunkt, som du skal tilføje til din tilpassede formular. Når en bruger trykker på knappen "Send", vil formularen bruge slutpunktet til at kalde Formsprees API-tjeneste. Dette vil generere en e-mail med indholdet af kontaktformularen.

Formspree sender denne e-mail til den mål-e-mail, du har angivet på din Formspree-konto. Du vil herefter modtage mailen i din indbakke. Din Formspree-konto har også et sted, hvor du kan se dine afsendelser af kontaktformularer.

For at registrere din e-mail hos Formspree skal du logge ind og indtaste den ønskede e-mail-adresse for din formular.

1. Log ind Formspree. Hvis du ikke har en konto, skal du indtaste din e-mailadresse og en adgangskode. Tilmeld dig ved hjælp af den e-mailadresse, du vil have kontaktformularen til at sende indlæg til. Du skal muligvis også bekræfte denne e-mailadresse under tilmeldingsprocessen.
2. Når tilmeldingsprocessen er fuldført, åbnes siden "Formularer". Klik på Ny Form.
3. Indtast et hvilket som helst navn til din kontaktformular og forlad standardprojektindstillingerne. Indtast den ønskede e-mail-adresse i feltet "Send e-mails til". Det er her, Formspree sender dine kontaktformularer. Når du er færdig, klik på Opret formular.
4. Formspree vil give dig et slutpunkt og eksempler på, hvordan du bruger det. Du skal tilføje dette slutpunkt til din tilpassede kontaktformular på dit websted (mere om dette senere).
5. Som standard gemmer Formspree din formular under et projekt kaldet "Mit første projekt". Hvis du vil ændre navnet på denne, skal du gå tilbage til siden "Formularer". Klik på Indstillinger ved siden af ​​projektets navn.
6. Her kan du ændre navnet på dit projekt til noget andet. For eksempel kan du omdøbe den til at have samme navn som din hjemmeside. Du kan også tilføje URL'en til dit websted.

Du skal tilføje slutpunktet fra Formspree til kontaktformularen i dit websteds kode.

1. Tilføj slutpunktet til "action"-attributten for formularen. Dette vil få en brugers browser til at sende formularen til den pågældende URL, når de indsender den.

   <form handling="https://formspree.io/f/xjvlaqpe" metode="STOLPE">
   <!-- Din formular her ->
   <knaptype="Indsend" klasse="knap"> Indsend </button>
   </form>

2. Tilføj input til din formular. Du kan bruge denne eksempelformular, som bruger Bootstrap CSS-rammeværket:

   <form handling="https://formspree.io/f/mbjqjrdl" klasse="ekstra polstring" metode="STOLPE">
   <div klasse="form-gruppe">
   <etiket for="svar til"> Din email adresse </label>
   <input type="e-mail" klasse="form-kontrol" id="svar til" navn="_svar til" ngModel="svar" aria-beskrevet af="emailHjælp" pladsholder="[email protected]">
   <lille id="emailHjælp" klasse="form-tekst tekst-dæmpet"> Din e-mail vil ikke blive delt med andre. </small>
   </div>
   <div klasse="form-gruppe">
   <etiket for="besked"> Din besked </label>
   <tekstområdenavn="besked" stil="højde: 200px" klasse="form-kontrol" id="besked" pladsholder="Hej med dig! jeg'jeg kontakter dig fordi..."></textarea>
   </div>
   <knaptype="Indsend" klasse="knap"> Indsend </button>
   </form>
   

For at teste om Formspree virker, send dig selv en besked ved hjælp af kontaktformularen, tryk på Indsend, og tjek din e-mails indbakke.

1. Kør dit websted, og åbn den side, der har kontaktformularen. Indtast en besked i kontaktformularen og tryk Indsend.
2. Du vil modtage kontaktformularbeskeden i din indbakke.
3. Hvis du går tilbage til Formspree, skal du klikke på Indsendelser fanen. Her vil du også kunne se indsendte beskeder fra din kontaktformular.

Formspree er en af ​​de mange tjenester, du kan bruge til at integrere en tilpasset kontaktformular på dit websted. Det giver dig mulighed for hurtigt at begynde at acceptere brugerfeedback uden at skulle bekymre dig om backend-detaljerne.

Hvis du er ny til at oprette formularer med HTML og JavaScript, kan du også lære mere om formularvalidering på klientsiden. Dette er med til at sikre, at dine kontaktformularer kan validere alle brugerinput.

Om forfatteren

Sharlene Von Drehnen (9 artikler udgivet)

Sharlene er en Tech Writer hos MUO og arbejder også fuld tid med softwareudvikling. Hun har en bachelor i IT og har tidligere erfaring med kvalitetssikring og universitetsvejledning. Sharlene elsker at spille og spille klaver.

Mere fra Sharlene Von Drehnen