Standaard zit er een eenvoudig registratieformulier ingebouwd in WordPress. Maar met de juiste tools kan je allerlei aanpassingen maken, zoals een logo toevoegen of het formulier op een openbare pagina zetten.

Elke website heeft zijn eigen vereisten wat betreft gebruikersregistratie en de bijbehorende module. Daarom is het belangrijk om weten hoe je je eigen custom WordPress registratieformulier toevoegt én beheert.

Het goede nieuws is dat je registratieformulieren in allerlei vormen en maten kan vinden. Zo heb je de mogelijkheid om een custom registratieformulier voor WordPress te bouwen en te beheren via een plugin voor gebruikersregistratie en waarmee je ledenprofielen en huisstijlelementen kan toevoegen.

Maar misschien zoek je wel een integratie met een externe registratietool, of wil je het gewoon simpel houden en alleen wat kleine veranderingen binnen de standaard registratiemodule in WordPress aanbrengen.

Wat je ook nodig hebt en wat je ook zoekt van een custom WordPress registratieformulier, je kan kiezen uit diverse oplossingen: voor het activeren van eenvoudige registratieformulieren tot geavanceerde inlog- en registratiepagina’s met features die gebruikersberichten en inloggen via social-mediaprofielen mogelijk maken.

Lees verder voor meer informatie over gebruikersregistratie in het algemeen, en de basis achter het toevoegen van een nieuwe, volledig aan te passen WordPress registratieformulier.

What Is User Registration?

Gebruikersregistratie is simpelweg het proces waarbij een bezoeker een profiel op je website maakt.

Deze registratie, ook wel inschrijving genoemd, is bijvoorbeeld een nieuwe klant op een website zoals een e-commerce winkel, een lid dat zich aanmeldt op een forum of een lezer die zich registreert op een blog.

Het proces voor de gebruikersregistratie vereist dat iemand bepaalde contactgegevens intypt voor het maken van een account. Dat kan zo simpel zijn als gewoon een combinatie van een gebruikersnaam en een wachtwoord. Maar het is gebruikelijker dat er tenminste een veld voor een e-mailadres bij zit, zodat het herstellen van een wachtwoord ook mogelijk is.

De standaard WordPress registratiepagina vraagt om een gebruikersnaam en e-mailadres. Daarna wordt er gevraagd om een wachtwoord in te stellen.

Voorbeeld van een WordPress registratieformulier
Voorbeeld van een WordPress registratieformulier

Je kan ook veel uitgebreidere inschrijvingsformulieren vinden met velden voor bijvoorbeeld geslacht, adres en geboortedatum. Je ziet dergelijke gedetailleerde formulieren vooral vaak op plekken zoals datingsites of sociale netwerken. Zelfs website als Netflix bieden optionele vragen bij je gebruikersregistratie, om je beter bepaalde series en video’s te kunnen aanbieden die je wellicht interessant vindt.

Een gebruikersregistratieformulier is natuurlijk niet nodig wanneer je niks speciaals te bieden hebt aan die geregistreerde gebruikers, of wanneer je geen gebruikersdatabase bij wil houden. Maar een bezoeker is een waardevol onderdeel van een online bedrijf, dus je kan meestal het beste een reden verzinnen om gebruikers op je website te registreren.

Gebruikersregistratie biedt ook mogelijkheden voor het instellen van gebruikersrollen, waarbij je verschillende gebruikers verschillende rechten kan geven op je website.

Gebruikersrollen voor WordPress registratieformulieren
Gebruikersrollen voor WordPress registratieformulieren

In het algemeen biedt een gebruikersregistratiemodule een online ruimte aan voor je gebruiker, waar ze kunnen zien wat hun status en activiteit op je website is. Een website zoals eBay of Marktplaats laat bijvoorbeeld in het gebruikersprofiel zien waar je in het verleden op geboden hebt, en wat je hebt gekocht. En dat kan alleen maar verzameld worden wanneer iemand het gebruikersregistratieformulier invult om dat profiel aan te kunnen maken.

Nu we de basics van gebruikersregistratie snappen en welk doel het heeft, gaan we verder kijken naar waarom je een inschrijvingsformulier zou willen toevoegen aan je WordPress website.

Voordelen van WordPress registratieformulieren

Bij het bouwen van een website vraag je je wellicht af wat het doel is van een WordPress registratieformulier. In het algemeen is het zo dat je gebruikers iets van een voordeel geeft wanneer ze een account aanmaken. Soms betekent dit dat ze toegang tot een forum krijgen of dat ze hun aankoopgeschiedenis of contact met andere gebruikers kunnen zien.

Registratieformulieren voegen dus waarde toe voor gebruikers die een account aanmaken. De eigenaar van de website krijgt daarnaast een aanzienlijke bonus qua organisatie en verzameling van data.

Daar zitten een hoop voordelen aan, maar dit zijn de belangrijkste:

  • Betere organisatie en feedback van, en interactie met je gebruikers – Geregistreerde gebruikers versturen een significante hoeveelheid informatie, waardoor je deze gebruikers beter kan beheren. Het maakt het ook mogelijk om contact te leggen met je bezoekers en belangrijke feedback te ontvangen waarmee je je website kan verbeteren, in plaats van dat je geen idee hebt wie je blog leest of je producten koopt.
  • Groei van je e-maillijst – Wanneer je inschrijvingsformulier een e-mailadres vraagt, verzamel je data die later belangrijk is. Geregistreerde gebruikers kun je toevoegen aan je e-mailmarketingprogramma, waarmee het makkelijker wordt om mensen te bereiken met e-mails over acties en kortingen, nieuwe producten of nieuwe artikelen.
  • Overige dataverzameling – Een registratieformulier hoeft niet alleen maar te vragen om een naam en e-mail. Ze kunnen ook andere zaken over de achtergrond van je gebruikers vragen. Je kan custom velden toevoegen die van alles vragen, van de lengte en gewicht van je bezoekers tot hun favoriete boeken.
  • Beveiliging voor je site en je gebruikers – Spam door geregistreerde gebruikers voegt vaak een lading ongewenste rommel toe aan een website, die je al beheerder of moderator vaak handmatig moet verwijderen of filteren. Maar een sterk inschrijvingsformulier verbetert juist de beveiliging van je website en voorkomt ongenode gasten.
  • Geavanceerde gebruikersrechten – Registratie maakt het mogelijk om als beheerder verschillende gebruikers verschillende rechten (ook wel gebruikersrollen) toe te wijzen, waardoor alleen bepaalde gebruikers bijvoorbeeld een deel van je content of functies kunnen zien. Andere gebruikersrollen hebben dan wel toegang tot je website, maar niet tot alles. Dit is vooral van belang voor ledenwebsites en wanneer je verschillende mensen hebt die bijdragen aan je website, zoals mede-auteurs en editors.
  • Een prettige gebruikerservaring – Eén van de belangrijkste doelen van gebruikersregistratie is het bieden van een gecentraliseerd deel voor individuele gebruikers waar ze hun status als gebruiker kunnen zien. Dergelijke profielen verbeteren de algehele gebruikerservaring door het tonen van belangrijke informatie, bijvoorbeeld aankoopgeschiedenis of berichten van andere gebruikers.
  • Ledenwebsites met profielbeheer – Een registratieformulier is handig voor het bouwen van een complete ledenwebsite, aangezien een profiel altijd belangrijk is binnen een ledenwebsite. Gebruikers vinden het vaak fijn om hun eigen profiel te kunnen beheren, of het nou op een sociaal netwerk, forum of exclusief online lesplatform

Wat is de beste manier om een registratieformulier op WordPress te zetten?

Technisch gezien zijn er honderden manieren om een registratieformulier toe te voegen aan je WordPress website. Elk formulier is natuurlijk weer anders, wat het ontwerpen ervan dan ook uniek maakt, helemaal als je je eigen custom velden wil toevoegen.

Toch zijn er vier manieren die het vaakst worden gebruikt om een gebruikersregistratieformulier te maken. Met de juiste tools en kennis is elk van deze opties een goede keuze.

Je kan een registratiemodule activeren op de volgende manieren:

  • Schakel de ingebouwde WordPress gebruikersregistratie in.
  • Neem een gebruikersregistratieformulier op via een externe oplossing.
  • Installeer een registratiemodule via een WordPress plugin.
  • Programmeer je eigen inschrijvingsgebied.

De grote vraag is natuurlijk: wat is de beste manier voor jou?

Dat is lastig om te zeggen, maar je zakelijke doelen en welke functies je zoekt, spelen een belangrijke rol bij je overwegingen:

  • De standaardregistratie van WordPress – dit is de snelste en eenvoudigste manier om gebruikers te gaan registreren op je website. Maar het is niet ideaal als je een lang formulier wil of speciale dingen wil vragen tijdens de registratie. De ingebouwde registratie bij WordPress is dus ideaal voor kleinere websites en blogs die alleen een naam en e-mailadres nodig hebben. Onthoud daarbij dat je weinig zelf kan ontwerpen aan het standaard formulier van WordPress.
  • Het gebruiken van een externe registratiemodule – je kan externe software of een app integreren met je WordPress website. Dit proces is vooral een logische keuze wanneer je een programma hebt gevonden met de precieze features die je zoekt voor jouw formulier, maar die je niet in de vorm van een WordPress plugin kan krijgen. Een extern formulier is soms wat lastiger te gebruiken dan een plugin, omdat je meestal zelf moet uitvogelen hoe je de registratiemodule kan instellen en weergeven op je WordPress website, bijvoorbeeld door een embedcode.
  • Gebruik een registratieplugin – Wij vinden plugins voor gebruikersregistratie meestal het handigst vanwege twee redenen. Allereerst hoeft je niet zelf aan de slag met code of tools van externe partijen. Ten tweede bieden de betere plugins enorm veel functies, waardoor het voor iedereen eenvoudig wordt om prachtige registratieformulieren te ontwerpen en implementeren. Daarom zijn plugins dus een goede keuze voor zowel beginners zonder programmeerkennis en tegelijk voor developers die simpelweg een eenvoudige oplossing zoeken.
  • Zelf een registratieformulier programmeren – Deze optie is natuurlijk alleen voor organisaties die een complete unieke interface willen gebruiken voor het registreren van gebruikers. Je moet daarbij natuurlijk wel de mensen in huis hebben die dat custom formulier kunnen programmeren, of je moet een developer in kunnen huren.

Hoe maak je een WordPress registratieformulier zonder een plugin?

Het is mogelijk een registratieformulier toe te voegen aan WordPress zonder een nieuwe plugin te installeren. De reden waarom je dit zou doen, verschilt nogal. Aan de ene kant zijn er beheerders die kiezen voor het ingebouwde registratieformulier van WordPress. Aan de andere kant vind je de meer geavanceerde route via externe software of het schrijven van eigen code.

We zullen de stappen voor elke methode langsgaan.

Activeren van de standaardfunctionaliteit voor gebruikersregistratie in WordPress

WordPress biedt een registratieformulier en plek voor gebruikersbeheer zodra je dit platform, ook wel Content Management System genoemd, installeert. De registratiefuncties staan niet standaard ingeschakeld, dus je moet een aantal stappen doorlopen om ervoor te zorgen dat je bezoekers inderdaad een profiel kunnen aanmaken.

Onthoud dat dit registratieformulier echt het absolute minimum is qua mooi ontwerp van een formulier. Desalniettemin is het afdoende voor bijvoorbeeld blogs of kleinere websites die alleen hun gebruikers de mogelijkheid willen geven een gebruikersnaam en wachtwoord aan te maken.

