WordPress mail versturen via Send in Blue

Verstuurt WordPress de e-mails niet?
Verstuurt Contact Form 7 de offerte aanvragen niet goed?
Komen order bevestigingen vanuit WooCommerce niet aan of vaak in de spam map terecht?

Zo kan bijvoorbeeld ook de e-mails om je wachtwoord te herstellen niet verzonden worden en kan je de toegang tot de website kwijtraken.

Dat herstellen op het moment is enorm lastig, technisch en geeft je een hoop stress die voorkomen kan worden.

E-mails die niet goed verzonden worden vormen een groot probleem en kunnen behoorlijk vervelende consequenties hebben. Met Send in Blue, kan je deze problemen verhelpen.

Met een paar extra handelingen kan je een hoop narigheid voorkomen

  • E-mails die altijd goed aankomen en dus niet meer in de spam-map belanden
  • WooCommerce bestel bevestigingen die goed verzonden worden
  • Wachtwoord reset emails die verzonden worden wanneer dat nodig is
  • De mogelijkheid om te controleren of een e-mail ook écht afgeleverd is, zonder dat je hoeft te programmeren

Oorzaken van het niet juist versturen van je formulieren en e-mails zit vaak aan de webhosting kant. Zo kan het IP adres van de webhost op een blacklist staan, omdat een andere klant van hun, die toevallig op dezelfde server zit, langere tijd spam heeft verstuurd vanaf zijn website.

Het kan ook zijn dat de ‘DNS-records’ van je domeinnaam niet goed ingesteld staan, daardoor kan je website niet geautoriseerd zijn om uit jouw naam e-mail te versturen.
Daarnaast zijn er ook nog webhosting providers waar de PHPmail functie uitgeschakeld staat, wat ze je dan ook nog eens ‘vergeten’ te vertellen.

Nu ben je niet de eerste en zal je ook niet de laatste zijn die problemen ondervind met het versturen van e-mail vanaf de website of dit beter wilt laten functioneren. Er zijn gelukkig bedrijven die zich hier in gespecialiseerd hebben, de dienst die ze aanbieden waarvan we gebruik gaan maken heet ‘Transactional E-mail’.

We gebruiken in deze uitleg Send in Blue, voor kleine websites met lage volume’s is dit zelf volledig gratis tot 40 emails per uur / 300 emails per dag! Het aanmelden is zo gepiept en we hoeven ook geen betaalgegevens in te voeren tijdens dit proces, dus ook geen onverwachte kosten of rekening!

Uitleg in tekst en schermafbeeldingen gaat verder onder de video

We gaan om te beginnen naar Send in Blue en klikken op de aanmeld knop Sign up free.

  1. Je gaat om te beginnen naar Send in Blue en klikken op de aanmeld knop “Sign up free”.

We vullen onze gegevens in om een account aan te maken en klikken op Get Started

Vul je gegevens in om een account aan te maken en klikken op “Get Started”

Bevestig je e-mailadres om gebruik te kunnen maken van het account

Bevestig je e-mailadres om gebruik te kunnen maken van het account

Volg de stappen om je profiel compleet te maken. Klik onderaan de pagina op Complete my profile

Volg de stappen om je profiel compleet te maken.
Klik onderaan de pagina op “Complete my profile”

Click on Complete my profile

Click on “Complete my profile”

Als je een mobiel nummer ingevoert hebt krijg je een code toegestuurd om je nummer te bevestigen.

Als je een mobiel nummer ingevoerd hebt krijg je een code toegestuurd om je nummer te bevestigen.

Nu je account bij Send in blue is aangemaakt en werkt kunnen we terug gaan naar je WordPress website.

Nu je account bij Send in blue is aangemaakt en werkt kunnen we terug gaan naar je WordPress website.

Vanuit het Dashboard klik je op Plugins  Nieuwe plugin

Vanuit het Dashboard klik je op “Plugins” > “Nieuwe plugin”

