Alle Contact Form 7 Formulier velden voor WordPress

Contact Form 7 is een populaire en gratis WordPress plugin waarmee je gemakkelijk contact formulieren voor je website maakt.

Je kan zelf bepalen welke invoervelden je gebruikt en de plugin biedt integraties met andere populaire WordPress plugins. Super handig dus.

Vandaag nemen we je mee door alle invoervelden en leer je hoe je optimaal gebruikmaakt van Contact Form 7.
Lees hoe je Contact Form 7 installeert en hoe je zelf formulieren maakt.

Wat zijn de mogelijkheden met de Contact Form 7 velden

Wanneer je een contactformulier binnen WordPress bewerkt, zie je bovenaan een tal van opties. Hieronder lees je wat ieder invoerveld betekent. Vervolgens nemen we ze een voor een met je door.

Invoervelden Contact Form 7
  • Tekst: een enkele regel waar tekst ingevuld kan worden, denk aan een naam of straat
  • E-mail: een veld om een e-mailadres achter te laten
  • URL: een veld om een website-URL in te voeren
  • Tel: een veld voor een telefoonnummer
  • Getal: een invoerveld alleen voor getallen
  • Datum: een veld met een datumkiezer
  • Tekstgebied: een groot tekstveld
  • Dropdown-menu: een keuzemenu waar iemand kan kiezen uit meerdere opties
  • Selectievakjes: een keuzemenu waar iemand één of meerdere opties kan kiezen
  • Keuzerondjes: een keuzemenu waar iemand maximaal één optie kan kiezen
  • Acceptatie: een optie om je bezoeker akkoord te laten gaan met bijvoorbeeld de algemene voorwaarden 
  • Quiz: een optie om een quiz toe te voegen aan het formulier
  • reCAPTCHA: met deze optie voorkom je spamberichten
  • Bestand: een optie om een bestand toe te voegen aan het formulier
  • Verzenden: met deze optie voeg je een verzendknop toe aan een formulier

Tekst

Het tekst veld is het meest gebruikte tekstveld en hiermee kan je, zoals de naam al zegt, tekst invoeren. Bij het toevoegen van een tekstveld kan je kiezen om dit veld verplicht te maken. Daarnaast kan je het veld een naam geven. Deze naam zie je niet terug op het formulier op je website, maar wordt gebruikt in de e-mail die je ontvangt nadat iemand het formulier verstuurt. Tot slot kan je ook een standaardwaarde invullen. Dit is een voorbeeld tekst die bezoekers te zien krijgen bij het tekstveld. Vergeet niet het vinkje onder “Standaardwaarde” aan te zetten. Anders moeten je bezoekers de voorbeeld tekst handmatig weghalen, wat niet heel praktisch is. 

 

Extra opties bij het invoegen van een tekstveld.

 

Hoe het tekstveld wordt weergeven op je website.

E-mail

Dit veld is speciaal bedoeld voor het invullen van een e-mailadres. Anders dan een tekstveld controleert het veld voor e-mails automatisch of er een geldig mailadres is ingevuld. Ook dit veld kan je verplicht maken en een standaardwaarde opgeven.

Het instellen van een “e-mail veld” met een standaardwaarde.
Hoe het e-mail veld wordt weergeven op je website.

URL

Met een URL-veld kunnen bezoekers een website-URL achterlaten. Ook dit veld controleert automatisch of de opgegeven URL geldig is. Vergeet je bij dit veld http:// of https:// in te vullen, dan geeft Contact Form 7 een foutmelding.

Het instellen van een URL-veld.
Hoe het URL-veld wordt weergeven op je website.

Telefoonnummer

Dit veld is bedoeld om een telefoonnummer achter te laten. Net als bij de andere invoervelden kan je voor dit veld instellen om het veld verplicht te maken en een standaardwaarde opgeven.

Het instellen van een telefoonnummer veld.
Weergave van het telefoonnummer veld op je website.

Getal

Het veld voor getallen is bedoeld om getallen op te geven. Je kan kiezen uit twee soorten; een normaal tekstveld waar een willekeurig getal kan worden ingevoerd, of een “slider” waarmee je een getal kan selecteren. Je kan hierbij ook een minimum en maximum instellen. 

Het instellen van een “getal-veld” met een slider en een minimum en maximum.
Weergave van het getallenveld op je website.

Datum

Met dit veld kan je een datum laten invullen. Ook kan je kiezen om bezoekers alleen uit een bepaalde periode te laten kiezen. In dit geval verschijnen alleen de data uit de door jou gekozen periode. 

Het instellen van een datumveld met een specifiek bereik.
Weergave van het datumveld op je website.

Tekstgebied

Een tekstgebied gebruik je voor de invoer van grotere stukken tekst. Meestal is dit de plek waar je je bericht kan typen. Een normaal tekstveld gebruik je dan weer voor het invoeren van bijvoorbeeld je naam. 

Een tekstgebied instellen dat het woord “Bericht” standaard al in het veld heeft staan.
Weergave van het tekstgebied op je website.

