Headless Drupal | Een contact formulier in Node.js

14 Oct 2015

Joris Snoek - Business Dev
+31 (0)20 - 261 14 99

English translation here

Zoals eerder aangegeven: een headless Drupal installatie heeft ook zo zijn uitdagingen. Neem bijvoorbeeld formulieren: Drupal heeft een fantastische form api, waarmee het vele cms’en achter zich laat. Die api heb je dus niet zo makkelijk beschikbaar als je het front-end decoupled in node.js hebt draaien.

In ons geval hadden we een relatief eenvoudig lead formulier nodig, die onder andere op de contact pagina staat. Deze hebben we dus op maat in Node.js moeten maken, hier is hoe we dat gedaan hebben:

Voor de basis installatie, check de headless Drupal & Node.js series.

Een eenvoudig contactform in Node.js / Express JS

Om te beginnen, schrijven we het formulier zelf in html, yes: back to basic als je geen Drupal form api tot je beschikking hebt :-). In deze HTML zie je tevens server-side Javascript wat ondersteunt wordt door Node.js :

Dit is html formulier bouwen 101, ik ga er even vanuit dat deze opmaak geen toelichting nodig heeft. If so, check dit.

Verder zie je dat bij (A) feedback berichten worden gegenereerd, die dynamisch worden getoond met behulp van server-side Javascript. En je ziet bij (C) dat ingevoerde gegevens bewaard worden. Zodra het formulier bijvoorbeeld niet valideert, dan hoeven gebruikers niet nog een keer hun gegevens in te voeren. Beide worden aangestuurd aan de hand van de feedback uit de ‘main app file’ hieronder.

Zoals je ziet post dit formulier naar url ‘/contact’ (B). Die post moeten we dus gaan afvangen in onze Node.js / Express JS installatie. Dat doen we op volgende manier in in de ‘main app file’ van de Node.js installatie:

(1) Importeer de ‘nodemailer’ npm module

Voor een toelichting over npm modules, check deze part 1.

Je wilt graag de ingevoerde gegevens ergens naar toe mailen, hiervoor hebben we de populaire nodemailer npm module gebruikt. Deze module maakt het je makkelijk om via smtp emails te versturen. Installeer dus die module en importeer hem in je project mbv var nodemailer = require('nodemailer');

app.post

app.post('/contact', function (req, res) {...});

Met behulp van deze code kan je post data afvangen die naar dit specifieke pad wordt gestuurd, in ons geval dus ‘/contact’.

(2) Honeypot voor beveiliging tegen spambots

We hadden dit formulier live geplaatst zonder deze code. Big mistake uiteraard, want binnen enkele dagen werden we overladen met spam. Deze honeypot lost dit vooralsnog op, de toepassing ervan:

Zoals je kunt zien in het front-end formulier zijn er 3 zichtbare velden. Maar onder water is er een 4e: ‘bedrijfsnaam’, die middels css wordt verstopt voor ‘menselijke’ bezoekers: echte gebruikers zullen deze dus niet zien en dus nooit invullen, spambots wel.

Zodra ‘bedrijfsnaam’ dus ingevuld is weten we dat het een spambot is en kappen we direct de hele operatie.

(3) Check of alles ingevoerd is

Het formulier is HTML5 en checkt inline al of velden ingevoerd zijn,nog voordat hij verzonden wordt. Maar er zijn browsers die dit niet ondersteunen, vandaar dat deze handmatige check. Zodra een veld leeg is, dan wordt de gebruiker terug gestuurd naar het formulier en gevraagd of hij alles wilt invoeren.

(4) Check voor valide e-mail adres

Hier hebben we voor het gemak een extra npm module voor gebruikt: email-validator. Wanneer je een e-mail adres door deze module haalt middels validator.validate(YOURMAILDATA); dan weet je of het een geldig e-mail format betreft. Zo niet: gebruiker wordt terug gestuurd naar het formulier met de vraag of hij een geldig e-mail adres wil invoeren.

(5) & (6) Versturen van de e-mail via SMTP

Middels de geïmporteerde nodemailer module kunnen we nu de gegevens van het formulier gaan verzenden. De nodemailer module heeft voorgedefinieerde mail templates, zoals Gmail, waardoor we relatief eenvoudig de service op kunnen zetten en kunnen versturen via Gmail (6).

(7) Geef een foutmelding als bericht niet verzonden is.

De nodemailer module heeft tevens foutafhandeling ingebakken. Zodra de e-mail niet verzonden kan worden kunnen we dit afvangen en een error geven aan de eindgebruiker.

Wrap up

Dit een intro in formulieren als je decoupled Drupal bestiert. Stel je bijvoorbeeld voor dat data vanuit front-end Node.js naar Drupal gezonden moet worden; met Drupal validatie en al. Daar zal ik in een volgend ‘headless’ blog op terugkomen, dus stay tuned!

Comments

Nóg meer
kennis nodig?

Check ons ons blog archief >