1. Zoek allereerst naar sendinblue 2. Vervolgens kan je bij het SendinBLue Subscribe Form and WP SMTP op de Nu installeren knop klikken Wanneer die geinstalleerd is ook op activeren

  1. Zoek allereerst naar “sendinblue”
  2. Vervolgens kan je bij het “SendinBlue Subscribe Form and WP SMTP” op de “Nu installeren” knop klikken
    Wanneer die geïnstalleerd is ook op “activeren”

1. Er is nu een nieuw menu bijgekomen SendinBlue klik hierop.  Het create account deel hebben we al gedaan, je kan dus direct op de link klikken bij punt 2 om de API key te krijgen.

  1. Er is nu een nieuw menu bijgekomen “SendinBlue” klik hierop.
    Het create account deel hebben we al gedaan, je kan dus direct op de link klikken bij punt 2 om de API key te krijgen.

Click on SMTP

Click on “SMTP”

Ondanks dat dit API Key genoemd wordt heb je de SMTP key 'master password nodg. Die vind je in het SMTP tabje op send in blue (1)  Kopieer en 'Master password' wat bij de 2 staat en ga terug naar je WordPress site.

Ondanks dat dit API Key genoemd wordt heb je de SMTP key ‘master password nodig.
Die vind je in het SMTP tabje op send in blue (1)
Kopieer en ‘Master password’ wat bij de 2 staat en ga terug naar je WordPress site.

Plak de sleuten in het invoerveld en klik op Login

Plak de sleutel in het invoerveld en klik op “Login”

Je bent nu ingelogd. Het kan zijn dat Transactional emails niet autmatisch geactivered is. Volg dan de stap in de melding en stuur een email naar contact@sendinblue.com met het verzoek om dit te activeren.

Je bent nu ingelogd.
Het kan zijn dat “Transactional emails” niet automatisch geactiveerd is.
Volg dan de stap in de melding en stuur een email naar [email protected] met het verzoek om dit te activeren.

Het verzenden gebeurt nu via Send in Blue.  Om er voor te zorgen dat E-mails beter aankomen en de kans te verkleinen dat ze in de spammap terecht komen moet je het afzend domein nog verifieren. Dat doe je door rechts boven (1) op je account naam te klikken en vervolgens op Senders & IP (2)

Het verzenden gebeurt nu via Send in Blue.
Om er voor te zorgen dat E-mails beter aankomen en de kans te verkleinen dat ze in de spam-map terecht komen moet je het afzend domein nog verifiëren.
Dat doe je door rechts boven (1) op je account naam te klikken en vervolgens op “Senders & IP” (2)

Vervolgens klik je op Add a new domain (1)  en vul je in het popup kader dat verschijnt (2) je domeinnaam in zonder www! Zet ook het vinkje aan bij I would like to use this domain name to digitally sign my emails (SPF, DKIM, DMARC) (3)

Vervolgens klik je op “Add a new domain” (1)
en vul je in het popup kader dat verschijnt (2) je domeinnaam in zonder www!
Zet ook het vinkje aan bij “I would like to use this domain name to digitally sign my emails (SPF, DKIM, DMARC)” (3)

Vervolgens krijg je een scherm met gegevens die ingevoerd moeten worden in de 'DNS' van je domeinnaam. Dat doe je bij de webhosting provider waar het domeinnaam geregistreerd is. Bij een beetje service gerichte partij kan je deze gegevens ook bij hun support inschieten zodat ze dit voor je instellen. Voor wie de weg weet binnen zo'n paneel is dit meestal binnen 5 minuten gepiept. Als je de login gegevens hebt van je webhosting beheer paneel zouden we je hierbij meestal ook wel telefonisch kunnen helpen als je AnyDesk of Teamviewer geïnstalleerd hebt (voor schermdelen)

Vervolgens krijg je een scherm met gegevens die ingevoerd moeten worden in de ‘DNS’ van je domeinnaam.
Dat doe je bij de webhosting provider waar het domeinnaam geregistreerd is.
Bij een beetje service gerichte partij kan je deze gegevens ook bij hun support inschieten zodat ze dit voor je instellen.