Drop-down menu

Met een drop-down menu kan je iemand laten kiezen uit meerdere opties. Bij de aanvullende opties van dit veld kan je daarnaast aangeven of bezoekers één of meerdere selecties kunnen maken. 

Bij de aanvullende opties kan je aangeven of je toestaat dat bezoekers meerdere selecties kunnen maken.
Weergave van het drop-down menu op je website.

Selectievakjes

Met dit veld kan je bezoekers de keuze laten maken uit één of meerdere opties. Liever de keuze beperken tot maximaal één optie? Gebruik dan het veld “keuzerondjes”.

Het instellen van het “selectievakjes veld”.
Weergave van selectievakjes op je website.

Wil je de selectievakjes onder elkaar weergeven in een lijst dan kan je de volgende CSS code toevoegen in de Customizer onder extra css.

.wpcf7-form-control.wpcf7-checkbox {
display: flex;
flex-direction: column;
}

Keuzerondjes

Dit veld beperkt je bezoekers tot het maken van één keuze. Handig wanneer je iemand een keuze wil laten maken uit meerdere alternatieven. 

Het instellen van het “keuzerondjes veld”.
Weergave van keuzerondjes op je website.

Acceptatie

Met het “acceptatie-veld” geef je de bezoekers de vraag om akkoord te gaan met de algemene voorwaarden en de privacy policy. Via de extra opties kan je instellen dat het formulier alleen wordt verzonden als de algemene voorwaarden zijn geaccepteerd. Dit is een handige functie omdat je in het kader van de AVG-wetgeving verplicht bent om toestemming te hebben om de ingevulde gegevens te verzamelen. 

Instellingen met betrekking tot het “acceptatie veld”.
Weergave van “acceptaties” op je website.

Contact Form 7 reCAPTCHA

Met deze optie voorkom je dat je spam berichten ontvangt en moeten bezoekers bevestigen dat zij geen “robot” zijn. Om gebruik te maken van reCAPTCHA moet je eerst een “API key” aanvragen bij Google. Vervolgens activeer je reCAPTCHA door op het dashboard van WordPress op Contact > Integratie > reCAPTCHA > Integratie instellen te klikken.

Klik op “Integratie” links in het dashboard van WordPress om reCAPTCHA te activeren.

Wanneer je de tool geïnstalleerd hebt, komt er vaak een icoontje rechts onderin de website te staan.
Die kan verborgen worden met de volgende code:

.grecaptcha-badge { visibility: hidden; }

Quiz

Met deze functie kan je vragen en antwoorden toevoegen aan een formulier. Uiteraard spreekt het antwoord op de onderstaande vraag voor zich. 

Voer hier je vragen en antwoorden in.
Weergave van een quiz op je website.

Bestand

Met deze optie laat je bezoekers een bestand toevoegen aan het formulier. Bij de extra opties kan je instellen hoe groot het bestand maximaal mag zijn en welke bestandstypes worden toegestaan. Houd er rekening mee dat de meeste webhosting providers bestanden toestaan tot maximaal 8 a 16 MB echter zijn er ook providers waar dit beperkt is tot 2 a 4MB.

Extra instellingen voor het “bestand-veld”. 8.000.000 bytes in dit voorbeeld staat gelijk aan 8 MB.
Weergave van het toevoegen van een bestand op je website.

Bestanden als bijlage meesturen

Standaard worden verstuurde bestanden opgeslagen in de mediabibliotheek van je WordPress admin. En worden ze niet als bijlage meegestuurd in de e-mailnotificaties die je ontvangt van een nieuw ingevuld formulier. Dit is vervelend want zo zie je belangrijke bestanden gemakkelijk over het hoofd.

Wil je dat geüploade bestanden standaard als bijlage worden meegestuurd bij je mails? Klik dan op de tab “Mail” wanneer je het formulier aan het aanpassen bent.

Scroll vervolgens naar beneden totdat je de instelling “Bestand bijlages” ziet. Hier vul je de naam in van het aangemaakte upload veld.

Vul hier de aangemaakte upload tag in.

Bestanden zullen nu als bijlage worden meegestuurd wanneer je een e-mail notificatie ontvangt.

Wil je bezoekers toestaan om meerdere bestanden te uploaden? Maak dan meerdere bestand upload tags aan en plaats alle verschillende tags in dit veld.

Verzenden

Bij ieder nieuw formulier maakt Contact Form 7 standaard een verzendknop aan. Heb je deze per ongeluk verwijderd, dan kan je deze via de optie “verzenden” handmatig weer toevoegen. Je kan zelf een knoptekst invoeren of wijzigen.

Stel onder “Label” de tekst in die je wilt koppelen aan de verzendknop.

De volledige Contact Form 7 handleiding

Wil je stap voor stap weten hoe je Contact Form 7 installeert en hoe je zelf nieuwe formulieren maakt en plaatst?
Bekijk dan de volledige handleiding van Contact Form 7

Problemen met Contact Form 7

