Een contactformulier maken met Formspree

U kunt op uw website veel methoden gebruiken om gebruikers in staat te stellen veilig e-mails naar u te verzenden. Een voorbeeld is het gebruik van het mailto-attribuut op een contactformulier. Het kenmerk mailto opent een geïnstalleerde e-mailtoepassing waarin de gebruiker een bericht kan invoeren.

Overweeg voor een betere ervaring een tool als Formspree te integreren. Formspree treedt op als tussenpersoon, registreert formuliergegevens en stuurt deze naar het door u opgegeven e-mailadres.

Wat is Formspree en hoe werkt het?

Formspree is een e-mailservice die u kunt integreren in een aangepast contactformulier. Wanneer u zich aanmeldt bij Formspree, kunt u uw doel-e-mailadres voor een formulier opgeven. Formspree behandelt formulierinzendingen namens u. Het laat je

Formspree genereert een eindpunt, dat u aan uw aangepaste formulier moet toevoegen. Wanneer een gebruiker op de knop "Verzenden" drukt, gebruikt het formulier het eindpunt om de API-service van Formspree aan te roepen. Dit genereert een e-mail met de inhoud van het contactformulier.

Formspree stuurt deze e-mail naar het doel-e-mailadres dat u in uw Formspree-account hebt vermeld. Je ontvangt de e-mail dan in je inbox. Uw Formspree-account heeft ook een plaats waar u de inzendingen van uw contactformulier kunt bekijken.

Om uw e-mail bij Formspree te registreren, logt u in en voert u het doel-e-mailadres voor uw formulier in.

1. Inloggen Formspree. Als u geen account heeft, moet u uw e-mailadres en een wachtwoord invoeren. Registreer u met het e-mailadres waarnaar u het contactformulier wilt verzenden. Mogelijk moet u dit e-mailadres ook verifiëren tijdens het aanmeldingsproces.
2. Zodra het aanmeldingsproces is voltooid, wordt de pagina "Formulieren" geopend. Klik op Nieuw formulier.
3. Voer een naam in voor uw contactformulier en laat de standaard projectinstellingen staan. Voer het doel-e-mailadres in het veld "Stuur e-mails naar" in. Dit is waar Formspree uw contactformulierinzendingen naartoe stuurt. Als u klaar bent, klikt u op Formulier maken.
4. Formspree geeft u een eindpunt en voorbeelden van hoe u dit kunt gebruiken. U moet dit eindpunt toevoegen aan uw aangepaste contactformulier op uw website (hierover later meer).
5. Formspree slaat uw formulier standaard op onder een project met de naam "Mijn eerste project". Als je de naam hiervan wilt wijzigen, ga dan terug naar de pagina "Formulieren". Klik op Instellingen naast de naam van het project.
6. Hier kunt u de naam van uw project wijzigen in iets anders. U kunt het bijvoorbeeld hernoemen zodat het dezelfde naam heeft als uw website. U kunt ook de URL voor uw website toevoegen.

U moet het door Formspree geleverde eindpunt toevoegen aan het contactformulier in de code van uw website.

1. Voeg het eindpunt toe aan het attribuut 'action' voor het formulier. Dit zorgt ervoor dat de browser van een gebruiker het formulier naar die URL stuurt wanneer hij het verzendt.

   <vorm actie="https://formspree.io/f/xjvlaqpe" methode="NA">
   <!-- Uw formulier hier -->
   <knoptype="indienen" klasse="knop"> Indienen </button>
   </form>

2. Voeg invoer toe aan uw formulier. U kunt dit voorbeeldformulier gebruiken dat gebruikmaakt van het Bootstrap CSS-framework:

   <vorm actie="https://formspree.io/f/mbjqjrdl" klasse="extra vulling" methode="NA">
   <div klasse="vormgroep">
   <label voor="antwoord aan"> Jouw e-mailadres </label>
   <invoertype="e-mail" klasse="vorm-controle" id="antwoord aan" naam="_antwoord aan" ngModel="antwoord" aria-descriptionby="e-mailHelp" placeholder="[email protected]">
   <kleine id="e-mailHelp" klasse="formulier-tekst tekst-gedempt"> Je e-mailadres wordt met niemand anders gedeeld. </small>
   </div>
   <div klasse="vormgroep">
   <label voor="bericht"> Jouw bericht </label>
   <tekstgebied naam="bericht" stijl="hoogte: 200px" klasse="vorm-controle" id="bericht" placeholder="Hoi! l'Ik neem contact met je op omdat..."></textarea>
   </div>
   <knoptype="indienen" klasse="knop"> Indienen </button>
   </form>
   

Om te testen of Formspree werkt, stuur jezelf een bericht via het contactformulier, druk op Indienenen controleer de inbox van uw e-mail.

1. Start uw website en open de pagina met het contactformulier. Voer een bericht in het contactformulier in en druk op Indienen.
2. U ontvangt het contactformulier in uw inbox.
3. Als u teruggaat naar Formspree, klikt u op de Inzendingen tabblad. Hier kunt u ook verzonden berichten van uw contactformulier zien.

Formspree is een van de vele services die u kunt gebruiken om een ​​aangepast contactformulier op uw site te integreren. Hiermee kunt u snel beginnen met het accepteren van gebruikersfeedback zonder dat u zich zorgen hoeft te maken over de backend-details.

Als u nog niet bekend bent met het maken van formulieren met HTML en JavaScript, kunt u ook meer te weten komen over formuliervalidatie aan de clientzijde. Dit helpt ervoor te zorgen dat uw contactformulieren alle gebruikersinvoer kunnen valideren.

Over de auteur

Sharlene von Drehnen (9 artikelen gepubliceerd)

Sharlene is een Tech Writer bij MUO en werkt ook fulltime in Software Development. Ze heeft een Bachelor of IT en heeft eerdere ervaring in kwaliteitszorg en universitaire bijles. Sharlene houdt van gamen en piano spelen.

Meer van Sharlene Von Drehnen