Chat widget in WordPress met SendinBlue

Met SendInBlue is het mogelijk om een chat widget op je website of webshop te plaatsen zodat bezoekers eenvoudig contact met je op kunnen nemen.
Het mooie is dat dit integreert met hun e-mail marketing oplossingen, wat volledig gratis is en eenvoudig te implementeren!

Stap 1. Maak een SendInBlue account

Allereerst is een account nodig bij SendInBlue, maak hier je account aan als je er nog geen hebt.
Dit is volledig gratis en is zo gepiept.
Als je moeite hebt met het aanmaken van een account dan kan je deze handleiding lezen over het aanmaken van een SendInBlue account. Het aanmaken van een account wijst zichzelf eigenlijk wel.

Tekst gaat door onder de video

Stap 2. Activeer de Chat functie

Wanneer je ingelogd bent in je SendInBlue account kan je vanuit dat Dashboard op het + icoontje klikken.

Send in blue dashboard met pijl naar + icoon
Klik op de +

In het scherm dat dan volgt krijg je een overzicht van de beschikbare ‘Apps’

Zoek naar het blokje van de Chat app en zet die aan.
In de afbeelding oranje omlijnt, met de pijl voor de activatie knop.

Beschikbare apps in Send in Blue, chat omlijnt
Activeer de ‘chat’ app

3. Chat scherm aanpassen

Na het activeren kom je in een scherm waar je wat aanpassingen kan doen aan het chat scherm.
Dingen die je kan aanpassen zijn de bedrijfsnaam, logo en kleur.
Check de afbeelding van hoe wij dit hebben ingericht.

Send in blue chat scherm aanpassen
Opties om het chat scherm aan te passen

Daarnaast wil je ook nog het ‘Operator profile’ instellen.
Je kan er voor kiezen om met iedereen onder 1 naam te werken, echter, zullen veel mensen het waarderen als ze contact hebben met een echt persoon. Je (voor)naam en een profiel foto kan je hiervoor gebruiken.

Send in blue 'operator profile' aanpassen
Naam en profiel foto van de ‘operator’ instellen.

4. Chat op de website plaatsen

Wanneer je alle stappen hebt doorlopen krijg je een scherm met een code in beeld die op je website geplaatst moet worden.

chat widget code van Send In Blue
Chat widget code

Kopieer deze code alvast en sla deze op in een .txt bestand.
Open daarnaast een nieuw tabblad in je browser om verder te gaan, dat is wel zo handig want deze code hebben we later nog een paar keer nodig.

Hiervoor zijn een paar opties, een van de opties is om de SendInBlue plugin te gebruiken waarin je de marketing functionaliteit aan kan zetten.
Die optie behandel ik hier niet omdat we daarmee ede engelstalige welkomstteksten niet kunnen aanpassen.

Als je gebruik maakt van Google Tag Manager dan zou je daar de code ook in kunnen plaatsen, dat kan wel wat lastiger zijn en mogelijk is dat iets wat je het beste aan je interent marketeer kan vragen, die dat onderdeel beheert.
Het voordeel van Tag Manager is dat je redelijk eenvoudig kan aangeven op welke pagina’s de chat functionaliteit wel en niet ingeladen dient te worden.

In dit voorbeeld maak ik in ieder geval gebruik van de “Insert Headers and Footers” plugin. Als je onder ‘plugins’ > ‘nieuwe toevoegen’ op die naam zoekt dan kan je de plugin installeren vanuit je WordPress Dashboard.

schermafbeelding van insert header and footer plugin
Zo ziet de plugin er uit in het overzicht.

Wanneer die plugin geinstalleerd en geactiveerd is. Komt in het linker menu in het uitklap menu onder ‘Instellingen’ een extra optie te staan “Insert Headers and Footers”.
Als je daar op klikt kom je in een scherm met een aantal invoer kaders waar de code ingeplakt kan worden.

In de afbeelding hier onder zie je de Insert Headers and Footers pagina waar de code al ingeplakt is.

Schermafbeelding van de plugin instellingen met de code er in
De SendInBlue chat code in de header and footers plugin.

Als je een stukje naar beneden scrolt staat daar onder een blauwe knop met “bewaar”.
Klik daarop om dit op te slaan.

Open nu een 3e tabblad of nieuw scherm om de website te bezoeken.
Dit is nodig zodat SendInBlue kan verifiëren dat de code geplaatst is en ze een aanvraag van je site ontvangen.