Heb je alle stappen gevolgd maar heb je problemen met Contact Form 7? Zoals e-mails die niet aankomen. Lees dan hier hoe je problemen met Contact Form 7 oplost.

Zoek je vakkundige hulp bij het onderhouden van je website en het oplossen van WordPress problemen? Neem dan nu contact op of bekijk onze Site Service pakketten.

Afbeelding invoegen in WordPress

Afbeelding toevoegen via WordPress, Elementor, Divi, WPBakery en meer! Handige stappenplan voor iedere plugin.

Hoe voeg je precies een afbeelding toe in je WordPress berichten? Er zijn zoveel verschillende mogelijkheden en bij iedere plugin gaat net alles weer anders. Maar hoe weet je precies welke jij moet gebruiken? In dit artikel leggen we je per plugin uit hoe je een afbeelding binnen je WordPress pagina of bericht kan toevoegen. 

Afbeelding toevoegen via WordPress blokken bewerken

Een afbeelding op WordPress toevoegen kan gemakkelijk door een blok te bewerken. In dit stappenplan leggen we je gemakkelijk uit hoe je een WordPress afbeelding kan toevoegen via blokken in een paar simpele stappen:

Stap 1: Voeg een afbeelding toe door middel van op + te klikken of de afkorting /afbeelding te gebruiken zodat je afbeelding kan selecteren.

 

Je kan het plus icoontje gebruiken wat zich links boven bevind of die rechtsboven

 

Of:

of door /afbeelding te typen nadat je een nieuw blok start na een paragraaf/alinea

Stap 2: Afbeelding uploaden of selecteren.

vervolgens kan je de afbeelding uploaden of selecteren uit de mediabibliotheek

Stap 3: Klik op de afbeelding en klaar is kees. 

Wil je dat je WordPress afbeelding naast je tekst doorloopt?

Stap 4: Zorg ervoor dat je bericht tekst bevat en daaronder de afbeelding hebt ingevoegd.

Stap 5: Je kan nu de tekst en afbeelding uitlijnen. Met links en rechts uitlijnen komt deze naast de tekst te staan.

Stap 6: Druk op het pijltje naar boven om de afbeelding naast de tekst te krijgen.

links uitlijnen is ook mogelijk. je kan ook de tekst verdelen door met kolom blokken te werken.

Stap 7: Met de blauwe puntjes kan je de afbeelding van vergroten en verkleinen naar de gewenste grootte.

Liever de video bekijken? Bekijk dan hoe je in WordPress tekst naast je foto krijgt die doorloopt.

Wil je een volledige foto galerij in je pagina plaatsen? Check deze uitleg:

Afbeelding toevoegen in Elementor

Naast de standaard WordPress editor kan je ook gemakkelijk afbeeldingen toevoegen via Elementor. Open een bericht met Elementor en volg onderstaande stappen.

Stap 1: Selecteer de afbeelding widget.

Selecteer de afbeelding widget

Stap 2: Kies bij het grijze afbeelding logo een nieuwe afbeelding om deze toe te voegen. Kies een afbeelding uit je mediabestand of upload een nieuwe afbeelding.

kies vervolgens de afbeelding in elementor

Stap 3: Bij het tabblad Style kan je de grootte van de afbeelding aanpassen naar de door jouw gewenste grootte.

aanpassingen qua formaat doe je in het tabje stijl

Afbeelding toevoegen in Divi

Stap 1: Druk op het + icoontje om een module toe te voegen binnen een bestaande sectie en selecteer de module ‘afbeelding’.

Met het plus icoontje kan je een blok / module toevoegen in divi

Stap 2: Bovenin kan je een nieuwe afbeelding invoegen (of uploaden). Mocht hier een voorbeeld afbeelding staan dan kan je deze vervangen voor je eigen afbeelding.

door op de placeholder afbeelding te klikken kan je die vervangen door je eigen foto.

Eventueel stap 3: Bij het tabblad ‘content’ en ‘ontwerp’ kan je de afbeelding nog bewerken, mocht je dit willen.

Stap 4: Rechtsonder druk je op het vinkje om op te slaan.

Afbeelding toevoegen in WPBakery

WPBakery is naast Elementor en Divi een populaire pagebuilder voor WordPress en heeft ontzettend veel gebruikers. 

Maak je gebruik van WPBakery, dan gaat het invoegen van een afbeelding als volgt:

Stap 1: Druk op het + teken en klik op het element ‘Afbeelding’.

kies het element dat je wilt invoegen in de pagina

Stap 2: Geef een titel op en klik op het + teken.

Kies vervolgens de afbeelding bron en selecteer de afbeelding door op het grijze vlak met groene plusje te klikken

Stap 3: Kies een afbeelding uit je map of upload hier een afbeelding.

Stap 4 (optioneel): Hier kan je ook andere bewerkingen aan je WordPress afbeelding doen zoals het toevoegen van een animatie of het instellen van de grootte, uitlijnen, etc.

Stap 5: Wanneer je op ‘Opslaan’ drukt, sla je de afbeelding op.

