Nu heb je jouw gewenste WordPress thema opgemaakt, jouw eigen pagina’s en berichten aangemaakt, echter kun je nog niet veel doen op de website. Denk hierbij aan mailformulier of website vertalen. Hier gaan wij verandering in brengen. Wij gaan extra functionaliteit toevoegen aan onze website. Dit doen wij door WordPress plugins te installeren.

Er zijn heel veel verschillende en handige WordPress plugins. Zo kun je je website vol gooien met verschillende handige WordPress plugins. Echter is dit niet verstandig. Je website kan hierdoor veel trager reageren en misschien zelfs helemaal plat gaan liggen. Ook zal de kans om gehackt te worden hoger liggen. Denk dus goed na over welke plugins/functionaliteiten daadwerkelijk nodig zijn en of deze ook betrouwbaar zijn. 

Om onze geïnstalleerd plugins te bekijken gaan we naar Dashboard > Plugins. Er zijn al een aantal plugins geïnstalleerd bij het installeren van WordPress.

Er zijn twee plugins geinstaleerd. 
De ‘Aksimet Anti-Spam’ wordt gebruikt om blog te beschermen tegen spam. 
De plugin ‘Hallo Dolly’ toont telkens rechtsboven in de dashboard een willekeurige verses uit Hello, Dolly.

De ‘Hallo Dolly’ WordPress plugin hebben wij niet nodig. Deze kun je verwijderen door op ‘Verwijderen’ te klikken. 

De WordPress plugin ‘Akismet Anti-Spam’ kun je wel gebruiken als je een blog wilt hebben. Ook kun je het gebruiken als je veel berichten op de website hebt staan. Op deze manier zal er ook minder/geen spam berichten aanwezig zijn. Ik laat de plugin staan. Er is een nieuwe versie van de plugin aanwezig dus ik zal het moeten bijwerken om er gebruik van te kunnen maken. Als je dit ook hebt zul je op ‘nu bijwerken’ moeten klikken om het bij te werken.

De plugin ‘Akismet Anti-Spam’ kun je wel gebruiken als je een blog wilt hebben. Ook kun je het gebruiken als je veel berichten op de website hebt staan. Op deze manier zal er ook minder/geen spam berichten aanwezig zijn. Ik laat de plugin staan. Er is een nieuwe versie van de plugin aanwezig dus ik zal het moeten bijwerken om er gebruik van te kunnen maken. Als je dit ook hebt zul je op ‘nu bijwerken’ moeten klikken om het bij te werken.

Je zult eerst ‘Aan het bijwerken…’ te zien krijgen. Na een paar seconde zal het klaar en bijgewerkt zijn.

De WordPress plugin is nu bijgewerkt maar is nog niet geactiveerd. Nu zal de plugin nog niets doen dus de spam berichten zullen blijven binnen komen. Wat wij daartegen moeten doen is de plugin ook activeren. Als wij het activeren zal het ons beschermen tegen de spam berichten. Klik op ‘Activeren’ om het te activeren. Nu wordt je automatisch doorgestuurd naar de Akismet instellingen scherm.

Klik op ‘Configureer je Akismet account’ om gebruik te maken van de plugin.

Nu zul je doorgestuurd worden naar de website van de plugin, https://akismet.com/wordpress/
Hier kun je een account aanmaken en koppelen aan jouw WordPress website.

Nu we de geinstalleerd plugins bekeken en opgeschoond hebben, kunnen we door met nieuwe plugins. We zullen nu kennis maken met een aantal nieuwe plugins. We beginnen met een plugin die zorgt voor een contactformulier.

Bijna alle website maken gebruik van een contactformulier. Als een bezoeker een vraag heeft kunnen ze gemakkelijk via het formulier hun vraag stellen. Dit is geen standaard standaard functie in WordPress dus daarom zullen wij een plugin moeten installeren.