Om hiermee te beginnen ga je naar je WordPress dashboard.

Klik op Settings > General.

WordPress instellingen
WordPress instellingen

Wanneer je verder naar beneden scrolt, kom je op gegeven moment het deel Membership tegen. Vink het selectievakje hier aan zodat bezoekers op je website zich kunnen registreren als nieuwe gebruiker.

Daarna kan je het New User Default Role veld aanpassen zodat elke nieuwe gebruiker een gebruikersrol krijgt toegewezen met bijbehorende rechten.

De Subscriber gebruikersrol is het meest gebruikelijk voor gewone leden en klanten. Contributors en Authors hebben toegang tot een aantal van de tools voor het maken van content, terwijl Editors ook content kunnen publiceren en de Administrators de controle hebben over elk onderdeel van de website.

Zorg ervoor dat je de veranderingen opslaat.

Gebruikersrollen
Gebruikersrollen

Je zet zo een unieke registratie- en inlogpagina op waar mensen heen kunnen gaan als ze toegang willen tot je website.

Standaard kan je dit formulier vinden op: voorbeeldsite.com/wp-login.php. Je kan deze URL veranderen, maar alle WordPress inlog– en registratiepagina’s beginnen meestal met de wp-inlog.php submap.

Je zou daar een formulier moeten zien dat de bezoeker vraagt om in te loggen met een gebruikersnaam en e-mailadres, samen met hun wachtwoord. De pagina bevat ook een link waarop je je kan registreren voor de website, een vergeten wachtwoord kan herstellen en terug kan gaan naar de startpagina.

Standaard URL voor een WordPress registratieformulier
Standaard URL voor een WordPress registratieformulier

Nu je de gebruikersregistratie geactiveerd hebt, kan je een registratieformulier plaatsen aan de front-end van je site.

De makkelijkste manier om een registratieformulier te installeren op WordPress is door een widget toe te voegen.

Ga naar Appearance > Widgets in het WordPress dashboard.

Het tabblad widgets in WordPress
Het tabblad widgets in WordPress

De lijst met Available Widgets laat verschillende keuzes zien, zoals custom HTML, afbeeldingen en een Meta widget. Deze widgets worden allemaal standaard aangeboden door WordPress, dus je hoeft verder niks te installeren.

Zoek de Meta widget op. Dit activeert een module waar gebruikers kunnen inloggen, registreren en naar andere WordPress links kunnen doorklikken.

Selecteer de Meta widget.

De Meta widget in WordPress
De Meta widget in WordPress

Alle thema’s verschillen van elkaar, dus misschien heb je een footer, zijbalk, header of een combinatie van deze widgetgebieden. Je kan de Meta widget plaatsen in een widgetgebied naar keuze.

Ons huidige testthema heeft alleen een paar footers, dus we plaatsen de Meta widget meteen in de eerste. Hierdoor zullen de websitebezoekers meteen het inlog- en registratieformulier zien, op welke pagina ze ook aankomen.

Selecteer de gewenste locatie voor de widget en klik op Add Widget.

Toevoegen van een widget
Toevoegen van een widget

De Meta widget is nu geplaatst en opgeslagen in de footer (of in jouw geval misschien een andere widgetruimte).

Klik je nu op de Meta widget, dan zul je zien dat het niet veel content of aanpasbare velden bevat. Dat is allemaal voor je gedaan.

Maar de Meta widget maakt het wel mogelijk om de titel aan te passen. Let erop dat je de widget opslaat na eventuele aanpassingen.

Bewerken van de Meta widget
Bewerken van de Meta widget

Ga naar de front-end van je website om de registratielink in levende lijve te zien:

Registratieformulier aan de frontend
Registratieformulier aan de frontend

Nadat je uitgelogd bent op je testaccount, zul je links met Register en Log In zien waar gebruikers op kunnen klikken, en waar ze een nieuw profiel kunnen maken of kunnen inloggen op hun bestaande profiel.

Registratielinks
Registratielinks

Zoals we eerder zagen komt de gebruiker aan op de standaard WordPress registratiepagina als ze klikken op de Log In of Register link. Daar wordt ze bij registratie gevraagd een gebruikersnaam, e-mailadres en wachtwoord in te voeren.

Het standaard registratieformulier van WordPress
Het standaard registratieformulier van WordPress

Zo verander je het registratie- en inlogformulier

Naast het schrijven van je eigen code, heb je diverse manieren om de standaard inlog- en registratiepagina van WordPress aan te passen.

Het aanpassen van het ontwerp van de WordPress inlogpagina versterkt zowel je huisstijl als beveiliging. Het is logisch om je eigen logo en kleuren te gebruiken op de registratiepagina, vooral wanneer het om online community’s voor klanten gaat, waar de inlogpagina één van de eerste pagina’s is die je klanten zien.

De andere reden waarom je de structuur van je inlogpagina zou willen veranderen is het voorkomen van ongewenste indringers. Dit doe je bijvoorbeeld door de URL van de registratiepagina te veranderen (aangezien de wp-login.com URL nogal voor de hand ligt) en door extra beveiliging toe te voegen, zoals een spamcheck.

Het veranderen van het ontwerp en logo van de registratiepagina

Je kan het WordPress logo eenvoudig vervangen door je eigen logo op de registratiepagina, waardoor je meer je eigen huisstijl laat zien tijdens het inloggen en registreren.

Je hebt verder de mogelijkheid om met een plugin het hele ontwerp van de pagina aan te passen, waardoor je je eigen unieke stijlen en kleurenschema’s kan gebruiken om jezelf te onderscheiden.

Sommige mensen willen alleen maar gewoon het WordPress logo vervangen met hun eigen logo. Dit is gelukkig vrij simpel te regelen en hier heb je geen plugin voor nodig.

Je doet dit door je eigen logo te uploaden naar de WordPress Mediabibliotheek. Dit kan via Media > Add New.

Toevoegen van een nieuw logo
Toevoegen van een nieuw logo

Op deze pagina kan je het logo uploaden vanaf je computer door op “Select files” te klikken en het gewenste afbeeldingsbestand te selecteren op je computer.

Uploaden van een nieuw logo voor je custom WordPress registratieformulier
Uploaden van een nieuw logo voor je custom WordPress registratieformulier

Na het uploaden zoek je het logo op en klik je op de Edit link van de afbeelding.

Aanpassen van het nieuwe logo
Aanpassen van het nieuwe logo

Kopieer de File URL van de afbeelding. Sla de link op in een tekstbestand of iets dergelijks.

Kopiëren van de URL van het logo voor het WordPress inschrijvingsformulier
Kopiëren van de URL van het logo voor het WordPress inschrijvingsformulier

Vervolgens ga je naar het functions.php bestand van je website. Plak het volgende stukje code in dat bestand. Je kan het meestal het beste aan het einde van het bestand plakken:

function wpb_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(http://your-logo.png);
height:200px;
width:600px;
background-size: 600px 200px;
background-repeat: no-repeat;
padding-bottom: 20px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Zoek de tekst “http://jouw-logo.png” en vervang dat met de afbeeldings URL van je eigen logo dat je net opgeslagen hebt.

Verder heb je de mogelijkheid om de hoogte en breedte van je logo aan te passen op basis van de huidige grootte van het bestand. Probeer eens een beetje met de code te spelen met de preview, tot je een resultaat krijgt waar je helemaal tevreden over bent.

Lees ook de officiële WordPress documentatie over het aanpassen van het inlogformulier mocht je nog meer vragen hebben of andere aanpassingen willen doen.

Een plugin gebruiken voor meer aanpassingen van de registratiepagina

Je kan er ook voor kiezen om een plugin te gebruiken om het logo op de inlogpagina te veranderen.

De LoginPress Customizer plugin biedt zelfs een compleet systeem voor het wisselen van het logo en het aanpassen van nagenoeg elk aspect van je registratiepagina.

LoginPress voor je WordPress registratieformulier
LoginPress voor je WordPress registratieformulier

Om LoginPress te gebruiken installeer je de plugin zoals gebruikelijk en ga je vervolgens naar LoginPress > Customizer in het WordPress dashboard.

De plugin biedt nog veel meer instellingen, maar we zijn nu vooral geïnteresseerd in de aanpassingstools.

Dit brengt je naar de normale WordPress Customizer, maar dan met een speciale pagina puur voor het aanpassen van het registratieformulier en pagina.

De plugin heeft diverse voorgebouwde thema’s in de premiumversie, maar de meeste ontwerpfuncties zijn gratis te gebruiken.

Zoals je kan zien zijn er allerlei instellingen mogelijk voor het instellen van het logo, de achtergrond, het inlogformulier en nog veel meer. Er zit al meteen een achtergrond bij die er heel anders uitziet dan de standaard achtergrond van WordPress.

Thema builder voor het WordPress registratieformulier
Thema builder voor het WordPress registratieformulier

De plugin biedt een visuele builder. Om het logo te veranderen hoef je dus alleen maar naar het logo te gaan en te klikken op “Change Logo”.

Veranderen van het logo in het registratieformulier
Veranderen van het logo in het registratieformulier

Upload een logo van je computer en pas de breedte en hoogte aan zodat het goed past.

Aanpassen van je logo
Aanpassen van je logo

Vervolgens ga je naar het tabblad Background om je eigen achtergrond te uploaden of één te kiezen van LoginPress. Je kan ook voor een achtergrond met een effen kleur gaan.

Met één klik op de knop verander je de bloemetjesachtergrond naar een achtergrond met blaadjes.

Instellen van een achtergrond
Instellen van een achtergrond

Er zijn ook allerlei andere tabbladen te vinden waarmee je de instellingen voor de registratiepagina kan aanpassen.

We raden je aan om deze allemaal even door te neuzen, inclusief de optie om de grootte en locatie van het formulier compleet om te gooien. Je kan alles veranderen, van het welkomstbericht tot het gebruik van Google Fonts, allemaal zonder code.

Extra instellingen voor je WordPress inschrijvingsformulier
Extra instellingen voor je WordPress inschrijvingsformulier

Aanpassen van de URL van je registratiepagina

Het is belangrijk om even na te denken of je een nieuwe URL voor de registratiepagina wil. We hebben eerder al genoemd dat je de registratiepagina standaard kan vinden op voorbeeldsite.com/wp-login.php.

Aangezien WordPress de /wp-login.php subdirectory voor alle inlogpagina’s gebruikt, weet ook elke hacker precies waar je inlogpagina zit. Alhoewel ze nog altijd een bruteforce-aanval moeten doen om het inlogformulier te hacken, voeg je wel weer een laag beveiliging toe, waardoor ze de pagina niet zo makkelijk automatisch kunnen vinden.

De beste beveiliging is echter de WPS Hide Login plugin te installeren. De plugin handelt alle redirects af en verbergt je oude registratiepagina, waardoor je alleen maar hoeft te beslissen op welke subdirectory je het formulier wil hebben.

WPS Hide Login WordPress plugin
WPS Hide Login WordPress plugin

We hebben ook een tutorial voor het installeren en gebruiken van de WPS Hide Login plugin. Volg deze stappen voor het veranderen van je inlog URL. Het is in feite een volledig geautomatiseerd proces waarbij je een nieuwe sub-directory intypt voor je inlog URL en de redirect URL (als je die ook wil aanpassen).

Vervolgens doet de plugin al het ingewikkelde werk voor je, waarbij het resultaat iets is als wat je in het volgende screenshot ziet.

Veilige URL
Veilige URL

Hoe maak je een WordPress registratieformulier via een geavanceerde plugin?

De vorige manieren voor het activeren en aanpassen van het registratieformulier doen hun werk middels het aanpassen van het standaard formulier van WordPress. Het WordPress formulier biedt zeker een goede basis, maar dat is niet voor iedereen voldoende.

Want stel dat je website bijvoorbeeld extra velden nodig heeft voor bijvoorbeeld telefoonnummers of postadressen? Zou het niet mooi zijn als je gewoon je eigen custom velden kan aanmaken zodat je precies kan doen met je inschrijvingsformulier wat je zelf wil?

Een registratieformulier dat je zelf programmeert is misschien wel de beste optie, maar kan ook erg uitdagend zijn. De één-na-beste optie? Een WordPress plugin.

Waarom zou je immers tijd en moeite steken in het ontwikkelen van een formulier als dit ook met een plugin kan?

De beste WordPress plugins voor registratieformulieren

Neem eens een kijkje bij ons artikel over de beste WordPress plugins voor gebruikersregistratie. Het bespreekt een breed aanbod van plugins die allemaal geschikt zijn om registratiemodules mee te maken en te stijlen, zonder dat je verstand van programmeren hoeft te hebben.

Sommige plugins bieden unieke tools voor het gebruiken van een grote verzameling custom velden, terwijl anderen meteen ledendatabases voor je activeren, zodat je je ledenadministratie op orde kan brengen.

We raden je van harte aan om dat artikel door te lezen om de beste registratieplugin voor jouw situatie te vinden, maar hieronder alvast een korte lijst met onze persoonlijke favorieten:

Deze plugins focussen op het bouwen van inlogformulieren voor leden, bieden specifieke gebieden voor registratie en leveren tools waarmee je je gebruikers aan de hand kan nemen langs een soepel inschrijvingsproces.

Ook kan je in plaats daarvan natuurlijk ook een algemene formulierenplugin gebruiken, zodat je niet uitkomt bij een plugin die zich te specifiek richt op een bepaalde functie of sector.

Zo is het bijvoorbeeld prima mogelijk om een custom WordPress registratieformulier te maken met de Contact Form 7 en Gravity Forms plugins.

We zullen de stappen daarvoor in het volgende deel langslopen.

Een WordPress registratieformulier maken met Contact Form 7

Contact Form 7 biedt de meest eenvoudige tools voor contactformulieren voor WordPress. Het is extreem populair, betrouwbaar en simpel genoeg om er goed uit te zien op elke denkbare website. Daarnaast zorgt het eenvoudige ontwerp ervoor dat elke developer er zo mee aan de slag kan om hun eigen code erop los te laten.

Contact Form 7 plugin
Contact Form 7 plugin

Een standaardformulier kan heel goed gebruikt worden als registratieformulier, maar die formulieren gaan wel standaard naar een andere database, en registreren je nieuwe gebruikers dus niet automatisch in je WordPress gebruikersdatabase. In plaats daarvan krijg jij als beheerder e-mails met de ingevulde contactformulieren, inclusief eventuele gebruikersdata waar je in het formulier om gevraagd hebt. Je kan die informatie zelf natuurlijk gaan bijhouden in een spreadsheet, maar dat is niet echt ideaal.

Voor sommigen kan dit natuurlijk wel een prima oplossing zijn. Je kan je lijst van Contact Form 7 importeren naar een contactmanagementplugin of soortgelijke software. Je hebt ook de mogelijkheid om die lijst te importeren in je WordPress gebruikersdatabase.

Maar wij zouden dit graag wat beter stroomlijnen door Contact Form 7 te linken aan een extensie die je formulieren van Contact Form 7 meteen omzet naar de daadwerkelijke gebruikersregistratieformulieren van WordPress.

Er zijn twee verschillende manieren waarop je je formulieren van Contact Form 7 in normale registratieformulieren kan omzetten:

  • Gebruik een plugin.
  • Voeg je eigen code toe.

Zoals met veel taken in WordPress, houden wij het graag bij plugins, aangezien het met eigen code al snel ingewikkeld kan worden.

Daarom is de eerste stap het installeren van de Contact Form 7 plugin en een extensie plugin die Frontend Registration – Contact Form 7 heet.

Frontend Registratie
Frontend Registratie

Nadat je ze beide hebt geactiveerd ga je naar je WordPress dashboard, en vervolgens naar Contact > Contact Forms.

Knop voor contactformulieren
Knop voor contactformulieren

Klik nu op Add New om een nieuw formulier te maken, of gebruik het standaardformulier dat de plugin al voor je heeft gemaakt.

Het maken van je eerste formulier
Het maken van je eerste formulier

In Contact Form 7 worden alle formulieren gemaakt via een eenvoudige template die stukjes voorgeprogrammeerde tags gebruikt. Voor elk veld is de “label tag” de tekst die boven elk veld bij het formulier wordt getoond.

De “form tag”, het stukje tekst tussen de [ ] rechte haken, maakt het daadwerkelijke veld aan in het formulier waar de gebruiker de informatie kan intypen.

Het standaardformulier van Contact Form 7 bevat velden voor Name (naam), Email, Subject (onderwerp), en Message (bericht). Dat is een logisch formulier voor een standaard contactformulier, maar bij een registratieformulier is een onderwerp en bericht meestal overbodig.

Verwijder deze velden dus.

Verwijderen van de labels
Verwijderen van de labels

De knoppen boven je formuliermaker zijn voor het opnemen van extra field tags.

Zo zou je bijvoorbeeld misschien ook de telefoonnummers van je nieuwe gebruikers willen weten. Om dat te doen kies je de “tel” tag en plaats je deze in je formulier. Andere tags zijn de URL optie voor websites en selectievakjes of keuzerondjes om specifieke vragen te stellen.

De tel tag
De tel tag

De plugin voegt het veld toe, maar je moet zelf de Label tags toevoegen (dus de titel van het veld die de gebruiker ook ziet). Je kan deze simpelweg kopiëren van één van de andere velden en het label veranderen naar bijvoorbeeld “Je telefoonnummer”.

Zorg ervoor dat je het label altijd afsluit met </label>.

Sluiten van de tag
Sluiten van de tag

Sla het formulier op.

Je zal een unieke shortcode zien, iets dat wordt toegewezen aan elk formulier dat je in Contact Form 7 maakt. Hiermee kan je het formulier plaatsen waar je ook maar wilt, of het nou de zijbalk is of een gewone pagina.

Contact Form 7 shortcode
Contact Form 7 shortcode

Voel je vrij om die shortcode meteen te kopiëren als je van plan bent om die shortcode te gebruiken om je formulier weer te geven.

Je kan ook een block gebruiken via de Gutenberg editor.

Nu kan je je formulier gaan toevoegen aan een pagina. Klik op het tabblad Pages in WordPress, voeg een nieuwe pagina toe of ga naar een pagina die je eerder al hebt gemaakt.

Toevoegen van een nieuw pagina
Toevoegen van een nieuw pagina

Voor deze tutorial noemen we deze pagina “User Registration”. Deze beschouwen we als de belangrijkste plek waar bezoekers zich kunnen inschrijven op de testsite.

In de visuele editor klik je op “Add Button”.

Toevoegen van een block in de blockeditor
Toevoegen van een block in de blockeditor

Zoek het Contact Form 7 block en selecteer deze.

Contact Form 7 block
Contact Form 7 block

Hier krijg je een dropdown-menu met alle contactformulieren die je gemaakt hebt binnen de Contact Form 7 plugin.

We hebben er nu nog maar één, dus die kiezen we.

Kiezen van het formulier
Kiezen van het formulier

Een alternatief voor de Gutenberg Editor blocks is het gebruiken van de shortcode van het formulier. Je kan dit doen in de traditionele WordPress editor of met een Gutenberg Shortcode block. Het zijn twee manieren met hetzelfde resultaat.

Publiceer deze pagina zodat deze te vinden is via de front-end van je website.

Toevoegen van een shortcode voor je WordPress registratieformulier
Toevoegen van een shortcode voor je WordPress registratieformulier

De volgende stap is het activeren van de functies van gebruikersregistratie voor Contact Form 7. Dat kan de Frontend Registration plugin voor je oplossen.

Op dit moment is het formulier nog een standaard contactformulier, waarbij de gebruiker op Submit klikt waardoor er een email naar de admin van de site wordt gestuurd.

We hebben natuurlijk liever dat dit meteen een nieuwe gebruiker in de WordPress database oplevert.

Daarvoor gaan we terug naar de editor voor het contactformulier. Na het installeren van de Frontend Registration plugin zou je daar een tabblad ‘Registration Settings’ moeten zien. Klik daarop.

Tabblad met registratie-instellingen
Tabblad met registratie-instellingen

Zet de schakelaar om voor alle drie items onder Registration Settings.

De eerste schakelaar maakt het mogelijk om registraties via het formulier in te schakelen gebruiken, dus die is het belangrijkste.

De tweede instelling stopt het verzenden van e-mails voor dit formulier. Je krijgt daardoor niet langer contactverzoeken.

De laatste is niet heel erg nodig, maar maakt de registratie wat soepeler. De gebruiker wordt hiermee meteen ingelogd, zodat ze dit niet twee keer hoeven in te vullen.

Instellingen voor je WordPress inschrijvingsformulier
Instellingen voor je WordPress inschrijvingsformulier

Daaronder kies je de namen voor de velden die gebruikt worden voor WordPress gebruikerselementen.

Zo moet een WordPress gebruiker bijvoorbeeld een gebruikersnaam en e-mail hebben, anders werkt hun account niet. Je kan het form field “your-name” instellen als gebruikersnaam en het veld “your-email” als e-mailadres.

De laatste stap is het kiezen van een standaard gebruikersrol voor nieuwe gebruikers, meestal is dit Subscriber. We raden eigenlijk altijd de Subscriber gebruikersrol aan voor de meeste websites, aangezien alle andere rollen je gebruikers meteen heel veel toegang geven tot je website.

Instellingen voor de front-end velden
Instellingen voor de front-end velden

Ga naar de front-end van je pagina en test alles, en klik op Submit.

Testen van je inschrijvingsformulier
Testen van je inschrijvingsformulier

Alles lijkt te werken. Het enige probleem is nu dat de bevestiging de indruk wekt dat de gebruiker een contactformulier heeft ingezonden, in plaats van zich te registreren.

Bevestigingsbericht
Bevestigingsbericht

Dat moeten we dus even aanpassen. Dit doe je door terug te gaan naar de formuliereditor in het WordPress dashboard.

Klik op het tabblad Messages en zoek naar het veld Sender’s Message Was Sent Successfully. Het enige dat je hoeft te doen is dit bericht even aanpassen.

Aanpassen van berichten in Contact Form 7
Aanpassen van berichten in Contact Form 7

Zeg bijvoorbeeld “Bedankt voor het aanmelden”.

Veranderen van het bericht
Veranderen van het bericht

Als laatste moeten we controleren of de gebruiker daadwerkelijk geregistreerd is in de WordPress gebruikersdatabase.

Als je ingelogd bent op de website als testgebruiker, zal je een foutmelding zoals hieronder zien wanneer je de lijst met gebruikers probeert te bekijken. Dat komt omdat de Subscriber gebruikersrol niet het recht heeft om de lijst met gebruikers te bekijken en te beheren.

Waarschuwing voor WordPress registratieformulier
Waarschuwing voor WordPress registratieformulier

Log dus weer in als admin, en dan zal je meteen zien dat de nieuwe gebruikersinformatie opgeslagen is in de Users database.

De nieuwe geregistreerde gebruiker
De nieuwe geregistreerde gebruiker

Een WordPress registratieformulier maken met Gravity Forms

Gravity Forms is een bekende en betrouwbare formulierbouwer waarmee je allerlei soorten formulieren kan maken. Ze linken aan hun eigen plugins voor meer geavanceerde functies.

Gravity Forms is een premium oplossing, maar je kan de hele interface testen en je eigen formulieren bouwen met de gratis demo. De prijs voor Gravity Forms begint bij $59, maar de User Registration add-on zit alleen in het Elite pakket, dat $259 kost.

Dat is inderdaad vrij prijzig, maar Gravity Forms is zeker één van de betere optie wanneer je je gebruikersregistratie helemaal wil aanpassen en ook andere elementen wil integreren, bijvoorbeeld betalingen met de gateway van je voorkeur.

Om te beginnen ga je naar de website van Gravity Forms.

Daar kies je voor het Elite pakket om de User Registration add-on te krijgen. Download de Gravity Forms plugin, upload het bestand naar je WordPress dashboard en activeer de plugin om aan de slag te gaan.

Standaard biedt Gravity Forms mogelijkheden voor het maken van standaardformulieren voor websites. Ze zijn supermooi, maar er zijn een paar instellingen die je moet aanpassen als je gebruikers wil gaan registreren waarbij elke inzending ook daadwerkelijk leidt tot een registratie in de WordPress gebruikersdatabase.

Nadat de plugin geactiveerd is, heb je een tabblad Forms binnen het WordPress Dashboard.

Ga naar Forms > Add-ons.

Zoek de User Registration add-on en klik op Activate.

User Registration add-on
User Registration add-on

Nadat je de add-on van Gravity Forms hebt geactiveerd, is het te zien op de lijst met plugins, net als Gravity Forms zelf.

Lijst met plugins
Lijst met plugins

Vervolgens klik je op Forms > Settings.

Gravity Forms instellingen
Gravity Forms instellingen

Vind het tabblad User Registration in de instellingen. Hier wil je de optie voor het maken van een custom registratiepagina activeren.

Vink het vakje aan zodat alle registraties via je formulier toegevoegd worden als normale WordPress gebruikers.

Inschakelen van een custom registratiepagina
Inschakelen van een custom registratiepagina

Je moet ook een pagina kiezen die je registratiepagina zal gaan worden. De standaard WordPress registratiepagina maakt een redirect naar een custom pagina wanneer je deze inschakelt. Heb je er al één, voel je dan vrij om de pagina te kiezen uit het dropdown-menu.

Zo niet, dan laten we hieronder zien hoe je een registratiepagina aan kan maken.

Let er altijd op dat je op Update Settings klikt nadat je een instelling voor Gravity Forms hebt veranderd.

Voorbeeld van gebruikersregistratie
Voorbeeld van gebruikersregistratie

Ga naar Forms > Forms of Forms > New Form. De pagina Forms laat een lijst zien met alle formulieren die je in het verleden met Gravity Forms hebt gemaakt. Deze lijst kan dus helemaal leeg zijn als je nog geen formulieren hebt aangemaakt.

Heb je nog niks gemaakt, klik dan op New Form.

Het maken van een nieuw WordPress registratieformulier via Gravity Forms
Het maken van een nieuw WordPress registratieformulier via Gravity Forms

Kies een Form Title (titel) en Form Description (beschrijving). Klik op Create Form.

Kiezen van een titel en beschrijving voor je formulier
Kiezen van een titel en beschrijving voor je formulier

Gravity Forms biedt een visuele drag-and-drop editor met een module voor veldelementen aan de rechterkant.

Aangezien we momenteel naar een leeg gebruikersregistratieformulier zitten te staren, beginnen we door de Name module naar het formulier te slepen. Dit doe je door erop te klikken, de muisknop ingedrukt te houden en de module naar links te slepen.

Form builder
Form builder

Zodra je een module in je formulier plaatst zou je deze meteen in de preview moeten kunnen zien.

We zien nu bijvoorbeeld de velden voor namen, met standaard de velden First Name (voornaam) en Last name (achternaam).

Velden
Velden

Voor een inschrijvingsformulier voor gebruikers is het logisch ook de velden Username, Password en E-mail te gebruiken.

Toevoegen van geavanceerde velden aan een registratieformulier voor gebruikers
Toevoegen van geavanceerde velden aan een registratieformulier voor gebruikers

Nadat je deze velden in het formulier hebt geplaatst zou het Email veld de mogelijkheid moeten bieden voor het invoeren van een e-mailadres.

Toevoegen van naam en e-mail
Toevoegen van naam en e-mail

In het veld Username kunnen gebruikers een nieuwe gebruikersnaam kiezen voor de website, en in de module Password dienen gebruikers hun nieuwe wachtwoord twee keer in te typen.

Toevoegen van de velden voor gebruikersnaam en wachtwoord
Toevoegen van de velden voor gebruikersnaam en wachtwoord

Het is mogelijk dat je registratieformulier ook nog andere elementen nodig heeft, bijvoorbeeld een veld voor telefoonnummers of URL’s van websites.

Voor deze tutorial voegen we nog de module Section toe, die een sectie-einde invoegt om aan te geven dat daaronder alles optioneel is.

Invoegen van een sectie-einde
Invoegen van een sectie-einde

In dat optionele deel voegen we dan de modules Website en Phone toe.

Zoals eerder gezegd kan je zelf kiezen of je deze velden in je eigen registratieformulier wil opnemen. Er zijn indien nodig ook allerlei andere velden te vinden.

Toevoegen van meer optionele velden
Toevoegen van meer optionele velden

Wanneer je de versleepbare modules van Gravity Forms in het formulier sleept, kan je op de dropdown van elke module klikken voor meer instellingen en opties voor het veld.

Het aanpassen van de instellingen van velden
Het aanpassen van de instellingen van velden

Zo vind je onder het Website veld bijvoorbeeld het label de mogelijkheid om de vraag al dan niet verplicht te maken.

Aangezien we in eerder al aangegeven hebben dat Website optioneel is, zullen we dit uit laten staan, zodat gebruikers niet per se een link hoeven in te voeren om zich te registreren voor de website.

In het algemeen zou het overgrote merendeel van de velden niet vereist moeten zijn voor een inschrijvingsformulier.

Vereiste versus niet-vereiste velden
Vereiste versus niet-vereiste velden

Velden voor de gebruikersnaam, e-mail en wachtwoord zijn allemaal noodzakelijk om een WordPress gebruiker aan te kunnen maken en op te slaan in de database. Daarom is het verstandig die als verplicht aan te merken.

Voor de andere velden kan je zelf de instellingen bepalen die het beste bij jouw website passen. Het is meestal verstandig het veld Name te veranderen en te beslissen of je het veld vereist wil stellen of niet.

Je hebt ook de mogelijkheid om de weergave van het veld aan te passen en andere gedetailleerde aanpassingen te doen in de andere instellingen.

Het veld instellen als vereist
Het veld instellen als vereist

Nadat het inschrijvingsformulier precies zo is als jij het wil hebben, ga je door naar het tabblad Settings.

Dit zijn de algemene instellingen voor het hele formulier, dus niet voor de individuele velden.

Aanpassen van de instellingen voor je registratieformulier
Aanpassen van de instellingen voor je registratieformulier

Onder Settings ga je naar het tabblad User Registration.

Klik op “Add New”.

Voor deze stap maak je een feed voor de gebruikersregistratie die automatisch een gebruiker aanmaakt voor elk verzonden formulier, waarbij de relevante velden uit het formulier overgezet worden naar de WordPress gebruikersdatabase.

Toevoegen van een nieuwe feed voor gebruikersregistraties
Toevoegen van een nieuwe feed voor gebruikersregistraties

Geef de feed een handige naam zodat je het eenvoudig terug kan vinden.

Je hebt twee mogelijkheden om een feed te maken, namelijk voor “Create User” of “Update User”.

De “Update User” feed is handiger als je een pagina voor je gebruikers wil aanbieden waar ze hun eigen profiel kunnen bijwerken. Het is zeker een goed idee om dit op te nemen in je eigen pagina voor registratie/inloggen, maar voor nu zijn we vooral geïnteresseerd in het aanmaken van nieuwe gebruikers.

Klik dus op de optie “Create User”.

Aanmaken van een nieuwe gebruiker
Aanmaken van een nieuwe gebruiker

De feed “User Registration” maakt automatisch de meeste instellingen aan zodat de relevante uit het formulier worden overgenomen om een nieuwe gebruiker in de WordPress gebruikersdatabase aan te maken.

Maar het kan zijn dat je een aantal instellingen nog moet aanpassen.

Zo willen we bijvoorbeeld zeker weten dat de tekst uit het veld Username inderdaad gebruikt wordt als de gebruikersnaam van de nieuwe gebruiker.

Je zou hierbij ook kunnen kiezen voor het veld Email, als je liever hebt dat je gebruikers inloggen met hun e-mailadres.

De velden voor First Name en Last Name zien er verder goed uit. Net als de instellingen voor Email Address en Password. Nu kan je een Nickname reference en een Display Name (weergegeven naam) kiezen, indien je wilt.

Aanpassen van de instellingen voor gebruikers
Aanpassen van de instellingen voor gebruikers

Eén van de belangrijkste aspecten van deze stap is het bepalen van de standaard gebruikersrol die een profiel toegewezen krijgt.

Je wilt waarschijnlijk niet dat elke gebruiker meteen Admin of Author is, aangezien dat veel te veel toegang geeft tot je website, dus je kan dit het beste op Subscriber zetten.

Kiezen van gebruikersrollen
Kiezen van gebruikersrollen

Scrol naar beneden om de andere instellingen te kiezen. Als je nog andere velden in je formulier zet, denk dan even na of de standaard WordPress gebruikersprofielen hier ook velden voor hebben.

De WordPress gebruikersdatabase heeft ook optionele velden voor websites. Daarom linken we het Website veld uit ons formulier aan het equivalent in de WordPress gebruikersdatabase.

Het onderdeel “Additional Options” vraagt of je ook meldingsmails wil laten versturen bij de registratie. Dit wordt gezien als best practice zodat je gebruikers op de hoogte worden gebracht dat het nieuwe account met succes is aangemaakt.

Het selectievakje “User Activation” zorgt ervoor dat er pas een gebruiker aangemaakt wordt wanneer iemand op de verificatielink in hun mail klikt. Deze instelling maakt het registratieproces wat trager, maar zorgt ook voor aanzienlijk minder spam.

De “Registration Condition” is ook een potentieel handige instelling. Deze functie staat een registratie alleen toe als er aan een bepaalde voorwaarde wordt voldaan, bijvoorbeeld dat het e-mailadres een @ symbool bevat. Ook dit is een handige optie als je minder spamgebruikers wil en wil controleren dat de formulieren goed zijn ingevuld, maar het is niet per se noodzakelijk.

Nadat je alle instellingen naar wens hebt ingesteld, klik je op “Update Settings”.

Overige instellingen in Gravity Forms
Overige instellingen in Gravity Forms

We hebben nu de belangrijkste onderdelen van het maken van een registratieformulier voor WordPress met Gravity Forms wel gehad. Je zal het formulier nu op een pagina moeten zetten en met jouw formulier de standaard inlogpagina van WordPress vervangen.

Ook hier zijn weer twee manieren om het registratieformulier toe te voegen aan een pagina.

Bij de ene manier gebruik je een shortcode, bij de andere het Gutenberg blocksysteem.

Ga je een shortcode gebruiken, kijk dan eens naar het registratieformulier dat je net hebt gemaakt. Elk formulier krijgt een ID-nummer toegewezen door Gravity Forms.

Schrijf dit ID nummer ergens op.

Het ID nummer van je formulier
Het ID nummer van je formulier

Ga naar Pages > Add New binnen je WordPress dashboard. Of als je al een specifieke pagina hebt aangemaakt voor je formulier, ga dan naar die pagina toe.

Voor deze tutorial noemen we dit de “User Registration” pagina.

Om de shortcode te gebruiken, plak je de volgende shortcode ergens op de gewenste pagina:

[gravityform id="#" title="true" description="true]

Vervang het # teken met het ID nummer van formulier.

Na het toevoegen van de shortcode en het opslaan van de pagina, kan je je spiksplinternieuwe formulier aan de front-end van je website bekijken.

Een andere route is het gebruiken van de WordPress Gutenberg blockeditor. Gebruik je Gutenberg, klik dan op “Add Block” binnen de page editor.

Toevoegen van een block in de Gutenberg editor
Toevoegen van een block in de Gutenberg editor

Zoek op het Gravity Forms block of scrol door de lijst heen tot je deze tegenkomt.

Selecteer het Gravity Forms block. Het heet “Form”, met het logo van Gravity Forms als icoontje.

Gravity Form block
Gravity Form block

Na het activeren van dit block, klik je op het dropdown-menu om een formulier te kiezen.

Je formulier kiezen
Je formulier kiezen

Je kan hier allerlei keuzes hebben, of slechts één of twee. Zoek het formulier dat je gemaakt hebt als registratieformulier.

In ons geval hebben we dit formulier simpelweg “User Registration Form 1” genoemd.

Kies het juiste formulier
Kies het juiste formulier

Door het selecteren van een formulier uit het dropdown-menu wordt er meteen een visuele weergave van het formulier gemaakt in de editor.

Zoals je kan zien wordt het User Registration Form dat we eerder hebben gemaakt weergegeven in de backend van WordPress. Als er iets mis is met het formulier kan je nu teruggaan naar ‘Forms’ om de velden in je formulier opnieuw te bewerken.

Je custom registratieformulier op de frontend
Je custom registratieformulier op de frontend

Ter afronding ga je op de front-end van je website naar deze pagina toe. Het registratieformulier is inderdaad te zien met alle juiste velden. Daarnaast hebben we dit formulier nu ook ingesteld als de redirect vanaf de standaard WordPress inlogpagina, en elk ingezonden formulier wordt automatisch omgezet naar een nieuwe WordPress gebruiker.

Controleer het formulier nu, en zorg dat al je labels juist gespeld zijn. Probeer vervolgens het formulier in te vullen als testgebruiker om te zien of alles werkt en hoe het proces afgehandeld wordt.

Na het insturen van het formulier ga je naar het deel “Users” binnen je WordPress dashboard en controleer je dat er inderdaad een nieuwe gebruiker is toegevoegd aan de gebruikersdatabase.

Je kan ook andere zaken testen, zoals de juiste bevestigingsberichten en of het formulier inderdaad mensen tegenhoudt die niet hebben voldaan aan een voorwaarde.

Als laatste opmerking, ga ook even naar Forms > Settings om te controleren dat je de goede pagina hebt gekozen als custom registratiegebied.

Kort gezegd komt het erop neer dat je het custom registratieformulier moet inschakelen door het juiste vakje aan te vinken, en de juiste registratiepagina moet kiezen in het dropdown-menu. In dit voorbeeld gaat het dan om de pagina “User Registration”.

Selecteren van de juiste registratiepagina
Selecteren van de juiste registratiepagina

Klik op “Update Settings”, en je bent klaar

Hoe maak je een WordPress registratieformulier via een betalingsplugin?

Gravity Forms heeft allerlei mogelijke add-ons om unieke formulieren te kunnen maken. Eén van de voornaamste redenen waarom Gravity Forms zo interessant is, is de add-ons voor betalingen.

In het algemeen zorgt een add-on voor betalingen ervoor dat je formulier betalingen kan verwerken, waardoor mensen een gebruikersaccount aan kunnen maken als ze een abonnement of eenmalig product kopen.

Dit is erg handig voor ledenwebsites en sites met exclusieve content voor leden, waarbij je bijvoorbeeld een deel van de content, community of zelfs de hele website wil verbergen totdat een gebruiker een betaling via het formulier voltooid.

Als je registratie een betaalmodule nodig heeft, biedt Gravity Forms diverse add-ons voor het verwerken van betalingen. Het enige dat je hoeft te doen is de add-on kiezen die het handigst en meest aantrekkelijk is voor jouw organisatie.

Het is ook goed om te weten dat add-ons voor PayPal, Stripe en Square bij het Pro pakket van $159 horen. Geavanceerdere betalingsgateways zoals 2Checkout en Authorize.net worden aangeboden binnen het Elite Gravity Forms pakket van $259. De User Registration add-on (die we zonet gebruikten) vereist het Elite thema, dus als je de User Registration module gebruikt, heb je ook al toegang tot elke mogelijk add-on.

Om te beginnen ga je naar je WordPress dashboard en klik je op Forms > Add-Ons.

Je krijgt nu een lange lijst met add-ons te zien waar je uit kan kiezen, zoals Square, PayPal en Stripe.

Add-ons voor betalingen in Gravity Forms
Add-ons voor betalingen in Gravity Forms

Alhoewel je elke betalingsgateway kan kiezen, houden we het voor deze tutorial bij PayPal Payments Standard.

Ga naar de add-on en klik op Activate.

De PayPal add-on
De PayPal add-on

Na het activeren van een add-on is het te vinden onder Plugins in je WordPress dashboard.

Alle Gravity Forms add-ons zijn eigenlijk extra WordPress plugins die samenwerken met de Gravity Forms plugin. Kijken daarom onder Plugins om te controleren dat PayPal Standard (of een andere add-on voor betalingen) geactiveerd is.

Controleren dat de add-on goed geïnstalleerd is
Controleren dat de add-on goed geïnstalleerd is

Om je add-on voor betalingen te configureren ga je naar Forms > Settings.

Form settings
Form settings

Kies het tabblad PayPal (of een andere add-on naar keuze). Elke betalingsadd-on heeft een eigen proces voor het leggen van een verbinding en voor verificatie. Over het algemeen zijn de precieze stappen eenvoudig te doorlopen vanaf het dashboard.

Voor PayPal word je gevraagd om te bevestigen dat je de PayPal IPN instellingen hebt geconfigureerd. Vink dit vakje aan en klik op Update Settings.

Kopieer ook de Notification URL die je hier ziet staan.

PayPal IPN voor het WordPress Registratieformulier
PayPal IPN voor het WordPress Registratieformulier

Gravity Forms stuurt je nu door naar de instellingenpagina voor PayPal. Ook deze pagina verschilt per betalingsgateway, en is dus weer net wat anders voor bijvoorbeeld Stripe of Square.

Bij PayPal klik je op Choose IPN Settings.

Instant Payment Notification instellingen
Instant Payment Notification instellingen

Hier plak je de Notification URL die je zonet gekopieerd hebt.

Hiermee activeer je de juist stappen en meldingen wanneer iemand zich via je formulier probeert te registreren en via PayPal wil betalen.

Klik op Save.

Toevoegen van je Notification URL
Toevoegen van je Notification URL

Net zoals bij het registratieformulier dat we eerder hebben ingesteld, moet je een feed aanmaken voor een add-on voor betalingen.

Dit doe je via Forms > Forms in het WordPress menu.

Zoek het registratieformulier dat we eerder hebben gemaakt. Hier moet je de betalingsadd-on verbinden aan dat formulier, maar ook meteen een feed maken voor de add-on zodat die goed werkt en elke individuele betaling aan de specifieke gebruiker kan koppelen.

In de editor voor het registratieformulier klik je op Settings.

Het tabblad met instellingen voor je custom formulier
Het tabblad met instellingen voor je custom formulier

Zoek het tabblad voor de add-on, in ons geval PayPal.

PayPal feeds
PayPal feeds

Klik op Add New om een nieuwe PayPal feed voor dit formulier te maken.

Toevoegen van een nieuwe PayPal feed
Toevoegen van een nieuwe PayPal feed

De Feed Settings voor PayPal, en ook de meeste andere integraties voor betalingen, zijn vrij helder. Je geeft de feed een naam en voegt je eigen PayPal e-mailadres toe. Kies de Test of de Production Mode.

De Test Mode gebruik je voor het testen van de betalingsverwerker in de testfase van de ontwikkeling van je website. Wil je beginnen met het innen van echte betalingen, ga dan voor de Production Mode.

Als laatste moet je een Transaction Type kiezen.

In het algemeen is de Subscription Transaction Type de meest logische keuze voor een online magazine of een online community, maar je kan ook voor Product Type kiezen, of nog iets anders.

Aanpassen van de instellingen van je feed
Aanpassen van de instellingen van je feed

Sla je PayPal feed op en ga terug naar de form builder.

Het is essentieel om een veld toe te voegen aan het registratieformulier dat het systeem en de gebruiker duidelijk maakt dat er een betaling plaats moet vinden.

We raden de Product module aan, maar je kan ook voor iets anders kiezen als je een prijs wil instellen of totaalprijs wil berekenen.

Sleep het Product veld naar je form builder.

Product veld
Product veld

Voor deze tutorial gaan we abonnementskosten instellen. We laten ook zien hoe je verschillende pakketten kan instellen en een eenmalige betaling voor het abonnement.

Verander het Field Label naar iets dat duidelijk maakt waar het veld voor bedoeld is.

Stel ook een prijs voor je abonnement in bij het Price veld.

We raden je aan om voor het Single Product Field Type te kiezen en één vaste prijs in te stellen. Maar er zijn natuurlijk allerlei organisaties die liever verschillende prijzen willen aanbieden.

Field labels
Field labels

We raden je verder aan om het vakje “Required” aan te vinken onder de Rules header. Op die manier kan iemand niet naar je site gaan en een gebruikersprofielen aanmaken zonder te betalen voor je content.

Het veld instellen als vereist
Het veld instellen als vereist

Lets anders om te bekijken is de Option module.

Hiermee krijg je de mogelijkheid om verschillende abonnementen in te stellen, waardoor je bijvoorbeeld drie of vier pakketten kan aanbieden waarmee gebruikers toegang tot verschillende functies of content krijgen.

Toevoegen van abonnement niveaus aan je formulier
Toevoegen van abonnement niveaus aan je formulier

Wanneer je het Option veld gebruikt, stel dit dan op Subscription Price voor het Product Field Mapping.

Kies het gewenste Field Type en stel de Choices in met bijpassende labels en prijzen.

Zo kan je bijvoorbeeld drie verschillende abonnementen aanbieden, met oplopende prijzen en bijbehorende features.

Let erop dat je ook hier weer het vakje “Required” aanvinkt onder de regels, aangezien je ook hier wil afdwingen dat mensen de bijbehorende betaling voltooien.

Het vereisen van een abonnement niveau
Het vereisen van een abonnement niveau

Het type betalingsmodule waar je voor kiest heeft ook een effect op de mogelijke instellingen voor de feed.

Wil je graag een registratieproces voor abonnementen instellen, dan moeten je PayPal Feed instellingen ook het Subscription Transaction Type hebben. Je kan er natuurlijk ook voor kiezen om het Transaction Type als eenmalig product in te stellen, of zelfs als optionele donatie.

Een transactie-type kiezen
Een transactie-type kiezen

Onder de PayPal Feed instellingen kan je Gravity Forms ook vertellen waar in het formulier het te betalen bedrag staat. Zo kan je bijvoorbeeld een veld “Total Price” en “Subscription Price” hebben. Welk veld moet PayPal dan gebruiken om de transactie te verwerken?

Gebruik het dropdownmenu “Payment Amount” om het juiste veld te selecteren voor het totale bedrag voor de transactie. Sommige mensen gebruiken gewoon het Form Total, maar je dus ook voor de “Subscription Price” kiezen, of een ander veld.

Instellen van het veld voor het totaalbedrag
Instellen van het veld voor het totaalbedrag

Binnen de instellingen voor PayPal Feed kan je ook even kijken bij “Other Settings”.

Net als bij de configuratie voor de User Registration Feed moet je de juiste velden uit je formulier linken aan de goede velden voor PayPal. Op die manier weet PayPal waar ze de voornaam, e-mail en andere benodigde informatie vandaan moeten halen.

Onder de Other Settings moet je daarom elk item op de Billing Information lijst langslopen. De meeste items in de lijst worden standaard goed ingesteld, maar controleer alles alsnog even goed.

Zo moeten bijvoorbeeld de velden voor voornaam en achternaam in je formulier overeenkomen met de velden First Name en Last Name in PayPal. Het kan zijn dat je hierdoor wat extra velden aan je WordPress registratieformulier moet toevoegen. Zo hebben wij bijvoorbeeld geen adresveld op ons registratieformulier, maar het proces wordt wel sneller als je in één keer alle benodigde betaalgegevens vraagt via je eigen formulier.

Dit is niet per sé noodzakelijk, maar maakt het wel sneller en prettiger voor je gebruikers. Alle add-ons voor betalingen zijn weer net wat anders, en de PayPal verbinding trekt gewoon alle betaalgegevens uit het PayPal account van de gebruiker, of vraagt ze de gegevens wanneer ze op PayPal zijn.

Andere instellingen om te bekijken zijn de Image URL en Cancel URL. Je kan een Image URL toevoegen voor je logo of een afbeelding van het product dat je verkoopt. De Cancel URL is een redirect waardoor gebruikers bij een specifieke pagina uitkomen wanneer ze de betaling annuleren voordat alles is afgerond.

Het deel Options biedt de mogelijkheid om gebruikers om een bezorgadres of andere opmerkingen te vragen tijdens de betaling. Veel online diensten en community’s hebben natuurlijk geen bezorgadres nodig. Controleer daarom dit vakje om te voorkomen dat je gebruikers in de war raken.

Voor de opmerkingen kan je zelf bedenken of je dat handig vindt. Meestal is het niet nodig, maar als je een dienst of product op maat levert is dit een handige plek om details te vragen aan je gebruikers.

Het selectievakje Conditional Logic vraagt of je voorwaardelijke logica wil gebruiken bij het verwerken van betalingen. Zo zou je bijvoorbeeld gebruikers kunnen weren als ze niet voor een betaalpakket kiezen of wanneer hun e-mailadres niet lijkt te kloppen.

In het algemeen kan je voorwaardelijke logica vooral goed gebruiken om spam te voorkomen, en om een bonus te geven aan gebruikers die een bepaald abonnement afsluiten.

 

Het tabblad met overige instellingen
Het tabblad met overige instellingen

De laatste instelling die je moet bepalen is de vertraging van de gebruikersregistratie. Ook hier geldt weer dat dit optioneel is. Maar vaak is het een goed idee om de feed pas te verwerken als de betaling daadwerkelijk ontvangen is. Zo wordt er pas een gebruiker in je WordPress database aangemaakt nadat je zeker weet dat je het geld daadwerkelijk ontvangen hebt.

Laat je dit vakje leeg, dan kan je database vollopen met gebruikers die (nog) niet betaald hebben.

Klik op Update Settings nadat je alles naar wens hebt ingesteld.

Vertragen van de gebruikersregistratie
Vertragen van de gebruikersregistratie

Om de configuratie van betalingen op je formulier te testen ga je naar het tabblad Pages binnen WordPress.

Ga naar het formulier dat je eerder hebt aangemaakt. In ons geval is dat dus het inmiddels bekende User Registration formulier.

Testen van de pagina voor gebruikersregistratie
Testen van de pagina voor gebruikersregistratie

Aangezien je op deze pagina al een formulier voor het registreren van gebruikers hebt aangemaakt, en je de PayPal feed of andere betalingsfeed aan het formulier hebt gelinkt, zouden de velden voor de betaling moeten verschijnen in de visuele builder.

Wij hebben zowel een eenmalige prijs als een veld met verschillende niveaus, om de mogelijkheden binnen zo’n formulier te demonstreren. In een normale situatie zou je waarschijnlijk voor de één of de andere kiezen.

Testen van het prijs-veld
Testen van het prijs-veld

Het is belangrijk om een formulier met betaalfunctie goed te testen. Het laatste wat je wilt is dat je een lading klanten krijgt die vast komen te zitten door verkeerde instellingen bij het betalen.

Vul wat testgegevens in op het formulier, zoals een wachtwoord, en selecteer een abonnement.

Klik op Submit zodat je kan zien hoe het WordPress registratieformulier en de betaling functioneren in de praktijk.

Na het versturen zou de pagina je door moeten sturen naar PayPal, waar je een totaalprijs ziet en de gebruiker gevraagd wordt in te loggen op hun PayPal account of met een creditcard of pinpas te betalen.

Zoals gezegd kan een andere add-on voor betalingen, zoals Stripe, Square of Authorize.net er anders uitzien dan PayPal. Elke verwerker brengt de gebruiker naar een nieuwe pagina om de betaling te voltooien, maar de precieze stappen kunnen net wat verschillen.

Betalingsformulier van PayPal
Betalingsformulier van PayPal

Zo voeg je gebruikers toe aan een e-maillijst via een WordPress registratieformulier

Wanneer je een nieuwe gebruiker op je website krijgt, heb je het liefst dat ze zich inschrijven. Naast dat je de bezoeker bepaalde functies of content kan aanbieden, dient het registratieformulier ook als een mooie mogelijkheid om die gebruikersdata meteen op je lijst voor e-mailmarketing te krijgen.

Het grote voordeel hiervan komt door de automatisering die ermee gepaard gaat. Een WordPress registratieformulier legt de naam en e-mailadres van een persoon vast in WordPress, maar om die data vervolgens in serieuze e-mailmarketingsoftware te krijgen vereist een handmatige export uit WordPress en vervolgens een import naar de tool voor e-mailmarketing.

Daar is op zich niks mis mee. Het resultaat van handmatige imports en exports is prima. Maar het kost wel een significant stuk tijd om dit regelmatig te doen. En je e-mailmarketinglijst wordt dus niet in real-time bijgewerkt. Een gebruiker kan een e-mailadres opgeven en vervolgens dagen of weken in je gebruikersdatabase zitten te wachten.

Daarom is het belangrijk om meteen je registratieformulier te linken aan je e-mailmarketing workflow.

Er zijn allerlei builders voor e-mailnieuwsbrieven te vinden waarmee je berichten per groep kan versturen en waarmee je je e-maillijsten kan segmenteren. De meeste populaire builders bieden integraties aan met allerlei plugins voor gebruikersregistratie, waardoor je de twee platforms kan combineren bij het inzamelen van e-mailadressen.

Je hebt vast al wel eens gehoord van bedrijven zoals MailChimp, Constant Contact en Mailgun. Deze bieden allemaal vergelijkbare features voor segmentatie en het ontwerpen van e-mails, en je kan meestal een eenvoudige integratie vinden die precies doet waar we het hier over hebben.

Gelukkig biedt een andere categorie add-ons binnen Gravity Forms directe links naar e-mailmarketingplatforms. Zoals met de meeste add-ons van Gravity Forms vereisen de e-mailmarketingtools een premium pakket.

De lijst van Gravity Forms met add-ons voor e-mailmarketing is een lange lijst.

Add-ons voor mailinglijsten voor Gravity Forms
Add-ons voor mailinglijsten voor Gravity Forms

Elke add-on werkt op een vergelijkbaar manier, maar ze hebben allemaal hun eigen interface voor het verzenden van e-mails en hun eigen manier van integreren met Gravity Forms.

Om alles een beetje overzichtelijk te houden zullen we de Mailchimp add-on gebruiken als voorbeeld, aangezien deze vrij populair en goed betaalbaar is.

Ben je er klaar voor?

Ga naar het deel Add-ons binnen de Gravity Forms WordPress plugin.

Scrol naar beneden in de lijst met add-ons tot je de Mailchimp add-on vindt. Mocht deze nog niet aan staan, klik dan op Activate.

mailchimp add-on
Mailchimp add-on

We nemen aan dat je het registratieformulier al hebt aangemaakt zoals hierboven beschreven.

Ga naar Forms > Forms in het WordPress menu.

Zoek in de lijst met gepubliceerde formulieren het formulier User Registration dat je eerder hebt gemaakt.

Klik op het formulier op de velden te gaan bewerken.

user reg form - WordPress Registration Form

Ga naar Settings > Mailchimp. Gebruik je een integratie met een andere e-mailservice, zoek dan de bijbehorende functie.

Mailchimp instellingen
Mailchimp instellingen

Het doel is om een Mailchimp Feed te maken die Gravity Forms vertelt om inzendingen door te sturen naar Mailchimp, naast het toevoegen aan de WordPress gebruikersdatabase. Maar daarvoor moet je eerst de Mailchimp instellingen configureren.

Klik op de link Mailchimp Settings.

Configureren van de Mailchimp instellingen
Configureren van de Mailchimp instellingen

De volgende pagina vraagt om je Mailchimp API key. De API key vind je in de volgende stap.

Mailchimp’s API key veld
Mailchimp’s API key veld

Ga naar de MailChimp website en maak een account aan of log in op je bestaande profiel.

Het Mailchimp dashboard organiseert je campagnes, mailinglijsten en andere elementen. Maak nu een mailinglijst aan (Mailchimp noemt dit een Audience), voordat je deze integratie met de API key maakt. Je doet dit omdat je uiteindelijk ook een e-maillijst moet selecteren waaraan de gebruikersgegevens gelinkt moeten worden.

Nadat je een lijst hebt aangemaakt, ga je naar het Profile icoon onderin het Mailchimp dashboard.

Klik daarop om een menu te openen.

Selecteer het tabblad Account om verder te gaan.

In het scherm Account klik je op het tabblad Extras. Als het goed is zie je daar enkele items waar je uit kan kiezen. Klik op de optie API Keys.

API key tabblad
API key tabblad

Een API key is een code waarmee je systemen aan elkaar kan linken. In Mailchimp hoef je verder alleen maar op Create A Key te klikken waarna er een key voor je gegenereerd wordt.

Je kan zoveel keys aanmaken als je wilt, maar het is een goede gewoonte om er zo weinig mogelijk aan te maken. De API key wordt nu getoond in een lijst met een label en datum van aanmaken erbij.

Kopieer de API key naar je klembord. Je kan het Mailchimp dashboard nu verlaten als je wil.

 

Je API key ophalen
Je API key ophalen

Open nu de Mailchimp Settings in je WordPress dashboard. Plak de key die je net aangemaakt hebt in het veld dat Mailchimp API Key heet.

Klik op “Update Settings”, om de bewerking op te slaan.

Toevoegen van je API key aan Gravity Forms
Toevoegen van je API key aan Gravity Forms

Nu kan je teruggaan naar het formulier User Registration.

Klik op Settings > Mailchimp in het registratiemenu.

Hier word je gevraagd om een Mailchimp feed te maken. Net als eerder is dit hoe Gravity Forms ervoor zorgt dat data goed doorgegeven wordt van de ene app naar de andere.

Klik op “Add New”.

Een nieuwe feed toevoegen voor Mailchimp
Een nieuwe feed toevoegen voor Mailchimp

Geef de feed een makkelijk te onthouden naam. Die naam is puur voor je eigen gemak.

Onder het veld Mailchimp Audience klik je op het dropdown-menu om de naam van één van je Mailchimp e-maillijsten te kiezen.

Heb je nog geen e-mail audience aangemaakt, dan moet je nog terug naar Mailchimp om dit te doen. Anders is er immers geen database beschikbaar waar de e-mailadressen in opgeslagen kunnen gaan worden.

Kiezen van je audience
Kiezen van je audience

Je krijgt nu een gebied Map Fields te zien, waar je gevraagd wordt om de velden van het formulier van de User Registration plugin te linken aan de formulieren voor Mailchimp.

Dat is vrij eenvoudig, aangezien je gewoon Email kan kiezen voor het veld Email Address, en de velden First Name en Last Name voor de Mailchimp velden First Name en Last Name.

Mappen van velden
Mappen van velden

Ga verder naar de extra opties.

Deze zijn allemaal optioneel en zijn afhankelijk van hoe je wil dat het verzamelen van e-mailadres verloopt.

Zo zou je bijvoorbeeld voor een dubbele opt-in kunnen kiezen, waarbij gebruikers eerst op een bevestigingsmail moeten klikken voor ze in je lijst opgenomen worden. Dit is goed voor je beveiliging, en zelfs verplicht in sommige delen van de wereld.

Andere mogelijkheden zijn de optie om abonnees aan te merken als VIP’s, het instellen van tags, en het maken van een notitie. Het veld met opmerkingen kan je helpen om bij te houden waar je e-mailadressen vandaan komen, zeker wanneer je meerdere formulieren hebt.

Nadat je dit allemaal hebt gedaan klik je weer op Update Settings.

Toevoegen van meer opties aan je registratieformulier
Toevoegen van meer opties aan je registratieformulier

Als je nu de integratie van de velden gaat testen (of een andere add-on voor e-mailmarketing) aan de front-end van je website zul je zien dat er weinig is veranderd. Maar je kan alsnog een keer je testgebruiker gebruiken om het registratieformulier in te vullen en te kijken of alles naar wens werkt.

Met deze configuratie zou je velden moeten kunnen zien na je test-inschrijving en een nieuwe gebruiker moeten zien in je aangewezen e-maillijst.

De standaardvelden die je nodig hebt zijn Name en Email, maar je kan ook helemaal losgaan en nog allerlei andere dingen opslaan via ‘map fields’ en Gravity Forms.

Frontend WordPress registratieformulier met MailChimp
Frontend WordPress registratieformulier met MailChimp

Zo laat je gebruikers zich registreren op je website met hun profiel van sociale media

Inloggen met een social-mediaprofiel is erg populair geworden doordat het inloggen erg snel gaat, en mensen niet een helemaal nieuw account aan hoeven te maken voor elke website waar ze zich willen inschrijven.

Een community of ledenwebsite moet elk voordeel benutten om gebruikers te overtuigen om zich in te schrijven, een sociale inlogfunctie is dan erg handig.

De User Registration plugin van WPEverest is de ideale plugin voor het verder aanpassen van je registratiepagina voor gebruikers en het opnemen van een mogelijkheid voor het inloggen via een social media profiel. De basisplugin is gratis, maar de extensie Social Connect die de daadwerkelijke sociale loginknoppen activeert, vereist een abonnement van $69 per jaar.

We zullen je hieronder laten zien hoe je de plugin installeert en kan gebruiken, maar onthoud wel dat er diverse soortgelijke plugins te vinden zijn.

Om te beginnen installeer en activeer je de User Registration plugin en upgrade je naar het Personal pakket om de Social Connect extensie te activeren.

User Registration WordPress plugin
User Registration WordPress plugin

In je WordPress dashboard activeer je vervolgens ook de Social Connect extensie. Zowel de items User Registration als Social Connect zullen te zien zijn onder Plugins in WordPress.

Activeer nu de User Registration Social Connect plugin.

Activeren van zowel de plugin als de add-on
Activeren van zowel de plugin als de add-on

Ga nu naar User Registration > User Registration. De plugin heeft diverse templates om je inschrijvingsformulier mee te beginnen. Begin je liever met een schone lei, klik dan op Add New.

Als je bij de formeditor komt, kan je de User Fields gebruiken om modules naar je formulier te slepen.

Het standaard registratieformulier van de plugin bevat de velden User Email, Username en Password.

We raden je aan deze ook te gebruiken wanneer je een formulier helemaal zelf opbouwt. Je kan ook andere modules gebruiken door ze te selecteren in het venster User Field.

Toevoegen van modules aan je registratieformulier
Toevoegen van modules aan je registratieformulier

Elk veld heeft zijn eigen opties die je kan bewerken als je erop klikt.

Maar het belangrijkste onderdeel van het activeren van het formulier vind je onder het tabblad Form Setting.

Hier kan je allerlei instellingen aanpassen om WordPress te vertellen dat je wil dat dit formulier wordt gebruikt om nieuwe gebruikers aan te maken. Zo kan je bijvoorbeeld instellen welke gebruikersrol wordt gemaakt en of elke gebruiker handmatig of automatisch ingelogd wordt na de registratie.

form settings
Form settings

Vervolgens kan je het registratieformulier voor gebruikers op een pagina zetten zodra je alle gewenste velden gekozen hebt.

De plugin User Registration gebruikt shortcodes om formulieren op pagina’s en artikelen te plaatsen. Je vindt deze shortcode boven je formbuilder.

Kopieer deze code naar je klembord.

Shortcode voor de User Registration plugin
Shortcode voor de User Registration plugin

Ga naar Pages > Add New.

Als je al een registratiepagina klaar hebt staan, kan je meteen naar die pagina toegaan.

add new

In de page builder kan je de shortcode vervolgens plakken waar je het formulier wil laten zien.

Zorg ervoor dat je de pagina opslaat of bijwerkt zodat het weergegeven wordt aan de front-end. Zoals altijd is het verstandig om eerst het WordPress registratieformulier goed te testen om te controleren of alles perfect werkt.

Testen van het registratieformulier met sociale profielen
Testen van het registratieformulier met sociale profielen

Je moet wellicht uitloggen uit je adminaccount om het formulier als normale gebruiker te kunnen zien.

Het hele idee achter dit onderdeel van dit artikel is dat je kan zien hoe je knoppen voor social-medialogins kan toevoegen. Daar zal dit stuk dus over gaan.

Klik op User Registration > Settings.

We nemen nu aan dat je de extensie Social Connect inmiddels hebt geactiveerd op je WordPress dashboard.

Daarom zal je nu een tabblad Social Connect zien bij Settings. Klik daarop.

De instellingen voor Social Connect vereisen dat je een aantal vakjes aanvinkt en de API instellingen voor elk gewenst sociale netwerk inschakelt.

Als je Facebook wil gebruiken, moet je dus dat vakje aankruisen. Hetzelfde geldt voor Twitter.

Inschakelen van sociale logins
Inschakelen van sociale logins

En hetzelfde voor Google en LinkedIn.

Nu wordt het iets ingewikkelder.

Elke knop voor een sociale login werkt doordat deze gelinkt is aan de API van het respectievelijke sociale netwerk. De enige manier waarop je verbinding kan maken met een API is door een app te maken en daarbij elementen zoals sociale App ID’s, Keys en Secrets te gebruiken.

Als je geen idee hebt wat dit zijn, geen zorgen. Voor elk sociale netwerk dat je wilt gebruiken ga je naar het vraagteken naast de instellingen. Voor deze tutorial doen we dit voor bij de Facebook App ID en Secret.

Het vraagteken laat een pop-up zien met een link naar Facebook. Klik daarop.

De App ID ophalen voor Facebook
De App ID ophalen voor Facebook

Hierdoor word je doorgestuurd naar de pagina voor Facebook Apps, waar je een App kan aanmaken om je WordPress registratieformulier te verbinden met dit netwerk.

Klik op Create App.

Doorloop de stappen voor het maken van een app op Facebook, inclusief een naam voor de app en het instellen voor eventuele app domeinen.

Nadat je de app hebt ingesteld, ga je naar Settings > Basic.

Aanpassen van de basisinstellingen voor je Facebook app
Aanpassen van de basisinstellingen voor je Facebook app

Hier kan je de App ID en App Secret vinden.

Klik op Show om het App Secret te tonen en te kopiëren. Kopieer ook de App ID.

App ID en App secret
App ID en App secret

Ga terug naar de API Settings in het WordPress dashboard.

Plak de App ID in het juiste veld. Hetzelfde doe je met het App Secret.

Sla alles op om door te gaan.

Updaten van je API instellingen
Updaten van je API instellingen

Er zijn nog een paar stappen om je social-mediaknoppen niet alleen te activeren, maar ook zelf te bepalen hoe ze precies op je formulier worden getoond.

Klik op het tabblad Advanced Settings, naast het tabblad API Settings van zonet.

De Advanced Settings bieden een hele lading aan instellingen.

Allereerst wil je graag sociale registraties toestaan.

Vervolgens vertel je de plugin dat je ook sociale knoppen wil tonen bij de registratie.

Advanced settings
Advanced settings

Klik op het veld Default User Role om een standaard rol te kiezen die mensen toegewezen krijgen wanneer ze zich aanmelden via een sociaal profiel. Ook in deze situatie is de rol Subscriber een normale keuze.

Vervolgens klik je op de volgende dropdown om het formulier te selecteren dat je gebruikt voor het registreren van gebruikers. We hebben dat formulier al eerder aangemaakt, die je hier kan kiezen. In deze tutorial hebben we het formulier Registration Form genoemd, maar het kan zijn dat jij een andere naam hebt gebruikt.

Als laatst ga je verder naar de andere instellingen om te bepalen hoe de knoppen worden getoond op de pagina. Eén van die instellingen is bijvoorbeeld of je de knoppen onder of boven het formulier wil laten zien.

Het Social Login Template biedt een snelle manier om je knoppen te stylen zonder dat je zelf hoeft te programmeren of iets hoeft aan te passen.

Kies één van de vier stijlen.

Sjablonen voor sociale logins
Sjablonen voor sociale logins

De instellingen Social Text laten ook de tekst voor op de sociale knoppen zien. Meestal wil je de standaardtekst laten zien, maar je kan dit natuurlijk veranderen, bijvoorbeeld voor een andere taal.

Als laatste klik je op Save Changes.

Opslaan van alle bewerkingen
Opslaan van alle bewerkingen

Je kan het WordPress registratieformulier direct previewen in de formbuilder of je gaat gewoon naar de registratiepagina toe. Je zou nu het formulier inclusief social-mediaknoppen moeten zien.

Om een optie voor een sociale login te verwijderen of de instellingen te veranderen, ga je terug naar de instellingen die we zojuist aangepast hebben.

We raden je sterk aan om elk sociale netwerk apart te testen, aangezien ze allemaal een eigen API verbinding hebben, en je natuurlijk wil controleren dat elke app werkt voor alle gebruikers.

Preview van social media knoppen
Preview van social media knoppen

Zo maak je een WordPress registratieformulier met uitgebreide profielen

Met de meeste plugins die we hier hebben behandeld kan je het standaard WordPress registratieformulier aanpassen. Maar wat als je website een echte community is? Stel dat je website een soort sociaal netwerk, datingwebsite of hub voor interne klanten is.

Dan wil je uitgebreide profielen waarin gebruikers allerlei functies en informatie kunnen aanpassen, eventueel foto’s kunnen uploaden en kunnen communiceren met andere gebruikers.

De gemiddelde plugin voor gebruikersregistratie biedt profielen, maar die zijn meestal niet heel uitgebreid.

Daarom willen we je laten zien hoe je een gebruikersregistratie kan activeren waarin gebruikers mooie uitgebreide profielen kunnen aanmaken en zelf kunnen beheren.

Om te beginnen installeer en activeer je de Ultimate Member plugin. Deze plugin biedt custom gebruikersregistratie en inlogformulier aan, voor niks. Daarnaast kan je krachtige gebruikersprofielen toevoegen voor een ledengebied op je website. Er zijn verschillende plugins te vinden met deze functies, maar in deze tutorial houden we het bij Ultimate Member.

Ultimate Member WordPress plugin
Ultimate Member WordPress plugin

Het doel is dat je een gebied maakt voor je klanten waar ze uitgebreide profielen kunnen maken, inclusief knoppen voor bijvoorbeeld reviews, reacties, groepen en nog veel meer.

Het mooie van de Ultimate Member plugin is dat de meeste instellingen hiervoor al goed staan zodra je de plugin activeert. De plugin maakt ook meteen pagina’s voor je profielen aan en diverse registratiepagina’s.

De instellingen voor de plugin staan allemaal bij elkaar onder het tabblad Ultimate Member in het WordPress dashboard.

Klik op Create Pages om verder te gaan.

Aanmaken van pagina's in Ultimate Member
Aanmaken van pagina’s in Ultimate Member

Hiermee activeer je meteen de juiste pagina’s en ga je naar de module Settings van de Ultimate Member plugin.

Je kan de pagina’s veranderen die functioneren als de verschillende registratiepagina’s en profielpagina’s, maar dat is alleen nuttig als je dit wil aanpassen.

Op dit moment zijn de standaardpagina’s van de plugin een prima beginpunt. Je hoeft dus meestal niks te doen met alle velden in het tabblad General > Pages.

Algemene instellingen voor de Ultimate Member plugin
Algemene instellingen voor de Ultimate Member plugin

De volgende stap is het aanpassen van de look van de profielpagina’s en de inschrijvingsmodules. Zoals gezegd is er al een registratiepagina voor je gemaakt, dus je hoeft daar niet zoveel meer te doen.

Iedereen die naar de pagina Registration gaat en een account maakt, zal ook meteen een WordPress gebruikersprofiel krijgen.

In het tabblad Appearance kan je elementen aanpassen die je belangrijk vindt. Zo kan je bijvoorbeeld een andere template voor het formulier kiezen, of het formulier wat kleiner maken. Verder zijn er velden voor het aanpassen van de grootte en iconen van de knoppen en verschillende tekstelementen.

Het tabblad Appearance
Het tabblad Appearance

Wanneer je verder scrolt in de instellingen zal de plugin vragen of je elk profiel een standaard profielfoto en coverfoto wil geven.

Je kan verschillende items aanpassen, zoals de grootte van de cover, of überhaupt geen coverfoto’s gebruiken.

Meer instellingen voor de Ultimate Member plugin
Meer instellingen voor de Ultimate Member plugin

Verder in het deel Appearance, kan je op de Profile Menu link klikken. Hier krijg je de primaire onderdelen van het gebruikersprofiel te zien. Alhoewel je dus alles kan laten zoals het is, zijn er instellingen waar je wat mee kan spelen.

Denk bijvoorbeeld na of je het tabblad About en het profielmenu wil houden. We raden je aan het tabblad Posts te gebruiken wanneer je leden ook bijdragen aan je blog of zelfs als contentcreators fungeren.

Het tabblad Comments is vrij belangrijk voor blogs en actieve communities, aangezien lezers en leden waarschijnlijk hun eigen reacties graag terug willen kunnen zien en kijken of daar nog weer reacties op waren.

Profielmenu
Profielmenu

Na het instellen van de profielen klik je op Save Changes.

Opslaan van je wijzigingen
Opslaan van je wijzigingen

Er zijn nog een aantal schermen met instellingen voor het registratieformulier, inlogformulier en dergelijke. Zorg ervoor dat je de e-mails voor nieuwe registraties aanpast en verander verschillende onderdelen van je WordPress registratieformulier, zoals de breedte en uitlijning.

Alhoewel we nu niet verder ingaan op deze instellingen, is het handig om te weten waar ze zitten, zodat je formulieren goed passen bij je huisstijl.

Instellingen voor registratieformulier en inloggen
Instellingen voor registratieformulier en inloggen

Een registratieformulier is nodig om je gebruikers een plek te geven waar ze gebruikersnamen kunnen aanmaken en profielen kunnen maken en ophalen.

Je kan een registratieformulier maken via Ultimate Member > Forms.

Ook hier biedt de Ultimate Member plugin verschillende standaardformulieren zodat het meeste werk je al uit handen genomen wordt.

Er is een formulier Default Registration dat echt prima is, of het formulier Default Profile.

Standaardformulieren
Standaardformulieren

Daarnaast maakt de plugin ook automatisch pagina’s aan.

Ga naar Pages > All Pages om instellingen voor onder meer de Account en Login pagina’s te zien. De Register pagina is de registratiepagina voor gebruikers, waar ze ook inloggen, terwijl de pagina Account het Default Profile formulier laat zien waar ze hun profiel kunnen wijzigen.

Alle belangrijke shortcodes voor de juiste formulieren zijn al toegevoegd aan de bijbehorende pagina’s.

Je kan ze testen door de gepubliceerde pagina’s te bekijken. Zo kan je bijvoorbeeld op de pagina Register klikken om deze te bekijken.

Testen van de pagina
Testen van de pagina “register”

Aan de front-end kan een bezoeker hun gebruikersnaam en e-mail intypen en een wachtwoord aanmaken.

Testen van een demo account
Testen van een demo account

Het is ook een goed idee om de User pagina te bekijken.

De User pagina
De User pagina

De User pagina is de daadwerkelijke profielmodule waar we het over gehad hebben. Het is een hub waar gebruikers alles kunnen beheren, van profielfoto’s tot bijvoorbeeld groepen en vrienden. De standaardfuncties zijn onder meer een coverfoto, profielfoto, en een introductie.

Profielpagina aan de front-end
Profielpagina aan de front-end

Met een paar klikken heb je dergelijke elementen opgenomen in je profielpagina.

Elke profielpagina biedt knoppen voor het bewerken van het profiel en bekijken van het gebruikersaccount.

Andere tabbladen zijn een knop voor reacties en artikelen.

Meer opties op de profielpagina
Meer opties op de profielpagina

En wat als je meer geavanceerde tabbladen op je profielen wil, voor bijvoorbeeld privéberichten en vrienden?

De Ultimate Member plugin heeft standaard al een vrij strakke maar krachtig profielfunctie, maar je kan deze nog uitbreiden met extensies. De meeste extensies voor profielen vereisen een betaling.

Om de extensies te bekijken en aan je website toe te voegen, ga je naar Ultimate Member > Extensions.

Extensies voor Ultimate Member
Extensies voor Ultimate Member

Er is een lange lijst met mogelijke profielfuncties, die je als tabbladen kan opnemen in je gebruikersprofielen.

De extensie Friends maakt het bijvoorbeeld mogelijk dat je gebruikers onderling contact hebben en elkaar toevoegen als vriend.

En de Notices add-on geeft gebruikers een melding wanneer ze een bericht krijgen. Je kan nog meer krachtige functies voor profielbeheer gebruiken, zoals voor privé berichten, volgers en groepen, om maar eens wat te noemen. Elke extensie wordt toegevoegd na de betalingen via de knop Get This Add-on.

Lijst met extensies van Ultimate Member
Lijst met extensies van Ultimate Member

Het hangt natuurlijk allemaal af van het soort profielfuncties dat je wil bieden aan je leden. Een ledenwebsite heeft bijvoorbeeld meestal een plek voor groepen nodig. Een sociaal netwerk heeft vrienden en berichtenfuncties nodig. Een website voor een online cursus wil graag beoordelingen, notities en berichten laten zien. En er is zelfs een plek voor een banenlijst als je een vacaturebank voor je gebruikers wil maken.

Het voorbeeld hieronder is een voorproefje van wat er allemaal mogelijk is met de Ultimate Member plugin, zeker wanneer je de gevorderde extensies gaat gebruiken.

Voorbeeld van een compleet gebruikersprofiel en een inlogpagina in Ultimate Member
Voorbeeld van een compleet gebruikersprofiel en een inlogpagina in Ultimate Member

Samenvatting

In het algemeen biedt de WordPress module voor gebruikersregistratie de opties die elke website nodig heeft die graag gebruikers wil registreren. Het gemiddelde blog of een kleine online community heeft waarschijnlijk alleen maar het standaard WordPress registratieformulier nodig.

In dat geval kan je het inlogformulier en registratieformulier gewoon zo laten, al is het misschien slim de URL te veranderen voor een betere beveiliging. Je kan ook nog je eigen logo toevoegen zodat de pagina onderdeel is van je huisstijl.

Plugins bieden allerlei mogelijkheden voor het aanpassen van ongeveer elk aspect van je registratieformulier, zeker waar het gaat om unieke velden en het ontwerpen van het uiterlijk van je formulier.

Het is mogelijk om extra, geavanceerde features toe te voegen aan je registratieformulieren. Enkele opties die we hier behandeld hebben, zijn onder meer formulieren die je nieuwe gebruikers meteen toevoegen aan je e-maillijst voor e-mailmarketing. Je kan ook overwegen om betalingen te innen voor exclusieve content of een ledenwebsite.

Het is ook altijd een goed idee om een sociale login te overwegen om het registratieproces wat makkelijker te maken voor je gebruikers. En als laatste is een geavanceerd gebruikersprofiel een geweldige manier om je huidige registratieformulier verder uit te breiden, zodat je klanten of bezoekers elk aspect van hun eigen profiel zelf kunnen beheren.

Als je nog vragen hebt over het beheren of aanpassen van je WordPress registratieformulier, of andere plugins of technieken voor registratieformulieren voor wil stellen, laat het ons dan weten in de reacties hieronder.

Matteo Duò Kinsta

Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.