Zo implementeer je formulieren op statische sites

Websites variëren in ontwerp, doel en complexiteit, maar zijn over het algemeen statisch of dynamisch. Statische sites zijn vooraf gerenderd en bieden dezelfde inhoud aan alle bezoekers. Door hun eenvoudige structuur zijn ze meestal eenvoudig te beheren en hebben ze snelle laadtijden. Aan de andere kant genereren dynamische sites inhoud met behulp van server-side programmeertalen.

Statische websites hebben geen native ondersteuning voor interactieve elementen zoals formulieren, omdat ze server-side verwerkingsfunctionaliteit nodig hebben, zoals gegevensopslag. Maar dit is niet altijd ideaal: formulieren zijn een communicatiekanaal met je gebruikers! Ze kunnen je helpen waardevolle feedback te verzamelen door middel van suggesties of vragen, zodat je de gebruikerservaring kunt verbeteren door de inhoud aan te passen.

Deze handleiding leidt je door de stappen van het maken van een formulier voor je statische site, het toevoegen van een formulierverwerkingsdienst en het implementeren van je site met behulp van Kinsta’s Static Site Hosting dienst.

Een formulierverwerkingsdienst kiezen

Een formulierverwerkingsservice is een derde partij die formuliergegevens voor statische websites verzamelt en verwerkt. Ze bieden de server-side infrastructuur die nodig is om formulierinzendingen af te handelen, waardoor de functionaliteit en interactiviteit van je sites wordt verbeterd terwijl de voordelen van een statische site behouden blijven.

Als een gebruiker een formulier indient, worden de gegevens naar het eindpunt van de formulierverwerkingsdienst gestuurd. De dienst verwerkt de gegevens, slaat ze veilig op en stuurt meldingen naar de juiste ontvangers.

Er zijn veel diensten voor formulierverwerking waar je uit kan kiezen. Laten we eens kijken naar de populairste.

1. Formspree

Formspree is een gebruiksvriendelijke dienst voor formulierverwerking die het toevoegen van formulieren en het beheren van formulierverzendingen op statische sites vereenvoudigt. Het biedt een gratis pakket met basic functies, zoals 50 formulierinzendingen per maand, en betaalde abonnementen met meer geavanceerde functies, zoals veilige vermelding en spambeveiliging.

2. Formbucket

FormBucket biedt een handige manier om formulierinzendingen te verzamelen en te beheren door ze op te slaan in “buckets”, elk met een unieke URL. Op de gebruiksvriendelijke dashboardpagina van Formbucket kun je velden definiëren en validatieregels voor formulieren instellen die passen bij de huisstijl van je website.

3. Getform

Getform is een backend platform voor formulieren dat een eenvoudige en veilige manier biedt om formulierinzendingen af te handelen. Getform biedt een intuïtieve gebruikersinterface voor het beheren van formulierinzendingen, e-mailmeldingen en integraties met populaire diensten zoals Slack en Google Sheets.

Een vergelijking van de diensten Formspree, Formbucket en Getform

Voor het gemak staat hieronder een tabel waarin de drie bovenstaande diensten en hun belangrijkste functies worden vergeleken:

Bij het kiezen van een dienst voor formulierverwerking moet je rekening houden met het integratiegemak, de gewenste functies, de prijs en de compatibiliteit met je hostingplatform. Evalueer de specifieke vereisten van je formulier en vergelijk elke formulierverwerkingsservice om de best passende voor je behoeften te vinden.

De formulierendienst instellen met Getform

Het gebruik van een formulierverwerkingsdienst zoals Getform kan het beheer van formulierinzendingen op je website aanzienlijk vereenvoudigen. Wanneer een gebruiker een formulier indient, neemt Getform het proces over, waardoor er geen backend API nodig is om deze inzendingen te verwerken en op te slaan.

Dankzij deze naadloze integratie kun je alle reacties efficiënt beheren binnen een speciale berichteninbox. Om te beginnen moet je zorgen dat je een basiskennis hebt van HTML, CSS en JavaScript en de volgende stappen volgen:

1. Meld je aan voor een Getform account.
2. Navigeer naar het dashboard van je Getform account en klik op de knop + Create.
3. In het dialoogvenster dat verschijnt, zorg ervoor dat Form is geselecteerd. Geef een beschrijvende eindpuntnaam op en selecteer de juiste tijdzone. Klik dan op Create.

   

   Getform genereert een URL voor het verzendformulier, die je moet toevoegen aan het action attribuut van je formulier element.

Je formulier maken met HTML en CSS

Nu je de dienst voor formulierafhandeling hebt ingesteld, kun je HTML, CSS en JavaScript gebruiken om je formulier te maken.

1. Maak in je terminal een projectmap aan met de naam forms en verander de huidige map in de map van het project:

   mkdir forms
   cd forms

2. Voeg de volgende projectbestanden toe:

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

3. Maak vervolgens een HTML formulier. In het kader van deze handleiding helpt de onderstaande code je bij het maken van een formulier met invoervelden voor een naam en een e-mailadres, een tekstgebied voor berichten en een verzendknop. Je kunt deze code toevoegen aan je index.html bestand:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. Navigeer naar het Getform dashboard en kopieer de URL van het eindpunt. Plak deze URL vervolgens in het action attribuut binnen de openingstag van je formulier in de HTML code.
5. Voeg tot slot CSS stijlen toe in het styles.css bestand om het ontwerp en uiterlijk van het formulier aan te passen.

Gegevensvalidatie implementeren met JavaScript

Gegevensvalidatie controleert of gebruikersinvoer voldoet aan specifieke criteria en validatieregels voordat het verwerkt of opgeslagen wordt.

