Vijf werkende manieren om formulierinzendingen van uw website in uw inbox te krijgen: mailto, een formulier-endpointdienst, Netlify Forms, een serverless functie met een e-mail-API, en Google Apps Script. Met JavaScript-verzendcode en spambeveiliging.
Een webpagina kan zelf geen e-mail versturen. Het formulier moet zijn gegevens versturen naar iets dat dat wel kan: een formulier-endpointdienst, de formulierfunctie van uw host, een serverless functie die een e-mail-API aanroept, een Google Apps Script of uw eigen server. Kies op basis van hoeveel controle u nodig hebt, en verstuur met JavaScript zodat bezoekers op de pagina blijven.
De vijf methodes vergeleken
Elke methode hieronder heeft volledige code. Begin met het formulier en de JavaScript-verzendhandler, die met elke methode werken, en kies dan een backend.
Alleen met een mailto:-action, die de eigen e-mailapp van de bezoeker opent met de gegevens ingevuld. Het werkt niet voor iemand zonder ingestelde mailapp, waaronder veel mensen op gedeelde of werkcomputers, en u kunt het resultaat niet opmaken of valideren. Gebruik voor alles wat belangrijk is een van de andere methodes.
Meestal omdat het bericht beweert van het adres van de bezoeker te komen, of omdat uw domein geen SPF-, DKIM- en DMARC-records heeft voor de dienst die het verstuurt. Verstuur vanaf een adres op uw eigen domein, zet de bezoeker als reply-to en voeg de DNS-records toe die uw e-mailprovider u geeft.
Een veld dat verborgen is voor mensen maar zichtbaar voor eenvoudige bots. Mensen laten het leeg; bots vullen het in. Uw backend negeert elke inzending waarin het een waarde heeft. Het houdt veel eenvoudige spam tegen zonder echte bezoekers lastig te vallen.
In het begin niet. Begin met een honeypot en controles aan de serverkant, zoals het weigeren van berichten vol links. Voeg pas een uitdaging toe als de spam blijft komen, en kies liefst een die mensen geen puzzels laat oplossen.
Deze front-end werkt met elke methode. Het script verstuurt het formulier met fetch, toont een statusmelding en bewaart de tekst als het versturen mislukt.
Labels omvatten hun invoervelden, de browser controleert verplichte velden en het e-mailformaat, en de statusregel wordt voorgelezen door schermlezers.
Werkt met elk endpoint dat een normale formulier-post accepteert. Verwacht het endpoint JSON, verstuur dan JSON.stringify(Object.fromEntries(data)) met een JSON-content type.
Opent de e-mailapp van de bezoeker met de velden in de body. Geen server nodig, maar er wordt niets verstuurd als de bezoeker geen mailapp heeft.
Diensten zoals Formspree, Basin, Getform en Web3Forms geven u een URL om naartoe te posten en sturen elke inzending door naar uw inbox. Meld u aan, maak een formulier, plak de URL in het action-attribuut van het formulier hierboven en houd het fetch-script. Controleer van elke dienst de huidige gratis limieten en waar hij gegevens opslaat.
Netlify herkent het formulier tijdens de deploy wanneer het het data-netlify-attribuut heeft. Zet e-mailmeldingen aan in de formulierinstellingen van de site. Bij formulieren die met JavaScript worden gerenderd, houdt u ook een gewone HTML-kopie in uw gebouwde bestanden zodat Netlify het kan vinden.
De functie ontvangt het formulier, controleert het en roept een e-mail-API aan met een geheime sleutel die op de server blijft. Dit voorbeeld gebruikt de REST-API van Resend; SendGrid, Postmark en Amazon SES werken op dezelfde manier met hun eigen endpoints.
Werkt op platforms die de web-objecten Request en Response gebruiken. Stel RESEND_API_KEY in bij de omgevingsvariabelen van uw host en verifieer eerst uw verzenddomein bij de e-mailprovider.
Een kort script, vanuit een Google-account als web-app gedeployed, mailt elke inzending en kan die in een Sheet vastleggen. Er gelden dagelijkse e-mailquota, dus het past bij formulieren met weinig volume.
Plak dit in een nieuw Apps Script-project en deploy het als web-app die als u draait en voor iedereen toegankelijk is. Gebruik de URL van de web-app als formulier-action.
Shared hosting draait vaak PHP. De ingebouwde functie mail() werkt bij veel hosts, maar de bezorging is beter met een SMTP-bibliotheek zoals PHPMailer en een echte mailbox op uw domein.
Weigert verzoeken die geen POST zijn, verwijdert witruimte uit invoer, weigert regeleinden in het antwoordadres (waarmee aanvallers headers zouden kunnen toevoegen) en stuurt door naar een bedankpagina.
Gratis beginnen · Geen creditcard nodig