Afbeelding toevoegen in de sidebar

Naast de hierboven besproken methoden kan je natuurlijk ook een afbeelding toevoegen in de sidebar. Dit kan door middel van een widget waarmee je de afbeelding in de sidebar plaatst.

Stap 1: Ga naar ‘widgets’ in je WordPress menu.

de widgets & sidebar kan je vinden onder weergave > widget

Stap 2: Sleep de afbeelding widget naar de (blog) sidebar.

Afhankelijk van je WordPress versie kan het widget menu er soms verschillend uitzien.

Stap 3: Kies een afbeelding (of upload deze).

de widget blokken werken vergelijkbaar met de standaard WordPress blokken bewerker

Stap 4: Sla deze op!

Zoals je hebt kunnen lezen zijn er verschillende manieren om afbeeldingen toe te voegen aan je berichten en pagina’s in WordPress.  

Lukt het uploaden van afbeeldingen niet? Worden afbeeldingen niet zichtbaar bij het uploaden? We hebben een aantal veel voorkomende oorzaken op een rijtje gezet in ons artikel WordPress afbeelding upload problemen.

Mocht je nog WordPress problemen ondervinden met afbeeldingen of heb je daar verdere hulp bij nodig? Bekijk dan onze Site Service pakketten of neem contact op.

WordPress Avada thema licentie invoeren

Avada thema licentie invoeren op je WordPress website met deze stapsgewijze handleiding. Ontdek de gemakkelijkste manier om het Avada thema te activeren.

Wat is het Avada thema?

Het Avada thema is naast Elementor en Divi een populair WordPress thema. Avada wordt gebruikt voor verschillende type websites zoals een portfolio, e-commerce, blogs en meer.

Het thema staat bekend om de “drag-and-drop” page builder. Hiermee kan je eenvoudig zelf websites maken zonder ook maar enige kennis van coderen nodig te hebben.

Avada licentie aanschaffen

Ben je van plan om Avada te gebruiken voor jouw website? Je koopt Avada via themeforest.net. Je hebt dan meteen een ‘lifetime’ licentie. Het voordeel hiervan is dat je niet na een bepaalde periode hoeft te verlengen en altijd toegang hebt tot de laatste versie en updates van Avada. Een licentie kost momenteel $69 inclusief 6 maanden support van de ontwikkelaars.

Hoe installeer ik de Avada thema licentie in WordPress?

Gebruik je Avada voor het bouwen van jouw site? Volg dan de stappen hieronder om Avada te activeren.

  1. Ga naar themeforest.net/downloads

  2. Log in met het account waarmee je Avada hebt gekocht en ga naar downloads. Zoek hier naar Avada.

  3. Selecteer bij de groene download knop dat je alleen het licentiebestand in text wil downloaden
    download enkel de license (text) om eenvoudig de licentie code te kunnen kopiëren

  4. Open het gedownloade bestand
    En kopieer de purchase code.
    Het item Purchase Code is een uniek nummer en kan maar 1 keer gebruikt worden.

  5. Ga terug naar WordPress.
    Klik op Avada in je WordPress dashboard en voer hier de code uit de vorige stap in. Dit doe je in het “register your website” veld. Klik vervolgens op “Register now”.

    Voor de zojuist gekopieerde licentie in

Avada elders downloaden (illegaal)

Wanneer je Avada niet volgens de officiële route hebt gekocht, dan loopt je website, los van dat het illegaal is, serieuze veiligheidsrisico’s. Je weet niet waar het bestand precies vandaan komt en welke code er toegevoegd is aan de bestanden. Bovendien mis je support en updates van Avada bij vragen of problemen.

Hulp bij installeren van Avada thema op WordPress

Wil je hulp bij het installeren van het Avada thema op je WordPress site? Of heb je een andere WordPress vraag? Laat het ons weten en wij lossen je WordPress probleem snel op!

Handmatig een WordPress back-up maken

Het is belangrijk om regelmatig een back-up te maken van je WordPress website, zodat je gegevens en bestanden veilig zijn in het geval er iets misgaat. In dit artikel leggen we je stap voor stap uit hoe je een back-up van je WordPress website maakt en hoe je deze kan opslaan en herstellen.

Een handmatige WordPress back-up is handig wanneer

  • WordPress niet meer werkt en je geen backup kan maken met een plugin
  • Je webhosting provider geen backups maakt (ja die bestaan nog…)
  • Je jouw site niet via een plugin kan herstellen omdat die niet werkt
  • Je gedeeltes van een backup wilt terugzetten
  • Deze skill is ook handig te hebben voor systemen anders dan WordPress

Belang van een WordPress back-up maken

Het is belangrijk om altijd een actuele back-up van je WordPress website achter de hand te hebben. Los van het oplossen van onverwachte problemen zijn WordPress back-ups handig (lees ‘een must’) wanneer je nieuwe plugins, thema’s en andere aanpassingen aan je website wilt testen. Er kan tenslotte altijd iets misgaan. Met een recente back-up kan je jouw site altijd weer herstellen naar de situatie voor de aanpassingen.