Hulp hierbij is natuurlijk inbegrepen bij onze Site Service & WordPress onderhoud dienst

Hoe kan ik een grote melding op mijn homepage zetten?

We kregen regelmatig de vraag hoe er in verband met het Corona virus een melding op de website geplaatst kon worden.

Nu is een lightbox popup die de Hustle plugin kan maken hiervoor geschikt. Een dergelijke melding krijgt iedereen te zien en moet actief weg geklikt worden. Je kent zo’n popup wel van een cookie melding.

In dit geval kan je er een eigen tekst invoeren en eventueel een nieuwsbrief aanmelding in kwijt.

Kijk de video voor de uitleg.

Contact form 7 handleiding, contact formulier op je WordPress website

Je wilt een formulier toevoegen aan je WP site. Uit de honderden resultaten heb je gekozen voor Contact Form 7 (ook wel CF7 afgekort). Een van de eerste en oudste formulier plugins voor WordPress, gelukkig nog steeds actief onderhouden en zeer stabiel.

Video uitleg, tekst uitleg gaat verder onder video

Door zijn leeftijd is de plugin wel wat spartaans, erg kaal en basis qua vormgeving. Hierdoor is er tijdens het opzetten en instellen van de formulieren aanzienlijk meer ruimte voor menselijke fouten dan, bijvoorbeeld bij de nieuwere (betaalde) concurrenten zoals WPForms.
Bij het niet goed instellen van een formulier kan het zijn dat er mails verloren gaan, nooit aankomen en je klanten misloopt of zelfs verliest.

Door veranderende technologie zien we regelmatig gebeuren dat, bijvoorbeeld een offerte aanvraag formulier onjuist is ingesteld en deze bedrijven klanten mislopen.

Door het volgen van deze Contact form 7 handleiding kan je de kans daarop aanzienlijk verkleinen.

Wil je nog een menselijke check of dat wij je formulier plugin goed instellen? Neem dan contact met ons op.

Contact opnemen

Installatie van de Contact form 7 plugin

Ga naar "plugins" sub-optie "nieuwe plugin"

Wanneer je op het dashboard bent ingelogd ga je met de muis op (1) “Plugins” staan.
Vervolgens klik je op (2) “Nieuwe plugin”

Zoek naar Contact Form 7, installer en activeer deze

Zoek in de zoekbalk (1) op “Contact Form 7”
Klik op (2) “Nu installeren”
De plugin gaat zich nu installeren, dit kan even duren.
Wanneer Contact Form 7 geïnstalleerd is zal de knop een blauwe kleur krijgen met de tekst “Activeren”, klik daar op om de plugin te activeren.

Na het activeren kom je in het overzicht van geïnstalleerde plugins.

Aan de linkerkant zie je in het menu een nieuw item staan (1) “contact”.
Ga daar met de muis op staan en klik op het sub-item “contact formulieren”.

Het eerste contact formulier is automatisch aangemaakt.
Ga eerst met de muis op “Contactformulier 1” staan, vervolgens verschijnt de “Bewerken” knop.
Klik onder “Contactformulier 1” op “Bewerken”

We zijn nu in het scherm om het contactformulier aan te passen.

  1. De titel van het contact formulier, dit is voornamelijk bedoeld voor je zelf om het overzicht te houden en is eigenlijk nooit zichtbaar voor bezoekers.
  2. De “short code”, deze code kan je plakken in het short code blok op pagina’s of berichten om het formulier weer te geven.
  3. Formulier tab (op dit moment actief). Hier pas je het formulier zelf aan dat weergegeven wordt op de website.
  4. Mail tab, hier pas je de e-mail aan de verzonden wordt bij het versturen van het formulier.
    Voeg je velden toe aan het formulier dan moeten die ook nog handmatig aan de Mail worden toegevoegd, anders worden die niet mee verzonden.
  5. Berichten tab, in dit tabje kan je de meldingen aanpassen die een bezoeker krijgt te zien wanneer het formulier verzonden wordt en de foutmeldingen.
  6. Aanvullende instellingen tab, geeft de mogelijkheid om het formulier in demo modus te zetten en andere geavanceerdere functies.
  7. De knoppenbalk kan je helpen bij het toevoegen van invoervelden en toont welke mogelijkheden er zijn.
  8. Vormt de code van het formulier, je kan hier wijzigingen in aanbrengen om de weergave te verbeteren of de begeleidende labels aan te passen. Hier gaan we zo nog verder op in.
  9. Spreekt voor zich, zodra je aanpassingen gedaan hebt moet je deze ook “opslaan” anders gaan ze verloren.