De meest gebruikte plugin voor contactformulieren is de ‘Contact Form 7’ plugin. Deze gaan wij nu installeren. Om een nieuwe plugin te installeren gaan we naar Dashboard > Plugins > Nieuwe plugin. Nu verschijnen de uitgelichte WordPress plugins. Via Populair of via de zoekfunctie kunnen we de plugin ‘Contact Form 7’ vinden.

Als je de WordPress plugin aandachtig bekijkt, zul je al meer te weten komen over de plugin. Zo kun je links onder zien hoevaak de plugin geïnstalleerd is. Je kunt zien of de plugin compatibel is met jouw huidige WordPress versie. Het is ook heel belangrijk dat het past bij jou WordPress versie. Als dit niet zo is, kan het zijn dat jouw website niet meer goed zal werken. Daarnaast kun je ook de plugin rating zien en wanneer de plugin als laatst is bijgewerkt. 

De plugin is in dit geval meer dan vijf miljoen keer geinstalleerd. Ook is de raiting vier sterren en is het beoordeeld door 1780 gebruikers. De plugin past bij mijn WordPress versie en is voor het laatst één week geleden bij gewerkt. Dit betekend (meestal) dat de plugin regelmatig verbeterd wordt.

Nu we de plugin geanalyseerd hebben, gaan we de plugin installeren en activeren. Klik nu op ‘Nu installeren’ om de plugin te installeren. Na dat de installatie voltooid is zal de knop ‘Activeren’ getoond worden. Klik nu op ‘Activeren’ om de plugin te activeren. Nu word je doorgestuurd naar de WordPress Plugins / Geïnstalleerd plugins scherm.

Hier zie je nu de ‘Contact Form 7’ plugin staan. Klik nu op ‘Instellingen’ of ga naar Dashboard > Contact.

Eerst hadden wij de optie ‘Contact’ niet in onze WordPress dashboard. Deze optie is toegevoegd nadat wij de ‘Contact Form 7’ plugin hebben geactiveerd.

Als we in de ‘Contact’ tab zijn worden we gelijk doorgestuurd naar de ‘Contactformulieren’. Wij zien hier één contactformulier.

Hier kunnen we ook gelijk de instructies zien hoe we de formulier moeten toepassen. Door de ‘Shortcode’ te kopiëren en te plakken in een pagina kunnen we gebruik maken van de contactformulier. De shortcode van deze contactformulier is dus:

Kopieer deze shortcode nu. Maak een nieuwe pagina of bericht aan. Plak nu de shortcode in deze pagina/bericht.

Ik heb voor een pagina gekozen omdat de contact (bijna) altijd als een pagina gemaakt wordt. Publiceer en bekijk vervolgens jouw pagina/bericht.

Het ziet er gelijk heel mooi en professioneel uit. Maar wat moet je nou doen als je het ‘Onderwerp’ veld uit jouw formulier wilt halen? Of als je juist ook een telefoonnummer wilt aanvragen? 

Allereerst gaan wij de ‘Onderwerp’ veld verwijderen. Ga nu terug naar de contactformulier scherm, Dashboard > Contact. Klik nu op de contactformulier titel, in dit geval ‘Contactformulier 1’. Door dit hierop te klikken kunnen we de opzet van het formulier bekijken.

Bovenaan zie je de formuliertitel, dit kun je uiteraard veranderen. Niet vergeten op ‘Opslaan’ te drukken na dat je iets aangepast hebt in dit scherm. Onder de titel zie je in het blauw nog een keer de shortcode. Onder de shortcode zie je vier tabjes hier komen we later op terug. Als laatst zien we in het tekstvlak ons formulier. Hier zien we o.a. ook de velden staan. Al gauw zien we hier ‘Onderwerp’ staan, verwijder dit. Vergeet de ‘Opslaan’ knop niet.

Wordt –>

Bekijk nu de pagina/bericht met het formulier.