Door gegevensvalidatie uit te voeren voorkom je dat je onjuiste of kwaadaardige gegevens invoert, krijg je gebruikers direct feedback over invoerfouten en zorg je ervoor dat alleen geldige gegevens verder worden verwerkt. Het speelt een vitale rol bij het behouden van de integriteit en nauwkeurigheid van gegevens.

Er zijn verschillende manieren om gegevensvalidatie te implementeren, waaronder het gebruik van JavaScript om validatie aan de clientzijde uit te voeren, validatie aan de serverzijde of een combinatie van beide benaderingen. In deze handleiding implementeren we validatie aan de kant van de client voor het contactformulier om ervoor te zorgen dat gebruikers geen lege velden invullen en dat het opgegeven e-mailadres het juiste format heeft.

1. Definieer eerst de validatiefunctie door de volgende code toe te voegen aan het script.js bestand:

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

   De functie validateForm() dient twee doelen: ten eerste controleert hij of de velden naam en bericht leeg zijn, vervolgens valideert hij het veld e-mail met behulp van een reguliere expressie en controleert hij of het e-mailadres een geldig format heeft.

   Als de velden leeg zijn of het e-mailformaat ongeldig is, wordt de functie geactiveerd en verschijnt er een waarschuwingsbericht. Omgekeerd, als alle formuliervelden deze validatiecontroles doorstaan, retourneert de functie true en wordt het formulier verzonden.

   Je kunt ook andere validatieregels toevoegen om de nauwkeurigheid en integriteit van de verzonden gegevens te waarborgen. Je kunt bijvoorbeeld de lengte van de gebruikersinvoer controleren of gebruikers beperken in het invoeren van bepaalde tekens in het bericht, om potentiële beveiligingsproblemen zoals injectieaanvallen te voorkomen.

2. Call vervolgens de bovenstaande functie om de validatie in te schakelen met behulp van een click event listener callback. Deze callback activeert de functie elke keer als een gebruiker op de Send knop klikt. Om de functie aan te roepen, voeg je de volgende code toe aan je script.js bestand:

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

   Let op dat de functie preventDefault() is opgenomen in de code om de standaard actie voor het indienen van het formulier te voorkomen. Op deze manier kun je het formulier valideren voordat je de informatie naar Getform verzendt.

   Ook wordt na de succesvolle validatie en verzending de functie resetFormAfterSubmission() geactiveerd, die het formulier na een halve seconde opnieuw instelt zodat er meer verzendingen kunnen plaatsvinden.

Je statische site deployen met Kinsta

Kinsta biedt een managed hostingoplossing, waarmee je verschillende webprojecten en databases kunt hosten. Met het gratis pakket kun je tot 100 statische sites direct vanuit GitHub, GitLab of Bitbucket hosten.

Om je statische site te deployen bij Kinsta, push je eerst je codes naar de Git provider van je voorkeur. Volg vervolgens deze stappen:

1. Log in op het MyKinsta dashboard.
2. Klik op het dashboard op het Dienst toevoegen uitklapmenu en selecteer Statische site.
3. Als je voor het eerst een project host bij Kinsta, selecteer en activeer dan de Git provider van je voorkeur.
4. Selecteer de repository van je project.
5. Selecteer de uit te rollen branch en geef een unieke sitenaam op.
6. Geef het hoofdpad op van de publicatiemap die de HTML bestanden en assets bevat voor de deployment door een punt toe te voegen.
7. Klik ten slotte op Site maken.

Binnen een paar seconden zal MyKinsta je site uitrollen.

Om het formulier naadloos te integreren in een bestaande site, kopieer en plak je de HTML van het formulier rechtstreeks in het gewenste deel van de site. Zorg ervoor dat je de bijbehorende CSS properties en JavaScript code meeneemt om een consistente styling en functionaliteit te garanderen.

Als alternatief kun je, omdat je het formulier al apart hebt geïmplementeerd, gebruikers de URL geven – als hyperlink of knop – waarop ze kunnen klikken om het formulier te openen.

Om de functionaliteit van de live site te testen, klik je op de URL van de site. Voer de gevraagde formulierinvoer in om te controleren of het formulier werkt zoals verwacht. Controleer of het formulier de invoer van de gebruiker valideert, waar nodig foutmeldingen weergeeft en geldige gegevens doorstuurt voor verdere verwerking.

Na het verzenden van het formulier zal Getform je doorverwijzen naar een bevestigings- of bedankpagina, om aan te geven dat de verzending succesvol was.

Om de reacties op het formulier te bekijken, navigeer je naar je Getform dashboard en bekijk je de inzendingen in de daarvoor bestemde berichten inbox.

Samenvatting

Nu je het formulier met succes hebt geïmplementeerd, zijn er talloze mogelijkheden om het aan te passen. Je kunt bijvoorbeeld het ontwerp en de functionaliteit van het formulier verbeteren door het verder te stylen met CSS of de preprocessortaal van je voorkeur en door geavanceerde validatietechnieken te implementeren.

Naast de Statische Site Hosting dienst biedt Kinsta ook een Applicatie Hosting dienst, ontworpen voor meer dynamische applicaties – zoals webapplicaties die server-side verwerking, databaseinteracties en andere complexe functionaliteiten nodig hebben.

Met toegang tot beide diensten krijgen gebruikers een uitgebreide hostingoplossing voor het beheren van een reeks webprojecten onder één ecosysteem, van eenvoudige statische sites tot complexe webapplicaties.

Je kunt je statische site nu omvormen tot een dynamische ervaring met diensten voor formulierverwerking. Welke dienst heeft jouw voorkeur of ervaring? Deel het hieronder in de comments.

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).

• LinkedIn