Maar ook wanneer je jouw WordPress website migreert naar een nieuwe hosting provider of domein gebruik je een back-up om je website weer online te krijgen vanaf je nieuwe hosting provider.

Wist je dat al onze service pakketen inclusief supersnelle webhosting van onze hostingpartner komen? 

Handmatig WordPress backup maken

Bij deze stap leggen we je uit hoe je handmatig zelf een backup maakt van je WordPress website.

Wat heb je nodig?

  • FTP login gegevens
  • Een FTP-programma, meer informatie in deze handleiding
  • Een database programma, Adminer is universeel. Als je webhost phpMyAdmin aanbiedt is dat nog makkelijker

Uitleg video

1. Maak verbinding met je website via FTP

Log in met de FTP-gegevens van je hostingprovider en ga naar de ‘document root’, ook wel de installatie map van WordPress.

Dit is het moeilijkste deel omdat de mappenstructuur per webhosting provider kan verschillen.

In ons artikel FTP-handleiding voor WordPress leggen we dit in meer detail uit.

schermafbeelding van filezilla met actieve connectie
Verbinding maken via ftp in Fillezilla

Rechtsonder zie je nu alle mappen van je website. In de linkerkolom zie je de mappen van je PC. Hierin staan al je plugins, thema’s en afbeeldingen opgeslagen. Sleep nu alle bestanden uit de rechterkolom naar je PC (linkerkolom). Je kan ook enkel de wp-content map en het wp-config.php bestand uit de rechterkolom downloaden.

filezilla highlight wp-content map
sleep minstens de wp-content map naar je pc

De volgende stap is om in te loggen in de database van je website. Hier staan alle teksten, pagina’s, menu’s en instellingen opgeslagen.

Kijk of je webhost phpmyadmin aanbiedt op jouwwebsite.nl/phpmyadmin. Of installeer Adminer en log daarmee in op de database.

highlight wp-config.php
in het wp-config.php bestand kan je de database gegevens terug vinden.

Om in te loggen kan je het wp-config.php bestand raadplegen. Hier vind je de login gegevens van de database.

Open het bestand in kladblok en zoek de regels met daarin DB_USER en DB_PASSWORD. Na de komma, tussen aanhalingstekens vind je de logingegevens.

database gegevens in wp-config.php bestand
hier zie je de WordPress database gegevens terug.

4a. Database exporteren via phpmyadmin

Klik bovenin op ‘Exporteer’ en zorg dat de Indeling op ‘SQL’ staat. Klik vervolgens op ‘Starten’. Je database wordt nu gedownload op je PC. Bewaar deze bestanden veilig!

phpmyadmin database export maken
in phpmyadmin klik je op export en vervolgens op starten

4b. Database exporteren via Adminer

Ga naar Adminer.org en download het programma.

Sleep nu het Adminer-bestand naar de rechterkolom in FileZilla. Kopieer nu de naam van het bestand en plaats dit achter je url in de zoekbalk.

adminer uploaden met filezilla
sleep het adminer bestand van je pc naar je webhost

Er verschijnt nu een login waarmee je kan inloggen op de database van je site via Adminer. Gebruik hiervoor de logingegevens uit het wp-config.php bestand (zie stap 3).

Klik vervolgens op Exporteren > Opslaan > Exporteren om de database te downloaden.

database exporteren in adminer
bij adminer vind je de export knop aan de linkerzijde

Database backup herstellen

Dezelfde tools die je gebruikt voor het downloaden van je WordPress-gegevens gebruik je ook voor het herstellen van je gegevens. In plaats van het exporteren van je gegevens, importeer je ze en sleep je de bestanden van je PC weer naar de webhosting omgeving.

phpmyadmin import database
bij phpmyadmin kan je via import een database backup importeren.

Vragen over back-ups?

Wil jij je WordPress back-ups echt goed geregeld hebben? Standaard inbegrepen en onderdeel van onze WordPress onderhoudspakketten.

“installatie mislukt: Doelmap bestaat al” oplossen

Je probeert een oude plugin opnieuw te downloaden of je probeert een plugin te updaten maar dit lukt niet. Tijdens het downloaden of updaten krijg je de melding ‘Installatie mislukt: Doelmap bestaat al’ (aangeduid in het oranje vierkant).
foutmelding installatie mislukt doelmap bestaat al
Voorbeeld van de foutmelding foutmelding installatie mislukt doelmap bestaat al

Oorzaak: Installatie mislukt: Doelmap bestaat al

In beide gevallen komt de melding ‘Installatie mislukt: Doelmap bestaat al’ omdat er bij jouw hosting provider al een mapje onder de zelfde naam bestaat. De plugin of thema is in principe dan al aanwezig. Het kan ook gebeuren door een update of installatie waarbij de webhosting hapert. Dan ontbreken er bestanden waardoor de map wel aanwezig is in de hosting omgeving maar de bestanden van de plugin om te kunnen functioneren er niet zijn.