Nu keren wij terug naar de instellingen van ons contactformulier. Op de regel waar ‘Onderwerp’ staat zien wij ook <label> staan, de regel deronder zien wij </label> staan. Dit is een element van de programmeertaal HTML.

Dit gaan wij nu weghalen, vervolgens slaan we de formulier op. 

Bekijk nu de pagina/bericht met het formulier.

Je ziet nu dat de ruimte tussen de twee velden kleiner geworden is.Je ziet nu dat de ruimte tussen de twee velden kleiner geworden is.

Dit komt door dat wij de label hebben verwijderd. De label element wordt ook gebruikt om informatie aan controls zoals tekstvelden, keuzerondjes, dropdowns, tekstvakken en aankruisvakjes.

Wij hebben nu ‘Onderwerp’ verwijderd en het label waar het woord ‘Onderwerp in stond, echter zien wij het tekstveld nog staan. Nu gaan wij de tekstveld verwijderen. Keer terug naar de formulier instellingen. Het tekstveld wordt getoond door de tekstregel: 

Door de ‘text’ zien wij dat dit een tekstveld is. Door ‘your-subject’ zien wij dat het tekstveld het onderwerp wilt weten, dit is ook de naam van het veld. Dit gaan wij nu verwijderen.

Bekijk nu het resultaat.

Nu is alles van het onderwerp verwijderd.

Nu bestaat ons formulier uit de velden, ‘Uw naam’, ‘Uw e-mail adres’ en ‘Uw bericht’. Hier willen wij graag ook een telefoonnummer opvragen aan de bezoeker. Dit doen wij doormiddel van de hulptoetsen boven het tekstvlak.

Klik nu ‘tel’ dat uiteraard staat voor telefoon. Nu opent er een nieuw scherm voor de opties van de telefoonnummerinvoerveld.

Onderaan zie je de code voor het veld, net als de [text your-subject] code. Nu gaan we de telefoonnummerinvoerveld aanmaken. De eerste vraag is of de telefoonnummerinvoerveld verplicht is als je dit aanvinkt zul je zien dat er in de code achter de ‘tel’ een ster (*) gevoegd zal worden.

Als volgt, volgt de ‘Naam’. Je kunt jouw veld een eigennaam geven. Ook dit zal in de stuk code verwerkt worden, alle aanpassingen worden in dit stuk code verwerkt. Nu gaan we naar de volgende optie, ‘Standaardwaarde’. Vul hier een telefoonnummer in. Als laatst heb je de ID en Class attribuut, dit kun je gebruiken voor BV. CSS. Dit laten wij leeg. Klik nu op ‘Tag invoeren’.

Sla nu de formulier op. Zorg er wel voor dat de invoervelden voor [submit “Verzenden”] staat. ‘submit’ staat voor indienen, de “Verzenden” is de naam van de knop. Als je dit niet doet zal de telefoonnummer niet mee gegeven geworden als er op de verzendknop gedrukt wordt.

Bekijk nu de formulier via de pagina/bericht.

Nu zie je dat de telefoonnummer er al staat, dit kun je wel aanpassen. Nu gaan wij iets anders doen. Maak nog een telefoonnummerinvoerveld aan en vink de ‘Deze tekst gebruiken als voorbeeld voor het veld’ knop aan.

Zet deze telefoonnummerinvoerveld boven de vorige telefoonnummerinvoerveld.

Sla deze formulier nu op en bekijk de formulier nu via jouw pagina/bericht.

Het verschil tussen deze twee telefoonnummerinvoerveld is dat de eerste telefoonnummerinvoerveld als ingevulde telefoonnummer staat en het tweede veld is de nummer een aanduiding (placeholder). Dit kun je dus aanpassen via het aankruisvakjes.

Verwijder nu de eerste telefoonnummerinvoerveld. De tweede telefoonnummerinvoerveld is namelijk veel handiger en gebruikelijker als telefoonnummerinvoerveld. Zet deze invoerveld nu op de juiste plek. Je kunt zelf bepalen waar jij het goed vindt.

