Zoals ik in de 4 weken online review al schreef, was een contactformulier iets wat ik graag op de korte termijn aan Bits+Bites wilde toevoegen. Inmiddels is de contactpagina geïmplementeerd. Hoe? Dat lees je hier.
Een contactpagina toevoegen
Statische pagina in Hugo
Hugo werkt voornamelijk goed om meerdere pagina’s van hetzelfde type aan te maken. Mijn idee was om maar op één pagina een contactformulier te plaatsen. Om in Hugo een statisch contactformulier aan te maken zijn de volgende dingen nodig:
- content/contact.md
- content/thanks.md
- themes/myTheme/layouts/contact/single.html
content/contact.md bevat de tekst die ik op de pagina wil tonen. Dit kan ook in het thema, maar door het op deze manier te doen blijven content en vormgeving beter van elkaar gescheiden. Daarnaast heeft Hugo een *.md-bestand nodig om de pagina te kunnen genereren.
content/thanks.md wordt gebruikt om een bedankje te kunnen weergeven nadat iemand het formulier heeft verstuurd. Omdat dit verder geen speciale vormgeving vereist, lift deze mee op de layout voor posts van het type article.
In themes/myTheme/layouts/contact/single.html zijn de elementen van het formulier en de layout gedefinieerd.
Tailwind Forms
De vormgeving van Bits+Bites is gemaakt met Tailwind CSS. Door dit te gebruiken was Bits+Bites een stuk sneller klaar om te publiceren. Door alle styling in de HTML mee te geven, hoef je zelf niet meer uitgebreid CSS te schrijven.
Tailwind zelf heeft niets ingebouwd voor het vormgeven van formulieren. Wel is er de plugin @tailwindcss/forms om de styling van een formulier makkelijker te maken. Het geeft een basisvormgeving, die eenvoudig zelf aan te passen is. Ook kun je hiermee specifieke elementen zoals <select> makkelijk vormgeven, zonder dat je daarvoor in Tailwind custom CSS hoeft te maken.
Formulieren verwerken
Er zijn verschillende manieren om ingevulde formulieren te verwerken. Het is mogelijk om daar zelf iets voor te bouwen, maar er zijn ook partijen die een kant-en-klare oplossing aanbieden. Het voordeel hiervan is dat er een spamfilter is ingebouwd. Daarnaast hoef je je ook geen zorgen te maken over de afhandeling en eventuele opslag van ingevulde formulieren. Voorbeelden hiervan zijn getform en FormKeep. Beide partijen bieden een gratis versie waarbij het formulier 50 keer per maand verstuurd kan worden. Voor beide partijen geldt wel dat er reclame voor de betreffende partij op het bedankt-bericht wordt geplaatst. Een abonnement voor [getform] begint bij $10 per maand, terwijl [FormKeep] een “Essential” abonnement aanbiedt voor $4.99 per maand.
Nu is het nodig om voor een oplossing als getform of FormKeep daar een account voor aan te maken. Bits+Bites wordt echter gehost op Netlify (wat het leven echt veel makkelijker maakt, maar daarover in een latere post waarschijnlijk meer ;)), waarbij het ook mogelijk is om formulieren te verwerken. Dit is gratis voor de eerste 100 inzendingen, waarna het met $19 per maand wel een stuk duurder wordt. Netlify Forms heeft ook standaard een spamfilter ingebouwd. Daarnaast zijn er nog vrij eenvoudig twee andere anti-spam maatregelen te implementeren: een honeypot-veld en een reCAPTCHA. Een honeypot-veld is een extra veld in je formulier, die verborgen is voor eindgebruikers. Bots vullen het veld automatisch in, waarna Netlify weet dat het het bericht kan negeren. Een reCAPTCHA kent iedereen wel: een soort puzzeltje dat je moet oplossen voordat je een formulier kunt verzenden.
Doordat Bits+Bites al gehost wordt op Netlify, was implementeren erg eenvoudig. Het enige wat ervoor nodig is om het formulier naar Netlify te sturen, is door het formulier aan te maken met het attribuut data-netlify="true". Bij het bouwen van de website herkent Netlify het attribuut, en zet het om zodat de formulieren door Netlify verwerkt kunnen worden. Daar hoef je zelf verder niets meer voor te doen. De ingevulde formulieren komen vervolgens binnen bij het overzicht van je Site in Netlify. Daar kun je ook instellen om een e-mail te ontvangen als een formulier is ingezonden.