Formulier kader


<label> </label> is HTML code, dit omsluit het invoerveld. (oranje)
In Contact Form 7 worden invoervelden ingesloten met blokhaken [ ] (groen)
Een asterisk * geeft aan dat het veld verplicht ingevuld moet worden (rood).
De label tekst (geel) komt doorgaans boven het invoerveld te staan.
Wanneer de label code juist is geplaatst kan een bezoeker hier op klikken om direct naar het invoer veld te springen.
Dit is goed voor de toegankelijkheid van het formulier, zo weten ook mensen die gebruikmaken van een schermlezer welke gegevens er ingevoerd dienen te worden.

Invoerveld opbouw

Het invoerveld short code van Contact Form 7 is als volgt opgebouwd
Type invoer (oranje) dit kan van alles zijn tekst, email, tekst vlak (voor een uitgebreid bericht), datum, getal etc.
De knoppen aan de bovenzijde geven aan wat er beschikbaar is.

Dan is her nog het veld naam in het groen, deze naam dient ook gebruikt te worden in de Mail tab.
Die worden bij het verzenden omgezet in de tekst die de bezoeker heeft ingevoerd.
Hier mogen geen spaties inzitten, deze naam hoeft ook niet overeen te komen met de ‘label tekst’ (geel)

Asterisk * (rood) voor de verplichte velden.

Voor de volgende stap klikken je op de knop “Drop down-menu” (1)

We zijn nu in het scherm om het contactformulier aan te passen en een veld toe te voegen.
In het scherm dat nu verschijnt kan je de code maken voor het wat complexere drop down menu veld.

  1. Aangeven of dit veld verplicht is
  2. De naam van het veld
  3. De keuze opties die een bezoeker heeft, 1 per regel
  4. Of meerdere selecties mogelijk zijn (meer dan 1 item kiezen) en of de lijst moet beginnen met een lege eerste optie.
  5. De ID en Class zijn meer gericht op ontwikkelaars, als je een bepaald veld een unieke opmaak wilt geven kan je hier een naam invoeren die vervolgens met CSS code extra opmaak mee kan geven.
  6. Dit is de gegenereerde ‘short code’ uit de vorige stap die we daar ontleed hadden.
  7. Met de “Tag invoegen” knop kan je deze code in het formulier plaatsen.
    (klik hierop om het voorbeeld te blijven volgen)

De code staat nu in het formulier, wanneer we het formulier zouden opslaan krijgen bezoekers deze optie wel in beeld.
Het <label> </label> zoals bij de andere velden ontbreekt echter net als een begeleidende label-tekst.
Dit is iets wat we er nog handmatig bij moeten zetten.

Je kan die tekst kopiëren en plakken of handmatig typen, zorg wel dat je geen fouten maakt.
Maak je een fout in de HTML code dan zal dit niet werken.
Voeg <label> toe vóór het invoerveld en </label> er na om het af te sluiten
De begeleidende tekst kan je plaatsen wat je zelf wilt.
Als je meer velden wilt toevoegen kan je deze stappen herhalen.

Contact Form 7 – Mail tab