Mist er nog iets? Precies de label. Maak nu een label aan en geef het een naam. Sla het vervolgens op en controleer nu weer of er iets mist.

Mijn gewenste formulier is nu bijna af. Ik wil ook nog graag het geslacht weten van mijn bezoeker. Daarvoor zullen wij keuzerondjes gebruiken, klik dus op ‘keuzerondjes’ via de balk boven de formulier tekstvlak.

Dit scherm lijkt op het zelfde scherm als de ‘tel’ echter zijn er een paar andere opties. 

Als allereerst maken we de keuzerondjes verplicht. Vervolgens kunnen we de naam veranderen, het is niet noodzakelijk. Daarna geven we de opties aan, let er wel op dat er maar één optie per regel toegestaan is.

Onder de ‘Opties’ veld zien we twee aankruisvakjes. De eerste aankruisvakjes:

Deze optie zorgt ervoor dat de keuzerondjes een label krijgen voor het rondje. 

Eerste aankruisvakjes uit, tweede aankruisvakje uit:

Eerste aankruisvakje aan, tweede aankruisvakje uit:

Nu heeft de tekst ‘Man’ en ‘Vrouw’ een label. Maar onze andere velden hebben allemaal een label om de code heen. Om dit ook bij de keuzerondjes aan te zetten moeten we het tweede aankruisvakje ook aanvinken.

Eerste aankruisvakjes uit, tweede aankruisvakje aan:

Eerste aankruisvakje aan, tweede aankruisvakje aan:

Op deze manier zullen alle namen de zelfde style hebben. Ik zal dus allebei de aankruisvakjes aanvinken. Mijn formulier ziet er nu als volgt uit:

Ben jij nog niet tevreden met jouw formulier? 
Voeg/verwijder dan jouw gewenste velden. Je kunt alle verschillende velden invoegen via de balk.

Na dat de formulier af is kunnen we naar het volgende. 
We hebben nu de formulier af. Maar wat gebeurd er nu als de formulier ingevuld is en er op verzenden gedrukt wordt? De gegevens die zijn ingevuld zullen naar jouw e-mail verzonden worden, althans dat zou moeten. Dit hebben wij nog niet geïnstalleerd. Dat gaan wij nu doen.
Keer terug naar Dashboard > Contact. Zoals wij eerder zagen hebben wij bovenin een menu met Formulier, Mail, Berichten en Aanvullende instellingen.

Om ons mail te installeren gaan we naar de tab ‘Mail’. Nu krijgen wij een nieuw venster voor ons.

Bovenaan zien we ‘Aan’ staan, hier vullen we het e-mailadres waar de ingevulde formulier naartoe verzonden moet worden in.
Daaronder zien we ‘Van’ staan, hier moeten we de e-mail van ons domein schrijven dus in dit geval een e-mail dat eindigt op 

@wordpress-basis.nisatutucu.nl. Als wij dit niet doen kan dit voor problemen veroorzaken. Voor de e-mail kunnen we ook iets anders schrijven om aan te duiden dat het van dit formulier afkomstig is.

Nu gaan we de opmaak van de mail bepalen. Wat komt er in de onderwerp van de mail te staan? Wat komt er in de mail zelf te staan?
Ga dus verder met het volgende, het ‘Onderwerp’ van de mail. Hier zien we het volgende staan:

WordPress Basis is de titel van de website, [your-subject] is afkomstig van de formulier. Herinner je nog dat wij de code van het onderwerp verwijderd hadden? Hier in stond ook als naam your-subject, dit was de naam van het veld.

Maar dit hadden wij verwijderd. your-subject bestaat dus niet meer. Daarom zullen wij dit veranderen. Zet hier bijvoorbeeld de naam van de gebruiker. Kijk naar het veld waar de gebruiker zijn naam invult. Kopieer dan de naam van het veld en plak dit in het onderwerp.

Mijn huidige formulier:

Ik ga jullie nu leren hoe we de naam van het veld kunnen herkennen. De stuk code kunnen we herkennen door de blokhaken [ ]. Het eerste wordt in de blokhaken geven aan wat voor veld het is, het kan een telefoon veld zijn, een e-mail veld, een gewone tekst veld en nog veel meer. Het tweede woord is altijd de naam van het veld. Vaak kun je aflezen wat het veld vraagt door alleen de namen te lezen. Daarom is het heel belangrijk om alle velden de juiste benaming te geven. Echter heb ik dit niet gedaan, dit is dus fout. Geef ze allemaal een duidelijk en overzichtelijke naam, geef de naam ook allemaal in hetzelfde taal voor de netheid.

Nu keren wij terug naar de ‘Mail’ tab. Voeg in het ‘Onderwerp’ jouw gewenste onderwerp naam. Om de informatie uit het een veld te gebruiken, gebruiken wij dus blokhaken met daarin het veldnaam.

Vervolgens volgt het met de ‘Aanvullende koppen’, via hier kun je ervoor zorgen dat de mail doorgestuurd wordt naar een ander mail of om een CC te sturen.

Nu gaan we verder met de inhoud van het bericht. Hier geven we alle informatie van het formulier mee. Als je een veld vergeet zul je die informatie dus ook niet mee krijgen.

Dit kunnen wij zelf opmaken. Je kunt het op de standaard manier invullen. Bovenaan schrijf de naam en e-mail adress door de veldnamen in te vullen. Onderwerp kun je verwijderen. Vervolgens volgt de berichtinhoud. Hier kun je alle overige velden invullen. Bovenaan kun je al jouw veldnamen terug vinden, op deze manier hoef je niet steeds terug naar het formulier.

Nadat je de bericht inhoud hebt ingevuld, zie je onderaan het volgende staan:

Uiteraard zie je dit wel met jouw eigen domein- en website naam. Dit kun je houden of verwijderen. De standaard e-mail opmaak ziet er dan als volgt uit:

Ik wil niet gebruik maken van de standaard opmaak. Ik zal het zelf op een andere manier opzetten. Ik heb het nu als volge opgezet.

Echter vind ik het zo nog erg onduidelijk. Dit ga ik nu veranderen en overzichtelijker maken.

Nu is het veel duidelijker en overzichtelijker. Zo zie je dat je de bericht inhoud op veel verschillende manieren kunt opmaken. Gebruik de standaard bericht inhoud opmaak of bedenk er zelf één. Nu hebben we alle benodigde content ingevuld.

Nu wordt ik gemaild nadat een bezoeker het formulier heeft ingevuld. Maar je kunt ook een aparte mail maken voor de bezoeker die de formulier ingevuld heeft. Op deze manier kun je de bezoeker bijvoorbeeld bedanken of zeggen dat je zo snel mogelijk contact zult opnemen. Om dit te installeren maken wij gebruik van ‘Mail (2)’.

Klik deze aankruisvakje aan. Nu opent er een tweede mail opzet. Alle opties zijn het zelfde maar de content is anders.

Bovenaan wordt er gevraagd waar de mail verzonden naar moet worden. Hier vullen we de mail van de bezoeker in, dit doen we met [email]. De optie Van, Onderwerp en Aanvullende koppen kun je zelf bepalen. 

Bij de Bericht inhoud kun je jouw standaar boodschap voor de bezoeker achterlaten. Je kunt de bezoeker via hier dus bedanken. Ook kan je de ingevulde gegevens hier achterlaten en daaropvolgend bedanken. 

Sla nu het formulier nu op. Ga nu naar jouw pagina/bericht en vul de formulier nu in. Gebruik een bestaand e-mailadres zodat we ook de mail naar de gebruiker kunnen testen. 

Is het gelukt met het invullen van de formulier? Als jij het volgende melding gekregen hebt is de formulier verzonden:

Heb jij een ander bericht gekregen zoals:

Deze foutmelding kunnen we gemakkelijk en snel oplossen. Echter hebben we hiervoor wel een andere plugin nodig.
Ga naar de ‘Nieuwe plugin’ scherm en zoek de plugin ‘WP-Mail-SMTP van WPForms’. Installeer en actieveer deze plugin.

Met deze plugin kunnen we zorgen dat onze website koppelt met ons mail. Hierdoor zal de formulier ook verzonden worden.
Ga nu naar de instellingen van deze plugin. Dat kan door via het dashboard op WP-Mail-SMTP te klikken.

Nu zul je bij de instellingen van de ‘WP-Mail-SMTP van WPForms’ plugin uitkomen. Hier moeten we een aantal dingen invullen. Bij E-mailadres afzender, vullen we een e-mailadres in dat eindigd op @joudomeinnaam.nl. Zo werkt het het beste.

De optie ‘Afdwingen verzend-mailadres’ vinken we wel aan. De naam afzender kun je zelf bepalen. Eerste instantie zal de titel van de website hier staan. Vervolgens kies je jouw mailer aan. Wat voor mail is het?

Mijn webhosting/e-mailadres heb ik geregistreerd via transip.nl, daarom gebruik ik een andere SMTP-service. 

Vervolgens gaan we verder met ‘Andere SMTP-service’. Vul nu de gegevens in die gevraagd worden. Alles spreekt voor zich, echter kan de ‘Andere SMTP-service’ nog een beetje ingewikkeld zijn. Daarom zal ik die uitleggen. Als eerste optie wordt er gevraagd wat de SMTP-host van de e-mailadres is. Dit kun je op internet zoeken of aan jouw hosting vragen. De SMTP-host van TransIp is: smtp.transip.email. Vervolgens wordt er gevraagd of jouw website versleutelt is. Is jouw website beveiligd? Heb jij SSL op de website geïnstalleerd? Zo niet kun je dit op geen laten. De SMTP-poort zal vanzelf ingevuld worden na het in vullen van de ‘Versleuteling’. De ‘Auto-TLS’ staat uit en ‘Authenticatie’ staat aan. Als laatst vul je jouw SMTP-gebruikersnaam in, dit zal hoogstwaarschijnlijk jouw e-mailadres zijn. Vul vervolgens het wachtwoord in.

Klik nu op ‘Instelling opslaan’. Nu gaan we testen of het gelukt is. Ga nu helemaal naar boven, hier heb je een navigatiebar. Klik op de tweede tab, E-mailtest.

Klik nu op ‘Verstuur e-mail’. Als je alles goed ingevuld hebt zal de e-mail verzonden worden en zul je dit bericht bovenaan zien staan:

Keer nu terug naar jouw pagina/bericht met het formulier. Vul het formulier nu opnieuw in, het zou nu moeten werken. Ook jij zult nu de groene succes melding krijgen.

Nu gaan wij onze mail controleren. Bekijk beide mails. De beheerder mail, waar alle formulieren naar verzonden worden en het bedank mail voor de bezoeker.

Mail naar de beheerder:

Mail naar de bezoeker:

Ben je niet tevreden over één van de mails? Dan kun je dit uiteraard veranderen.

Als laatst keren wij terug naar de formulier instellingen, Dashboard > Contact. Ga nu naar de Berichten tab.

Hier staan alle berichten/meldingen die de bezoeker na het invullen van de formulier kan krijgen. Elk foutmelding/succesmelding kun je een apart bericht meegeven. Bedenk zelf welk bericht jij wilt meegeven.

Nu is jouw formulier af. Nu alles afgerond is kunnen we ons pagina/bericht eindelijk aan ons menu toevoegen (contact wordt meestal als laatste in de menu getoond).

Begin met chatten!
Hulp nodig?
Chat met Nisa Tutucu
Hallo👋,
Ik hulp u graag. Stuurt u mij een bericht?