Hoe “Installatie mislukt: Doelmap bestaat al” foutmelding verhelpen

Om de Installatie mislukt: Doelmap bestaat al melding te verhelpen zijn er een paar opties. Indien je de plugin wel in het overzicht van alle plugins ziet staan, verwijder die dan, mogelijk moet je de plugin eerst deactiveren. Nu kan je deze opnieuw downloaden. Als de plugin niet in het overzicht staat maar je toch de melding ‘Installatie mislukt: Doelmap bestaat al’ te zien krijgt moet via een andere weg het mapje van de plugin handmatig verwijderd worden. Dit kan met een FTP programma (lees onze FTP handleiding voor WordPress hier), via de bestandsbeheer/filemanager die sommige webhosting providers aanbieden of met een filemanager plugin. Let wel op! De verkeerde map verwijderen kan behoorlijk nadelige gevolgen hebben, zorg dus wel eerst voor een goede backup! Uitleg gaat verder onder de video

Map verwijderen via WordPress file manager plugin

Stap 1: Installeer & activeer de file manager plugin [afbeelding2]
WordPress filemanager plugin installeren
afbeelding 2. Plugins > nieuwe toevoegen > zoeken naar “file manager”. beide zijn vrijwel identiek
Stap 2: Ga naar de file manager in admin [afbeelding 3]
File manager in WordPress admin
Afbeelding 3. de filemanager
Stap 3: Navigeer door de bestanden standaard “wp-content” > plugins (of themes afhankelijk waar de fout zat) Stap 4: Klik de map aan / selecteer en klik op het ‘X’ icoon om te verwijderen [Afbeelding 4] of druk rechtermuisknop op de map en druk ‘delete’.
Map verwijderen
Afbeelding 4. Map verwijderen
Stap 5: Bevestig het verwijderen. [afbeelding5]
Bevestig verwijderen van map
Afbeelding 5. Bevestig verwijderen van doelmap
Nu kan je de plugin weer normaal downloaden en werkt het weer zoals bedoelt. Dit is de meest eenvoudige manier om te doen, echter zijn er ook andere mogelijkheden.

Map verwijderen via FTP

Ook kan je de plugin verwijderen of de naam veranderen via FTP. Onze FTP uitleg kan je hier vinden. Dit gaat via je hosting pakket en kan vrij gemakkelijk gaan, echter moet je wel weten wat je doet, anders kan je het verkeerde verwijderen. Ook heb je de FTP login gegevens nodig van je hostingprovider. Stap 1: Maak verbinding met je hosting pakket In ons voorbeeld maken we gebruik van FileZilla.
inloggen op FTP met Filezilla
inloggen op FTP met Filezilla
Stap 2: Navigeer naar de WordPress ‘root’ In dit voorbeeld staat het in de map Files, andere plekken waar je het vaak kan vinden is in public_html, www, http_docs of soms in het mapje met de domeinnaam zelf. Maak je geen zorgen, je kan gewoon door de mapjes heen klikken om te zoeken, zolang je maar niets zomaar verandert of verwijdert kan dit geen kwaad. Stap 3: Selecteer de wp-content map Wanneer je in de map zit zoals in onderstaande afbeelding met oa. de wp-content, wp-admin en wp-includes mappen dan zit je goed. Navigeer vervolgens naar de wp-content map.
filezilla in de WordPress root / installatie map
Basis inhoud van de WordPress root / installatie map
Stap 4: Selecteer de plugin map Vervolgens klik je door naar de plugins map, of de themes map afhankelijk wat je aan het installeren was op het moment dat de “installatie mislukt: Doelmap bestaat al” melding zich voordoet.
filezilla in de wp-content map
filezilla in de wp-content map, navigeer vervolgens naar de plugins of themes map
Stap 5: Zoek de plugin in kwestie. Deze map kan je vervolgens verwijderen of de naam aanpassen zodat dit niet meer overeenkomt met de ‘doelmap’ De map verwijderen doe je door er met de rechtermuisknop op te klikken of op delete te drukken van je toetsenbord.
filezilla plugin map verwijderen
Verwijder de plugin map die de doelmap bestaat al foutmelding gaf.
Stap 6: Download & installeer de plugin opnieuw. Deze zal nu geen foutmelding meer geven.

Map verwijderen via DirectAdmin

Een veelgebruikte beheer paneel is DirectAdmin. DirectAdmin heeft zelf een bestandsbeheer tool waar je zonder plugin of FTP programma de desbetreffende map kan verwijderen. Qua navigeren door de mappen is dit zeer vergelijkbaar met de voorgaande opties. Stap 1: Druk op Files → Domains → selecteer de domeinnaam waar het om gaat → public_html of private_html → wp-content map → Plugins map.
filemanager knop in DirectAdmin
bestandbeheer van DirectaAmin kan je hier vinden
Stap 2: Zoek de desbetreffende plugin map op en vink deze aan.
DirectAdmin map aanklikken en verwijderen
DirectAdmin map aanklikken en verwijderen
Stap 3: Rechts onderin kan je op de delete knop drukken → OK Vergelijkbare beheerpanels zijn CPanel en Plesk. Die werken vergelijkbaar, enkel zien de knoppen er wat anders uit en kunnen die benamingen wat afwijken. Verder is het qua principe hetzelfde. In de filemanager de juiste map opzoeken en deze verwijderen zodat de ‘doelmap’ niet meer bestaat. Zo krijg je dan ook niet meer de “Installatie mislukt: Doelmap bestaat al” melding. Mocht je er aan de hand van deze uitleg niet uitkomen kan je contact met ons opnemen. Het maken van backups en het fixen van dit soort problemen is inbegrepen bij onze WordPress onderhoudspakketten