Klik op de Mail tab

  1. Dit zijn alle beschikbare velden die omgezet worden aan de hand van de input van de gebruiker.
  2. het aan-veld, naar dit adres wordt de email verzonden
  3. Het afzend adres. Zorg dat dit adres achter het @ de domeinnaam bevat van de website waar vanaf verzonden wordt.
    Het gebeurd heel vaak dat hier een ander e-mailadres wordt ingevoerd waardoor de e-mail niet aankomt.
    Kom niet in de verleiding om het e-mailadres te vervangen met de [your-email] tag zodat hier de mail van de afzender komt te staan.
    Wel zou je hier [your-name]<[email protected]> kunnen plaatsen.
    Dan is de ‘van’ naam wel gelijk aan de persoon die het formulier inzend.
  4. Het onderwerp van de e-mail, als je hier enkel [your-subject] dan zal Contact Form 7 een foutmelding geven. Het is namelijk mogelijk dat de onderwerp regel dan leeg blijft, dit kan er weer voor zorgen dat de mail in de spam-folder terecht komt.
  5. Dit is een zéér belangrijke regel, door hier Reply-To: [your-email] in te voeren kan je de ‘beantwoorden’ knop van je mail programma gebruiken om de mail te beantwoorden. Let wel goed op want de tekst is hoofdlettergevoelig, 1 typefout en er gebeurdt niets!
  6. De berichtinhoud, wat hier staat zal naar het e-mailadres in het Aan-veld verstuurd worden. Hier komen we nog op terug aangezien de extra toegevoegde velden in het formulier ook nog in de berichtinhoud geplaatst moeten worden.
  7. Of regels met lege tags niet verzonden moeten worden en of er een HTML indeling gebruikt moet worden.
    HTML e-mails worden eerder aangezien als spam, het is dus niet verstandig dit vinkje aan te zetten.
  8. Als je formulier een bestand-upload mogelijkheid heeft moet die tag hier ingevoerd worden. Anders zal de bijlage niet mee verzonden worden.
  9. Hier kan je een 2e e-mail instellen. Deze bevat dezelfde velden als deze eerste e-mail.
    Deze 2e mail zou je kunnen gebruiken om automatisch een bevestiging met kopie van eigen gegevens te versturen naar de bezoeker die het formulier heeft ingevuld.


Hier zie je hoe we de ‘tags’ van [keuzemenu] en URL ook hebben toegevoegd aan de bericht inhoud, dit zodat die ook worden mee verzonden met de e-mail.

Wat doet de Mail (2) optie in Contact Form 7?

E-mail bevestiging inschakelen.
Wanneer je het vinkje (1) bij “Mail (2)” inschakelt krijg je een vrijwel identiek formulier als voor de eerste mail.
Bij de berichtinhoud (2) zal je ook nog de extra tags moeten toevoegen als je die mee wilt sturen.
Je kan ook het gehele “Berichtinhoud” kader van de eerste mail kopiëren en hier plaatsen om als basis te gebruiken.

Berichten tab


In de “berichten” tab kan je de meldingen aanpassen die een bezoeker krijg te zien.
Dit wordt vaak vergeten, het is echter wel vreemd als je het formulier zou gebruiken als “Offerte aanvraag” en in alle meldingen refereert naar bericht in plaats van offerte of aanvraag.
Daarnaast zijn een aantal van de meldingen niet heel vriendelijk naar de gebruiker toe.
Omdat dit toch een belangrijk onderdeel is van de interactie is met de gebruiker is het absoluut de moeite waard om de meldingen te herschrijven naar je eigen woorden.
Daarnaast kan je bij foutmeldingen wellicht een alternatieve contact mogelijkheid bieden.

Contact Form 7 formulier in de website plaatsen


Wanneer je een pagina/bericht bewerkt in de nieuwe blokken editor (WordPress 5+)
Kan je op de plek waar je het formulier wilt invoegen op het plusje klikken (1).

Vervolgens kan je zoeken (1) op de bloknaam “short code” en die aanklikken om in te voegen (2)

Vervolgens plak je de “Short code” van het formulier dat we helemaal in het begin toonde in dit veld (1) en klik je op Bijwerken (2).

Het formulier is nu op de pagina gepubliceerd.

Hulp bij het instellen van je contact formulier is inbegrepen bij onze onderhoud & service pakketten

WordPress onderhoud