Ga terug naar het scherm of tabblad wat je nog open hebt staan en klik op de ‘verify’ knop.

5. Standaard welkom tekst aanpassen

De standaard welkom teksten zijn in het Engels.
Die zijn redelijk eenvoudig aan te passen.

Als je de code bekijkt staan daar een paar regels in die deze teksten bepalen.

/* OPTIONAL: to overwrite the default welcome message uncomment this line*/
// window.sib.custom_welcome_message = 'Hello, how can we help you?';
/* OPTIONAL: to overwrite the default offline message uncomment this line*/
// window.sib.custom_offline_message = 'We are currently offline. In order to answer you, please indicate your email in your messages.';

Haal enkel de // weg.

Vervolgens kan je de Hello, how can we help you? tekst aanpassen naar wat jij wilt, zorg wel dat de overige code op die regel blijft staan.
Het zelfde geld voor de tekst regel: We are currently offline. In order to answer you, please indicate your email in your messages.

Een code voorbeeld van hoe de tekst in het Nederlands kan worden is als volgt:

/* OPTIONAL: to overwrite the default welcome message uncomment this line*/
window.sib.custom_welcome_message = 'Welkom bij WPHelpdesk, met welke WordPress vraag of probleem kunnen we je helpen?';
/* OPTIONAL: to overwrite the default offline message uncomment this line*/
window.sib.custom_offline_message = 'Op dit moment is er niemand aanwezig voor een live chat, laat je e-mailadres achter om een antwoord te krijgen per e-mail.';

Dat komt er dan uiteindelijk als volgt uit te zien op de website.

SendInBlue Chat scherm popup
Chat scherm wanneer een operator online is
SendInBlue Chat scherm popup niemand online
Chat scherm wanneer niemand online is

6. Chatten met je bezoekers

Nu de chat widget geinstalleerd is en werkt kunnen site bezoekers je berichten sturen.
Er zijn een aantal handige functies om hier rekening mee te houden.

  • Je kan zien op welke pagina de gebruiker zich bevindt, zo kan je dus nog gerichter hulp bieden.
sendinblue pagina waar bezoeker is Chat
Bij de pijl zie je op welke pagina de bezoeker op dit moment is.
  • De bezoeker is anoniem, wil je die eenvoudig toevoegen aan contacten binnen in je SendInBlue account, vraag dan om het e-mail adres. Wanneer je klikt op een e-mailadres kan je die met een klik toevoegen.
chat toevoegen aan contacten
Voeg een adres toe aan je mailing lijst

Dat is eigenlijk alles dat er is met betrekking tot de Chat functionaliteit die SendInBlue aanbied.

Als je WordPress onderhoud door ons laat uitvoeren, adviseren en helpen we je graag bij het opzetten van je SendInBlue account en e-mail marketing campagne’s.

SendInBlue is namelijk enorm uitgebreid en kan gebruikt worden voor Nieuwsbrieven, Transactional e-mail, re-marketing campagne’s, heeft een CRM en zelf ook automatische e-mail series.

Oeps! Er is iets misgegaan. Google Maps is niet correct geladen

Oeps! Er is iets misgegaan.

Google Maps is niet correct geladen op deze pagina. Zie de JavaScript-console voor technische details.

Zojuist heb ik een api key aangemaakt om op mijn WordPress website de plug in: Nomad Map te kunnen gebruiken.

Zodra ik de API sleutel beveilig en daarbij aanklik dat ik alleen http/verwijzingen wil toestaan van mijn-domein.nl

krijg ik tijdens het gebruiken van Nomad Map op WordPress de melding die u boven & onderaan deze email ziet.

Na wat searchen op internet begrijp ik dat ik mogelijk de verkeerde restrictie heb op gegeven als beveiliging. Dit klopt ook, want als ik alle beveiliging weghaal dan kan ik wel op Nomad Map werken. (Echter krijg ik dan de melding: google maps kan niet correct geladen worden op deze pagina).

Kunt u mij aub ondersteunen in het werkend krijgen van de Nomad Map Plug in?

Oeps! Er is iets misgegaan.

Google Maps is niet correct geladen op deze pagina. Zie de JavaScript-console voor technische details.

WordPress mail versturen via Brevo (voorheen SendinBlue)

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.

We hebben hier een overzicht van alle beschikbare formulier velden in Contact Form 7

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