Hur man skapar ett kontaktformulär med Formspree

Du kan använda många metoder på din webbplats för att tillåta användare att säkert skicka e-post till dig. Ett exempel är att använda attributet mailto på ett kontaktformulär. Mailto-attributet öppnar ett installerat e-postprogram så att användaren kan skriva in ett meddelande.

För en bättre upplevelse, överväg att integrera ett verktyg som Formspree. Formspree fungerar som en mellanhand, registrerar formulärdata och skickar den till din angivna e-postadress.

Vad är Formspree och hur fungerar det?

Formspree är en e-posttjänst som du kan integrera i ett anpassat kontaktformulär. När du loggar in på Formspree kan du ange din måladress för ett formulär. Formspree hanterar formulärinlämningar för din räkning. Det låter dig skapa ett gratis kontaktformulär, som Google Forms

Formspree genererar en slutpunkt som du måste lägga till i ditt anpassade formulär. När en användare trycker på "Skicka"-knappen kommer formuläret att använda slutpunkten för att anropa Formsprees API-tjänst. Detta genererar ett e-postmeddelande med innehållet i kontaktformuläret.

Formspree skickar det här e-postmeddelandet till den e-postadress som du angav i ditt Formspree-konto. Du får då mejlet i din inkorg. Ditt Formspree-konto har också en plats där du kan se dina inskickade kontaktformulär.

För att registrera din e-post med Formspree, logga in och ange måladressen för ditt formulär.

1. Logga in Formspree. Om du inte har ett konto måste du ange din e-postadress och ett lösenord. Registrera dig med den e-postadress du vill att kontaktformuläret ska skicka bidrag till. Du kan också behöva verifiera den här e-postadressen under registreringsprocessen.
2. När registreringsprocessen är klar öppnas sidan "Formulär". Klicka på Nytt formulär.
3. Ange vilket namn som helst för ditt kontaktformulär och lämna standardinställningarna för projektet. Ange måladressen i fältet "Skicka e-postmeddelanden till". Det är hit Formspree skickar dina kontaktformulär. När du är klar klickar du på Skapa formulär.
4. Formspree ger dig en slutpunkt och exempel på hur du använder den. Du måste lägga till denna slutpunkt i ditt anpassade kontaktformulär på din webbplats (mer om detta senare).
5. Som standard lagrar Formspree ditt formulär under ett projekt som heter "Mitt första projekt". Om du vill ändra namnet på detta, gå tillbaka till sidan "Formulärer". Klicka på inställningar bredvid projektets namn.
6. Här kan du ändra namnet på ditt projekt till något annat. Du kan till exempel byta namn på den för att ha samma namn som din webbplats. Du kan också lägga till webbadressen till din webbplats.

Du måste lägga till slutpunkten från Formspree i kontaktformuläret i din webbplats kod.

1. Lägg till slutpunkten i "action"-attributet för formuläret. Detta gör att en användares webbläsare skickar formuläret till den webbadressen när de skickar in det.

   <form action="https://formspree.io/f/xjvlaqpe" metod="POSTA">
   <!-- Ditt formulär här ->
   <knapptyp="Skicka in" klass="knapp"> Skicka in </button>
   </form>

2. Lägg till indata i ditt formulär. Du kan använda detta exempelformulär som använder Bootstrap CSS-ramverket:

   <form action="https://formspree.io/f/mbjqjrdl" klass="extra stoppning" metod="POSTA">
   <div klass="form-grupp">
   <etikett för="svara till"> Din e-postadress </label>
   <ingångstyp="e-post" klass="form-kontroll" id="svara till" namn="_svara till" ngModel="svar" aria-describedby="e-posthjälp" platshållare="[email protected]">
   <litet id="e-posthjälp" klass="form-text text-dämpad"> Din e-post kommer inte att delas med någon annan. </small>
   </div>
   <div klass="form-grupp">
   <etikett för="meddelande"> Ditt meddelande </label>
   <textområdesnamn="meddelande" stil="höjd: 200px" klass="form-kontroll" id="meddelande" platshållare="Hallå där! jag'jag kontaktar dig för att..."></textarea>
   </div>
   <knapptyp="Skicka in" klass="knapp"> Skicka in </button>
   </form>
   

För att testa om Formspree fungerar, skicka ett meddelande till dig själv via kontaktformuläret, tryck Skicka in, och kontrollera din e-postkorg.

1. Kör din webbplats och öppna sidan som har kontaktformuläret. Skriv ett meddelande i kontaktformuläret och tryck Skicka in.
2. Du kommer att få kontaktformuläret i din inkorg.
3. Om du går tillbaka till Formspree, klicka på Inlämningar flik. Här kommer du även att kunna se inskickade meddelanden från ditt kontaktformulär.

Formspree är en av många tjänster du kan använda för att integrera ett anpassat kontaktformulär på din webbplats. Det låter dig snabbt börja acceptera användarfeedback utan att behöva oroa dig för backend-detaljerna.

Om du är ny på att skapa formulär med HTML och JavaScript kan du också lära dig mer om formulärvalidering på klientsidan. Detta hjälper till att säkerställa att dina kontaktformulär kan validera all användarinmatning.

Om författaren

Sharlene Von Drehnen (9 publicerade artiklar)

Sharlene är en Tech Writer på MUO och arbetar även heltid med mjukvaruutveckling. Hon har en kandidatexamen i IT och har tidigare erfarenhet av kvalitetssäkring och universitetshandledning. Sharlene älskar att spela och spela piano.

Mer från Sharlene Von Drehnen