Afhaal optie met tijdslot voor WordPress & WooCommerce

Tijdens de persconferentie werd er aangekondigd dat vanaf 10 februari klanten vooraf/online bestelde producten mogen afhalen bij de winkels.
Wel met de voorwaarden dat men niet naar binnen gaat, er minimaal 4 uur zit tussen bestellen en het afhalen én dat men enkel op kan halen in een toegewezen of afgesproken tijdsslot.

Vanuit de expertise die we hebben in WordPress en WooCommerce webshops zullen we een dergelijk systeem zo snel en eenvoudig opzetten tegen zo laag mogelijke kosten.

Wanneer je al een WooCommerce webshop hebt ben je behoorlijk in het voordeel, je kan dan eigenlijk direct naar de laatste stap springen.

Een van de problemen waar je mogelijk wel mee blijft zitten is het afhandelen van de betalingen. Ik verwacht dat dit nog wel te overzien is, minister-president Rutte gaf aan dat er ook telefonisch besteld zou kunnen worden, dat suggereert dat betalen bij ophalen een optie is wanneer je een mobiel pinapparaat hebt (of nog snel regelt). Anders zijn voor zolang als het nodig is betaalverzoeken via de bank of Tikkie ook nog een optie, al vergt dat wat meer arbeid.

Het eenvoudigste is om online iDeal betalingen te accepteren wanneer je klant de bestelling plaatst. Dit kan je laten afhandelen en integreren met een Payment Service Provider als Mollie (gratis account 0,30€ per transactie). Het nadeel hiervan is wel dat je daar na je account aanmaken, deze nog geverifieerd moet worden, dat kan een paar dagen of misschien wel langer duren afhankelijk van hoeveel nieuwe mensen zich daar melden. Kostbare tijd waar je niet op wilt wachten.

Er zijn een aantal punten die niet behandeld worden, omdat dit niet direct noodzakelijk is of buiten de scope van deze eenvoudige click & collect webshop vallen.

We behandelen het volgende niet

  • De website mooi maken met thema’s / grafisch vormgeving
  • Verzendmethode’s en printen van adres labels (het gaat immers om afhalen)
  • Koppeling met boekhoud systeem
  • Koppeling met je voorraad beheer

Mogelijkheid tot afhalen bestelling in WooCommerce

Voor de optie om klanten hun bestelling af te laten halen maken we in dit voorbeeld gebruik van de PI WooCommerce order date time and type **plugin. Deze plugin heeft in de gratis versie nét voldoende opties om aan de regels te voldoen. Zo kunnen we een begin en eind tijd van de dag aangeven voor het afhalen, aangeven dat er tussen bestellen en pick-up 4 uur moet zitten en de klanten zelf een tijdslot laten kiezen.
In de betaalde versie die $34 per jaar kost kan je ook een limiet per tijdvak aangeven en het standaard tijdvak van 15 minuten aanpassen, daar is op dit moment niets over vermeld bij de regels door de Rijksoverheid

Een andere plugin die je hiervoor kunt gebruiken is Local Pickup Plus verkocht via WooCommerce.com, die is met $79,- en zonder gratis versie iets prijziger.
Deze plugin geeft meer opties om te integreren met een bestaande webshop om ook op product niveau ophalen toe te staan of juist niet.

Anyways, we gaan allereerst onder Plugins > Nieuwe plugin

Plugins, sub optie Nieuwe plugin
Nieuwe plugin toeven

Zoeken naar “PI WooCommerce order date time and type
Deze plugin installeren en activeren we.

Weergave van de PI WooCommerce order date time and type plugin in het overzicht van wordpress.org draagt de naam: order date, order pickup, order date time, pickup location, delivery date for woocommerce
Zoals PI WooCommerce order date time and type in de resultaten naar voren komt

In het admin menu onder “WooCommerce” komt nu een extra sub-menu item te staan genaamd “Date & Time”. Klik daar op, laat je niet afschrikken door de felle kleuren, ze willen je erg graag de pro versie verkopen ????

In de afbeelding heeft alles wat enkel beschikbaar is in de pro-versie een rode laag, en kan genegeerd worden.
De belangrijk punten zijn 1 t/m 6 genummerd, lees de tekst onder de afbeelding goed, de instellingen zoals op de afbeelding zijn niet de juiste.

opties van de pickup plugin
opties 1 tm 6

  1. Hier kan je aangeven of je enkel pick-up (afhalen) wilt toestaan, enkel delivery (bezorgen) of beide. Kies je voor beide dan komt er boven de afreken pagina een balk te staan met 2 knoppen zoals in de afbeelding hier onder.
    weergave in checkout wanneer bezorgen en afhalen beide actief zijn
    Weergave wanneer bezorgen én afhalen beide actief zijn

    Let wel op dat bij de bezorg optie ook nog een datum en tijd selectie is! Heb je al een normale webshop dan kan je beter de Local Pickup Plus plugin gebruiken, dan blijven je normale verzend-opties behouden naast het afhalen!

  2. Delivery type label, deze kan er waarschijnlijk wel uit, de tekst is in het Engels en kan je niet eenvoudig aanpassen. Daarnaast is de tekst op de knoppen zelf al wel duidelijk toch?
  3. Enable Delivery date and time moet op Yes, anders kunnen je klanten geen tijdslot kiezen en krijgen ze die ook niet toegewezen.
  4. Preorder days, maximum in de gratis versie is 10. Dit is het aantal dagen in de toekomst dat gekozen kan worden voor het ophalen.
  5. Order Preparation days, het minimum vanuit de overheid is 4 uur, je kan echter ook kiezen dat er een dag tussen moet zitten, dan kan je hier een 1 invoeren.
    Wanneer je het aantal dagen op 0 zet verschijnt optie 6
  6. Order Preparation minutes, verschijnt wanneer het aantal dagen in punt 5 op 0 staat. Vier uren hebben gezamenlijk 240 minuten dus dat kunnen we hier invullen. Dit kan natuurlijk ook meer zijn als je dat wilt.

De volgende punten zijn iets minder spannend maar gaan vooral over de weergave.

vervolg van de instellingen
vervolg opties 7 tm 11

  1. Pickup label – De tekst in de knop voor ‘Afhalen’
  2. Delivery label – De tekst in de knop voor ‘Bezorgen’
  3. Default Delivery Type – Pickup (afhalen) dat is immers waar we ons op richten, maar voel je vrij om dit op verzenden (delivery) in te stellen.
  4. Time Format – Standaard is AM/PM, ik weet niet hoe het met jou zit maar ik blijf dat verwarrend vinden, met mij waarschijnlijk nog heeeeel wat Nederlanders, instellen op de 24HR klok is het handigste.
  5. Hier kan je de kleuren selecteren van de knoppen en tekst zoals die bij punt 1 in de afbeelding staan.

Vervolgens even verder naar beneden scrollen om alle instellingen op te slaan.
Dan kunnen we daarna door naar het tabje “Time setting”

tijd instellingen voor afhaal
openingstijden instellen voor afhalen

Als je zowel pickup als delivery aan hebt staan heb je hier 4 invoervelden.
staat enkel pickup aan dan heb je er maar 2.
Het invoeren van verschillende tijden per dag is enkel mogelijk in de betaalde versie.

in de afbeelding staat het ophalen op 10:00 AM, tien uur in de ochtend,
tot en met 06:00 PM, zes uur in de avond.

De ‘pro’ tabjes kunnen we vervolgens overslaan en dan is “Date setting” aan de beurt!

instelling voor dagen om af te halen.
aangeven op welke dagen afhalen mogelijk is

Hier kan je aangeven op welke dagen bestellingen bezorgd / afgehaald kunnen worden.
Meerdere dagen selecteren in de lijsten kan door op het toetsenbord de CTRL toets (CMD op Apple) ingedrukt te houden en vervolgens meerdere dagen aan te klikken.

In het volgende tabblad “Pickup Locations” kunnen we het afhaal adres invoeren.

ophaal locatie invoeren
Ophaal / winkel locatie

Misschien is de <br/> je al opgevallen, hiermee kan je het adres over 2 regels knippen voor de bezoeker.
Wanneer je meerdere locaties hebt kan je in de gratis versie er 2 toevoegen, in de betaalde versie onbeperkt.
Bij 1 afhaal locatie is het verleidelijk om dit eerste vlak leeg te laten, dan krijgt men de knop in het bestel proces niet te zien zoals in de afbeelding hier onder.

weergave in checkout
weergave in checkout

Het nadeel is dat het adres dan ook niet mee wordt gezonden in de bevestigingsmail richting je klant.

bestelling details in de mail ophaal / pickup locatie, datum en tijd
Hoe de bestelling details in de bevestigingsmail komen te staan

Daarnaast heeft deze plugin ook nog een “Order Calendar for WooCommerce” waarvan eigenlijk alleen de betaalde $25/jaar versie handig is in deze situatie.

Bij de betaalde versie is namelijk zichtbaar welke bestellingen op welke dag & tijdsslot vallen.
Iets wat bij Local Pickup Plus wel standaard aanwezig is, wanneer je verwacht veel volume te gaan draaien kan dat een betere keus zijn. Maar die $79 die je bespaart kan je natuurlijk ook eerst in een kleine promotie campagne steken.

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.