WordPress - Woordenboek

WordPress Gutenberg Editor

WordPress Gutenberg Editor

Johannes Gutenberg

Met de introductie van de Gutenberg editor nemen de makers van WordPress afscheid van de Classic Editor TinyMCE en betreden ze de wereld van Page Builders. Pagina’s en berichten worden opgebouwd uit blokken. Ieder blok is een stukje content welke in de editor te plaatsen zijn. De blokken kunnen onafhankelijk van elkaar bewerkt en geplaatst worden.

De Gutenberg -blokken zorgen ervoor dat u als gebruiker sneller, zonder enige kennis van HTML of CSS pagina’s kunt opmaken.

Met de benaming van deze editor wijkt WordPress een beetje af van haar traditie om belangrijke updates te vernoemen naar een Jazz Muzikant (of band). Gutenberg was een Duits drukker en geldt als de uitvinder van de boekdrukkunst in Europa.

De gekozen benaming door de makers van WordPress is ook wel een beetje grappig gekozen. Met de WordPress Gutenberg editor wordt er een blokken-content-editor geïntroduceerd.

Johannes Gutenberg introduceerde het gebruik van losse letters voor het boekdrukken. Vergelijkbaar met de Classic Editor, niet waar…. De blokdruk, waarbij een hele bladzijde uit één blok werd vervaardigd, bestond al langer en is niet door Gutenberg uitgevonden.

Content Blokken

De Gutenberg editor werkt dus met blokken, in tegenstelling tot de Classic Editor waar er één groot tekstveld is om de content in op te maken. Voor ieder type content (tekst, afbeelding, video,etc.) is er een blok beschikbaar welke op de pagina te plaatsen is. De diverse blokken zijn onderverdeeld in categorieën.

WordPress Gutenberg Blokken

Gutenberg Blokken

Een gekozen blok wordt op de pagina geplaatst en kunnen eenvoudig gesorteerd en opgemaakt worden. De opmaak van een blok kan opgeslagen worden en herbruikt worden. Daarmee is het mogelijk om bijvoorbeeld een standaard opmaak te creëren voor een afbeelding-blok en deze dan te gebruiken voor andere afbeeldingen zonder dat de opmaak weer gedaan behoeft te worden. Herbruikbare blokken kunnen dus veel tijd besparen.

Bij het werken met Gutenberg moet u in rijen denken. Een pagina is dan van boven naar beneden opgebouwd uit rijen. Zo’n rij kan dan verschillende kolommen hebben, waar dan een content-blok in geplaatst wordt.

WordPress Gutenberg Kolommen

Rij & Kolommen

Eenmaal een pagina ingedeeld is het ook mogelijk om de gemaakte layout als template op te slaan. Die template kan dan weer herbruikt worden voor overige pagina’s waarna alleen de blokken nog gevuld dienen te worden.

Gutenberg Editor

Bij het aanmaken van een nieuwe pagina, ziet de Gutenberg editor er als volgt uit:

WordPress Gutenberg editor overzicht

De Gutenberg editor

1 – De Titel

Hier dient de pagina-titel opgegeven te worden en net als bij het onderwerp “Classic Editor“, willen we hier ook het belang van de SEO-regels benadrukken.

De permalink wordt automatisch aangemaakt en bevat de titel. De permalink is niet direct zichtbaar, maar door het blok onder de titel aan te klikken en dan weer terug in de titel te klikken wordt de permalink zichtbaar en is deze eventueel aan te passen door op de knop Bewerk te klikken:

WordPress Gutenberg editor permalink aanpassen

Permalink bewerken

2 – Content

Hier begint het toevoegen van de daadwerkelijk content van de pagina. Klikken we in de regel “Schrijf je verhaal”, wordt de tekst-bewerker actief en kunnen we de eerste alinea aan de pagina toevoegen en bewerken:

WordPress Gutenberg paragraaf bewerken

Paragraaf editor

Hier hebben we bij:

(a) – van links naar rechts

  • Een blok toevoegen;
  • Ongedaan maken;
  • Opnieuw (wanneer het Ongedaan maken weer hersteld moet worden);
  • Informatie als het aantal woorden, etc. wat aan de pagina is toegevoegd;
  • De mogelijkheid om het bloktype te wijzigen;
  • Tekst uitlijn opties;
  • Vet, Cursief, Link toevoegen en doorhalen;
  • Blok opties (deze worden later tijdens dit onderwerp besproken).

 

(b) – de mogelijkheid om een blok toe te voegen.

(c) – Een afbeelding, koptekst of kolommen aan het blok toe te voegen.

(d) – instellingen voor het lettertype als grootte voor het hele blok, de eerste letter groot en kleurinstellingen voor de tekst en voor de achtergrond van het blok.

De optie “Geavanceerd” komt bij ieder type blok terug en is bedoeld om extra styling toe te voegen via CSS. De verschillende type blokken komen hierna aan bod.

3 – Publiceren

Eenmaal een blok toegevoegd zullen hier de opties geactiveerd worden om de pagina als concept op te slaan (“Bewaar concept”), een Voorbeeld te bekijken en de pagina te publiceren (Publiceer…).

Is de pagina gepubliceerd kan deze aan een menu toegevoegd worden.

Via het radartje worden de document/blok -instellingen verborgen en zichtbaar gemaakt en als laatste hebben we hier “Meer” (de drie puntjes onder elkaar). Deze bespreken we later tijdens dit onderwerp.

4 – Status & Zichtbaarheid

Door op Openbaar te klikken kunnen we de pagina op de website :

  • voor iedereen zichtbaar laten zijn (Openbaar);
  • de pagina “Privé” maken, zodat alleen beheerders en editors (onder gebruikers is de benaming “Redacteur”) de pagina kunnen zien;
  • en “Bescherm met een wachtwoord”, zodat alleen bezoekers die het wachtwoord weten de pagina kunnen bekijken.

Via Onmiddellijk kunnen we een datum en tijd kiezen wanneer de pagina gepubliceerd dient te worden.

5 – Overige instellingen

Uitgelichte afbeelding

Hier kan een uitgelichte afbeelding toegevoegd worden aan de pagina. Deze wordt door de meeste thema’s niet benut bij een pagina maar zou voor SEO-doelstellingen ingezet kunnen worden. Lees hier alles over de: Uitgelichte afbeelding.

Discussie

Door een vinkje te zetten bij “Sta reacties toe” wordt het voor bezoekers mogelijk een een reactie achter te laten bij de pagina. Lees hier alles over: Reacties.

Pagina-attributen

Indien het thema meerdere templates ondersteund, als bijvoorbeeld een pagina met Sidebars, een volledige breedte (full width) pagina, etc.; dan is hier de mogelijkheid om een pagina-template te kiezen.

Via “Hoofdpagina” is het mogelijk om de pagina als sub-pagina aan een andere pagina toe te wijzen. Hiermee is niet automatisch de link naar die pagina gemaakt, maar zal alleen in de permalink-structuur de hoofdpagina opgenomen worden. De permalink ziet er dan zo uit:

https://www.uw-website.nl/hoofdpagina/subpagina/

Door bij “Volgorde” een nummer op te geven kunnen de pagina’s op nummer gesorteerd worden in het pagina-overzichtsscherm.

Gutenberg & Blokken

Er zijn standaard veel blokken beschikbaar in de Gutenberg editor. De meeste blokken spreken voor zich en hier zullen we dan ook de meeste belangrijke behandelen.

We hebben hierna de toolbar welke standaard bij Gutenberg bovenin het scherm getoond wordt uitgeschakeld zodat de toolbar bij het geselecteerde blok getoond wordt. Die optie bevindt zich bij “Meer” instellingen:

Gutenberg Uniforme Toolbar

Uniforme toolbar uitschakelen

Blokken toevoegen

Een blok toevoegen kan op diverse manieren:

Gutenberg blok toevoegen

Blok toevoegen

  • door met de muis-cursor over een bestaand blok heen te gaan verschijnt er een plus-teken boven het blok en door daarop te klikken verschijnt er een paragraaf-blok voor het gekozen blok. Het blok-type is dan te wijzigen door op het plus-teken te klikken, welke links van het blok verschijnt als u met de muis-cursor over het lege paragraaf-blok gaat. Deze methode wordt gebruikt om aan een bestaande pagina een extra rij ergens tussen te voegen;
  • via het plus-teken links boven in het scherm heeft u de keuze uit alle beschikbare blokken en wordt het gekozen blok onderaan de pagina toegevoegd.

Blok Instellingen & Meer Opties

Ieder toegevoegd blok heeft zijn eigen instellingen welke verschijnen door het blok te selecteren. De blok-specifieke instellingen verschijnen dan rechts in het scherm en kunnen dan naar wens aangepast worden.

Meer opties

Ieder blok een aantal standaard opties, welke via de knop “Meer opties” te benaderen zijn:

Gutenberg blok meer opties

Meer opties

Via de keuze “Bewerk als HTML” wordt de kale-tekst-editor actief en kunnen de html-codes van het blok aangepast worden. Hiervoor is wel kennis van de programmeertaal HTML nodig.

Heeft u veel instellingen gedaan aan een bepaald blok en wilt u hetzelfde blok ook op andere pagina’s of berichten gebruiken, kunt u hier het blok toevoegen aan “herbruikbare blokken”.

De overige opties spreken voor zich.

Herbruikbare blokken

Hiervoor zagen we al dat we bij “Meer opties” een blok kunnen toevoegen aan “Herbruikbare blokken”. Kiezen we voor die optie, moeten we een naam opgeven voor het blok en zal die toegevoegd worden.

Om dat blok dan weer te kunnen gebruiken klikken we links bovenin op het plus-teken en kiezen voor de categorie “Herbruikbaar”:

Gutenberg herbruikbare blokken

Herbruikbaar blok kiezen

Door met de muis-cursor dan over een herbruikbaar-blok te gaan zal er een voorbeeld gegeven worden van hoe dan blok er uit ziet. Door dan op het blok te klikken zal het onderaan de pagina ingevoegd worden.

Via de optie Beheer alle herbruikbare blokken is er de mogelijkheid om blokken te exporteren (downloaden naar uw pc) en deze dan te importeren op een andere website met een Gutenberg editor.

Herbruikbaar blok aanpassen

Om de instellingen van een herbruikbaar blok aan te passen kiest u het blok door het aan te klikken en dan voor Bewerk te kiezen:

Herbruikbaar blok aanpassen

Herbruikbaar blok aanpassen

Alle aanpassingen die u dan verricht aan dat blok zullen na opslaan op de gehele website voor dat blok doorgevoerd worden.

Meest gebruikte blokken

Tekst

Zoals we hiervoor al zagen wordt het Tekst-blok automatisch aan de editor toegevoegd, zodat u direct kunt beginnen met het schrijven van de eerste alinea. Zodra u een “Enter” geeft zal de editor een nieuw Tekst-blok toevoegen. Iedere alinea is dus een apart Tekst-blok. De mogelijkheden van dit blok hadden we hiervoor al besproken.

Kop

Via het kop-blok is een subtitel toe te voegen. Kopteksten zijn onderverdeeld van H1 t/m H6 (H = Header). Van H1 groot tot H6, klein. Het gebruik van kopteksten in content is aan te raden ter introductie van het onderwerp wat volgt. Dat maakt het leesbaar voor zowel de bezoeker als voor zoekmachines.

Beschikt het thema over instellingen voor de kopteksten zullen ze bij wijziging, consequent over heel de website aangepast worden.

Rechts in het scherm bij de blok-instellingen kunnen we de verschillende niveaus kiezen en de uitlijning bepalen:

Kop-blok instellingen

Kop-blok instellingen

Citaat

Het citaat-blok kent verder geen instellingen en de opmaak wordt bepaald door het thema. Hoe het citaat er dus daadwerkelijk uit zal zien is alleen te bekijken via de optie Voorbeeld, rechts bovenin het scherm.

Een citaat bestaat doorgaans uit twee regels. De eerste het citaat zelf met daaronder de oorsprong (bijv. de schrijver):

Citaat-blok

Citaat-blok

Tabellen

Het tabel-blok in de categorie “Opmaak”. Na het kiezen van dit blok dient er het aantal te gebruiken kolommen en rijen opgegeven te worden:

Tabel kolommen en rijen kiezen

Tabel invoegen

Heeft u die ingesteld klik dan op Maak en de tabel wordt ingevoegd:

Gutenberg tabel

Tabel cellen

Via de toolbar is het mogelijk om rijen en/of kolommen toe te voegen en/of te verwijderen. De enige instelling die het tabel-blok heeft is het vastzetten van de breedte van de cellen.

Verdere opmaak-mogelijkheden kent dit blok niet. Om de opmaak aan te passen moet u kennis hebben van CSS.

Afbeelding

Een toevoegen kan eenvoudig door een afbeelding in het vlak te slepen, een Upload te doen of via de Mediabibliotheek te selecteren:

Gutenberg Afbeelding-blok

Afbeelding toevoegen

Hebben we een afbeelding gekozen dan verschijnen de instellingen specifiek voor het afbeeldings-blok:

Gutenberg Afbeelding instellingen

Afbeelding Instellingen

Links boven het blok hebben we de mogelijkheid om de afbeelding links uit te lijnen, te centreren of rechts uit te lijnen. Via het potloodje kunnen we basis-bewerkingen doen (zie hiervoor het onderwerp: Media bewerken).

Via de blauwe bolletjes rechts en onder de afbeelding is het mogelijk om de afbeelding proportioneel te verkleinen en weer te vergroten tot maximaal het originele formaat. Onder de afbeelding is een verklarende tekst (onderschrift) op te nemen.

Rechts in de editor hebben we de overige instellingen als Alt tekst, grootte en de mogelijkheid om een link aan de afbeelding toe te voegen. Het toevoegen van een Alt-tekst is altijd aan te raden, daar dit bevorderlijk is voor de SEO.

Galerij

Via dit blok kunnen meerdere afbeelding ingevoegd worden. Het toevoegen van de afbeeldingen werkt hetzelfde als een enkele afbeelding, met als onderscheid dat er hier meerdere geselecteerd kunnen worden. Hebben we bijvoorbeeld 4 afbeeldingen toegevoegd zullen ze als enkele rij verdeeld over meerdere kolommen getoond worden:

Gutenberg Gallerij-blok

Gallerij-blok

Via de Gallerij-instellingen is het dan mogelijk om het aantal kolommen in te stellen en is er de mogelijkheid om de afbeeldingen te laten bijsnijden zodat de afbeeldingen in dezelfde rij gelijke afmetingen krijgen.

Insluitingen

Via de categorie “Insluitingen” is het mogelijk om bijvoorbeeld een YouTube -video op te nemen in de pagina:

Gutenberg Insluitingen

YouTube Video invoegen

De YouTube-url dient dan in het blok gekopieerd te worden. Het blok kent verder ook geen instellingen.

Widgets

Het is tevens mogelijk om Widgets in de content van de pagina op te nemen:

Gutenberg widgets opnemen in pagina

Widgets

Hiermee wordt het eenvoudige gemaakt om een bijvoorbeeld een lijst van recente berichten op te nemen in de pagina.

Vragen & Info

Heeft u vragen naar aanleiding van deze uitleg, stuur ons dan een mail op: info@qwain.nl .

Ondersteuning staat bij ons op nummer 1, wij zijn u graag van dienst !

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .


QWAIN - Quality Without Any Interesting Name
Uw partner voor professioneel, snel en betrouwbaar website design, ontwikkeling en trainingen.

WordPress Nieuwsbrief
WordPress Nieuwsbrief

Geen artikel missen ? Volg dan de duizenden die onze Online WordPress artikelen maandelijks lezen:

Formulierberichten: Foutmelding

Bij vrijwel ieder veld zijn één of meerdere meldingen in te stellen. De foutmelding is er daar één van.

Kolom Indeling

Er verschijnt een foutmelding als het veld “verplicht” is en niet ingevuld of geselecteerd is. Er kan ook een foutmelding getoond worden als de ingevulde waarde niet correct is. Ten behoeve van de gebruikersvriendelijk is het raadzaam om bij ieder veld de foutmelding aan te passen aan het type veld en wat er verwacht wordt dat de gebruiker in moet vullen.

Bij de “Globale Instellingen” vindt je een aantal standaard meldingen welke daar ook aangepast kunnen worden.

Formulierlayout: Kolommen

De velden op het formulier zijn eenvoudig in kolommen weer te geven. Via de CSS-Layout-Klassen optie kies je dan de kolom-breedte:

Kolom Indeling

Ook te opties van de Meerkeuze en de Radioknop zijn in kolommen in te delen.

Formulierveld: Dynamisch

Dit veld wordt gebruikt om dynamisch waarden op te halen uit andere formulieren:

formulieren dynamisch waarden ophalen

In dit voorbeeld hebben we een tweede formulier waarin we de product info, prijs en afbeelding hebben opgeslagen. Het selectieveld is van het type dynamisch en haalt dan de bijkomende informatie op uit het product-formulier.

Formulierveld: Adres

Met dit veld is het mogelijk om in één keer een volledig aantal velden te tonen om adres-informatie in te laten vullen.

Adres Velden

Via de instellingen is de landselectie eventueel uit te schakelen. Er is ook nog een mogelijkheid om een provincie-veld te laten tonen. De extra regel voor de straatnaam is niet uit te zetten. Zouden we dat willen dienen we dat via “Extra CSS” te bewerkstelligen.

Formulierveld: Schakelaar

Met dit veld kunnen we de bezoeker laten kiezen tussen twee waardes als een soort van aan/uit schakelaar.

formulieren schakelaar keuze veld
De keuzes (in dit voorbeeld “Ja” en “Nee”) als ook het label zijn in te stellen.

Via de stylen is het mogelijk om de schakelaar een eigen kleur te geven en de getoonde lettergrootte in te stellen. De gekozen waardes worden echter niet opgeslagen.

Het veld kan bijvoorbeeld gebruikt worden om secties wel of niet te tonen.

Formulierveld: Schuifknop

Via de schuifknop kunnen we de gebruiker een nummer laten selecteren.

formulieren nummer schuifknop

Het laagste en het hoogste getal is instelbaar, zo ook het aantal decimalen en stappen waarmee het getal verhoogd of verlaagd zal worden.

Via de stylen is het mogelijk om de knop en de lijn een eigen kleur te geven en de getoonde lettergrootte in te stellen. Via “Eigen CSS” is het mogelijk om bijvoorbeeld een “€” teken voor het getal te laten tonen.

Formulierveld: Schaal (Scale)

Met dit veld kan eenvoudig een beoordelingsveld worden aangemaakt welke getoond wordt als een set van Radioknoppen:

Schaalbeoordeling

De nummering is instelbaar van 0 – 20.

Het is verder een vrij eenvoudig veld. Aan de nummers is geen scheidingswaarde toe te kennen om hier een eigen rekenwaarde mee te creëren. Wil je een eigen rekenfactor toevoegen dan dien je de Radio Button te gebruiken.

Formulierveld: Verborgen Veld

Dit veld wordt niet getoond aan de bezoeker en wordt gebruikt om gegevens in op te slaan die we zelf verder willen gebruiken.

Verborgen veld

Toepassingen van dit veld zijn bijvoorbeeld: berekeningen of het samenvoegen van gegevens als aanhef, voor- en achternaam om een brief- of e-mail aanhef te creëren.

Het is raadzaam om het label van het veld een voor jezelf duidelijk herkenbare naam te geven en ook de veldsleutel te benoemen. Daarmee wordt het gebruik van het veld bij andere velden met dynamische waarden of het maken van formulier-acties en weergaven eenvoudiger. Het veld is dan namelijk herkenbaar.

Formulierveld: Sterbeoordeling

De sterbeoordeling kan gebruikt worden om de gebruiker eenvoudig een score te late geven.

Sterbeoordeling

Het aantal te tonen sterren is in te stellen.

De stijl van de sterren is niet instelbaar via de standaard stijlen en dient dan via “Eigen CSS” te worden opgemaakt.

Veldlabel

Via het veldlabel geven we het veld een ‘zichtbare’ naam voor de gebruiker. Veelal geeft het veldlabel al aan wat er in het veld ingevuld dient te worden:

Veldlabel

Het label dient bij voorkeur kort en duidelijk te zijn. Willen we meer uitleg kwijt kunnen we eventueel de veldbeschrijving gebruiken en/of een placeholder plaatsen.

De positie van het label is instelbaar (boven, onder, voor het veld….) en de opmaak van het veldlabel is in te stellen via de Stijlen en is per formulier of zelfs per veld apart op te maken.

Veldomschrijving

De veldomschrijving is een korte tekst welke onder het veld getoond wordt om een korte uitleg te geven wat er verwacht wordt dat er in het veld ingevuld wordt:

Veldomschrijving

De opmaak als lettertype grootte, kleur en de uitlijning is in te stellen via de formulier-stijlen en eventueel per formulier of per veld aan te passen.

Formulierveld: RTF (Rich Text)

Het RTF (Rich Text Field) is eenzelfde veld als de Paragraaf, maar dan met de TinyMCE Tekstbewerker functies:

Rich Text Field

Het is mogelijk om een pagina te maken met een formulier welke gebruikt kan worden om bijvoorbeeld de gebruiker een WordPress-bericht aan te laten maken. Dan wordt dit veld ingezet om het bericht in op te maken.

Formulier Instellingen: Ajax & JavaScript

Via de instellingen van het formulier kunnen we aangeven of er gebruik gemaakt dient te worden van Ajax & JavaScript:

Ajax & JavaScript Instellingen

Bij grotere formulieren is het aanvinken van de eerste optie een aanrader. De formulieren-editor laadt sneller bij het opslaan.

Willen we dat als de gebruiker de verzendknop klikt de pagina niet ververst wordt dan dienen we de tweede optie aan te vinken.

Als de laatste optie is aangevinkt zullen alle velden welke een vaste invoer verlangen (e-mail, datum, tijd, etc.) of verplichte velden direct gecontroleerd worden in plaats van bij het aanklikken van de verzendknop.

CSS Layout Klassen

De “CSS Layout Klassen” worden voornamelijk gebruikt om meerdere velden op één rij (dus naast elkaar) te plaatsen.

Velden op één rij

Velden op één rij

Via de CSS Layout Klassen is het ook mogelijk om bij de meerkeuze-opties de opties in meerdere kolommen te tonen en rekenvelden op te maken.

Lookup Waarde/Veld

Via een lookup kunnen we data uit andere formulieren intergreren in het formulier om bijvoorbeeld een uitklapveld te vullen:

Lookup

In dit voorbeeld hebben we een formulier waarmee alle hondenrassen zijn opgeslagen. Op een ander formulier gebruiken we die opgeslagen rassen dan als uitklapbaar-keuze-veld om de gebruiker zo zijn/haar ras te laten kiezen. Wijzigen we een ras in het rassen-formulier is die wijziging dan ook direct beschikbaar op het formulier waar we de lookup gebruiken.

Placeholder

Een “placeholder” is een vooraf ingevulde waarde in het veld wat we gebruiken:

Placeholder

Placeholders worden meestal gebruikt bij formulieren waar het veldlabel en de veldomschrijving is uitgeschakeld en zo dan aan te geven wat er verwacht wordt dat er in het veld wordt ingevuld.

Dynamische Waarde

Een veld kan gevuld worden met data uit andere velden van het formulier of zelfs uit data van een ander formulier.

Dynamische Waarde

Zo kunnen gegevens uit verschillende velden gekoppeld worden en ingevuld worden in één veld. Hebben we bijvoorbeeld velden waar voornaam en achternaam ingevuld zijn, kunnen we die twee velden samen vormen tot één waarde (voornaam + achternaam) welke dan als briefhoofd of e-mail -aanhef gebruikt kan worden.

Formidable Add-On’s

“Add-On’s” zijn extra toevoegingen of uitbreidingen aan de Formidable-plugin:

Formidable Add-Ons Overzicht

Add-Ons Overzicht

Zo is er een Add-On om gegevens te koppelen aan MailChimp, een Add-On om een login-scherm te maken en ga zo maar verder. De Add-On’s worden als extra plugin(s) geïnstalleerd.

Exporteren

De export-functie kan gebruikt worden om een backup te maken of om een gemaakt formulier te kopiëren naar een andere website:

Exporteren

Hier is het mogelijk om een enkel formulier of meerdere formulieren tegelijk te exporteren. Ook kan de opgeslagen data, aangemaakte weergaven en stijlen van het gekozen formulier mee geëxporteerd worden.

Inzendingen kunnen ook als CSV-bestand geëxporteerd worden om ze dan in Excel te kunnen gebruiken.

Importeren

Hebben we een Formidable XML bestand aangemaakt via de “Exporteer” functie dan kunnen we die weer importeren:

Importeren

Zo kunnen we eenvoudige een eerder gemaakt formulier van de ene website naar de andere kopiëren. Stijlen, inzendingen en overige opties welke via de exporteer-functie meegenomen zijn zullen ook weer ingelezen worden bij het importeren.

Ook is het mogelijk om een CSV-bestand, bijvoorbeeld uit Excel te importeren in een formulier.

Weergaven

“Weergaven” zijn speciale formulieren om ingevulde en opgeslagen gegevens van formulieren te tonen op een pagina of in een bericht.

Contactformulier Weergaven

De data welke ingezonden is via formulieren is dan in een tabel weergave op een pagina te plaatsen. De “Weergaven” zijn geheel naar eigen stijl en wens op te maken en te bouwen.

Stijlen

Alle velden, knoppen, teksten, etc. welke op een formulier getoond worden kunnen visueel aangepast worden via de “Stijlen”:

Formidable Stijlen

Stijlen

Via de stijlen van Formidable is het eenvoudig om de formulier-stijl naar wens aan te passen en zo de kleuren en overige opmaak te kiezen welke aansluit bij het gebruikte thema. Hebben we meerdere formulieren dan is het ook mogelijk om per formulier een stijl-blad aan te maken en die aan het formulier te koppelen.

Globale Instellingen

Via de “Globale Instellingen” kunnen we o.a. de algemene foutmeldingen en een aantal overige berichten instellen, de Pro versie activeren, gebruikersrechten instellen, etc.:

Formidable Globale Instellingen

Instellingen

Hier vindt je ook de optie om de Formidable-plugin te verwijderen en daarmee ook alle opgeslagen formulieren, inzendingen en alles wat de plugin heeft opgeslagen in de WordPress Database.

Inzendingen

De formulier inzendingen worden standaard in de database van WordPress opgeslagen en kunnen worden bekeken via het hoofdmenu van Formidable en dan te kiezen voor “Inzendingen”. De inzendingen van alle formulieren wordt dan getoond:

Formidable Inzendingen Overzicht

Inzendingen Overzicht

Het is hier ook mogelijk om de ingezonden data van ieder gemaakt formulier apart te bekijken. De inzendingen kunnen ook via een zgn. “Weergave” op een in WordPress gemaakte pagina of bericht geplaatst worden en zo aan de bezoeker (gebruiker) getoond worden.

Ook kunnen bepaalde ingevulde velden geplaatst worden in E-mailacties.

Formulierveld: HTML

Het HTML-veld is bedoeld om een stukje met HTML opgemaakte tekst op te nemen in het formulier.

Voorbeeld - Algemene Voorwaarden

HTML Voorbeeld – Algemene Voorwaarden

In het HTML-veld kunnen ook Formidable Shortcodes of Shortcodes van andere geactiveerde plugins opgenomen worden.

Formulierveld: Website

Het website-veld ziet er ook uit als een tekstveld. De invoer wordt gecontroleerd aan de hand van de URL-standaard.

Website-veld

Buiten de zichtbare breedte van het veld en/of het een verplicht veld is kent dit veld verder geen bijzondere instellingen.

Formulierveld: ReCaptcha

reCaptcha wordt ingezet om inzendingen van spam-robots tegen te gaan.

reCaptcha

reCaptcha is een technologie van Google. Om reCaptcha te gebruiken is dan een API-Key van Google nodig welke gratis te verkrijgen is.

Formulierveld: Tijd

Via dit veld is een tijd in te voeren. De tijd (klok) is instelbaar als 12 of 24 uurs als ook het aantal minuten (tijdslot) wat te kiezen is.

Tijden-keuze

Het is ook mogelijk om een enkel tijdsverloop als keuze te laten zien om de keuze voor de gebruiker te vereenvoudigen.

Formulierveld: Datum

Zoals de benaming van het veld al aangeeft is het hier alleen mogelijk om een datum in te voeren. In te stellen is of er een kalender-popup gebruikt kan worden:

Datumveld met kalender-popup

Naast de kalender-optie is het nog mogelijk om een regio (land) te kiezen voor de datum-standaard en vanzelfsprekend of dit een verplicht veld is of niet.

Formulierveld: Telefoon

Het telefoonveld ziet er uit als een normaal tekstveld, met als verschil dat er alleen een voorgedefinieerd nummer in combinatie met karakters als ( ) – + ingevoerd mag worden.

Telefoonveld

Door de vele verschillen in de opmaak van telefoonnummers in Europa wordt dit veld niet vaak toegepast bij openbaar beschikbare formulieren. Hebben we een formulier welke we enkel intern gebruiken en willen we een eenduidige invoer van de telefoonnummers dan is dit veld daarvoor te gebruiken.

Formulierveld: Uitklapbaar (keuzeveld)

Het “Uitklapbaar” keuzeveld is te vergelijken met de “Meerkeuze” en/of “Radio Button”, met als verschil dat de keuzeopties als een uitklap-menu beschikbaar komen:

formulieren uitklapbaar keuze veld

Het aantal opties is in principe onbeperkt aan te maken en zo in te stellen dat meerdere opties te kiezen zijn of alleen één. Een “autocomplete” functie is beschikbaar om het kiezen d.m.v. intypen van de keuze versneld kan worden.

Net als bij de Meerkeuze en de Radio Button zijn er ook “verborgen” waardes aan de keuze-opties mee te geven waarmee verder in het formulier gerekend zou kunnen worden. De keuze-opties zijn ook weer te gebruiken als voorwaarde bij vervolg-velden met conditionele logica.

Dit veld wordt gebruikt als er veel opties beschikbaar zijn om uit te kiezen.

Formulierveld: Radio Button (keuze)

De Radio Button is een “of of” keuzeveld. De bezoeker kan dus maar één keuze selecteren:

Radio Button

Net als bij de “Meerkeuze” heeft het veld ook de optie “Anders”. Kies de bezoeker daarvoor dan verschijnt er een tekstveld waarin de bezoeker een korte vrij tekst kan invoeren.

De uitlijning van de opties kan zowel op één regel als onder elkaar of in kolommen. Ook kunnen er “verborgen” waardes aan de keuze-opties meegegeven worden waarmee verder in het formulier gerekend zou kunnen worden. De keuze-opties zijn ook te gebruiken als voorwaarde bij vervolg-velden met conditionele logica.

Het veld is ideaal om de bezoeker een snelle keuze te laten maken.

Formulierveld: Meerkeuze

Het meerkeuze-veld wordt gebruikt om een aantal vaste keuzes te laten zien aan de bezoeker. In tegenstelling tot de “Radio Button” kan de bezoeker kan dan één of meerdere keuzes selecteren:

Meerkeuze

Het veld heeft ook de optie “Anders”. Kies de bezoeker daarvoor dan verschijnt er een tekstveld waarin de bezoeker een korte vrij tekst kan invoeren.

De uitlijning van de opties kan zowel op één regel als onder elkaar of in kolommen. Ook kunnen er “verborgen” waardes aan de keuze-opties meegegeven worden waarmee verder in het formulier gerekend zou kunnen worden. De keuze-opties zijn ook te gebruiken als voorwaarde bij vervolg-velden met conditionele logica.

Formulierveld: Nummer

Via een nummer-veld kunnen we de bezoeker een getal laten invoeren.

Nummerveld

Het getal kan vrij ingevoerd worden of via een ‘selector’ worden gekozen. Zowel de minimum als de maximum waarde is in te stellen als ook de stap-grootte. Valt het nummer niet binnen de range welke ingesteld is zal een foutmelding getoond worden en wordt de invoer niet goedgekeurd.

De ingevoerde waarde kan eventueel ook gebruikt worden bij andere velden als rekenwaarde om zo, bijvoorbeeld, een offerte of enquête -formulier te maken.

Formulierveld: Tekst

Het tekstveld is het meest gebruikte veld bij formulieren en wordt gebruikt om de bezoeker een vrije tekst op één regel te laten invoeren.

Tekstveld

Het veld heeft standaard geen beperkingen qua invoer en kan wel of niet verplicht gesteld worden. De gegevens welke de bezoeker mag invoeren is wel in te perken via speciale opmaak-codes. Zo is ook de breedte van het veld aan te passen.

Dit veld wordt meestal gebruikt bij contactformulieren voor velden als Voornaam, Achternaam, Woonplaats, Onderwerp, etc.

Formulierveld: E-mailadres

Door middel van het E-mailadres -veld beperken we de invoer tot een geldig e-mailadres:

E-mailadres -veld

Er wordt automatisch gecontroleerd of de invoer een geldig e-mailadres formaat heeft. Is dat niet zo, zal er een foutmelding verschijnen.

Formulierveld: Paragraaf

Het paragraaf-veld is een soort van tekst-veld waarbij de bezoeker de mogelijkheid krijgt om “onbeperkt” aantal tekstregels in te vullen:

Paragraafveld

Het aantal zichtbare regels en de breedte van het veld zijn vrij in te stellen. Ook is het veld verplicht te maken.

Dit veld wordt meestal gebruikt bij contactformulieren om de reden van het inzenden van het formulier te laten beschrijven.

Formuliervelden

Er zijn vele type velden beschikbaar. Het meest gebruikte veld is het tekstveld. Hiermee kan de bezoeker vrije tekst invoeren als bijvoorbeeld voornaam, achternaam, etc.

Ook zijn er speciale velden waarbij de invoer beperkt is. Dat zijn o.a. de velden: datum, tijd, e-mailadres, website, telefoon, etc. Bij ieder veld is kunnen we instellen of het veld “verplicht” is. Wordt een verplicht veld niet ingevuld, kan de bezoeker het formulier niet inzenden of verder gaan met het invullen van overige velden.

Willen we vaste informatie van de bezoeker dan kunnen we die instellen met behulp van de “Meerkeuze”, “Radio Button” of het “Uitklapbaar” -veld.

Het is belangrijk om bij het maken van een formulier van te voren goed na te denken over de hoeveelheid en welke -informatie we van de bezoeker verlangen.

Lange formulieren (een formulier met veel velden) kan de bezoeker afschrikken en dan het formulier niet invullen.

Willen we meer informatie van de bezoeker dan is het raadzaam om gebruik te maken van zgn. conditionele secties om velden pas zichtbaar te maken zodra er al een aantal velden zijn ingevuld, eventueel door middel van de Meerkeuze en/of Radio-Button.

Formulierveld: Bestandsupload

Via dit veld geven we de bezoeker de mogelijkheid om één of meerdere bestanden toe te voegen aan het formulier:

formulier bestandsupload

Bestandsupload-veld

Het aantal bestanden, het bestandstype en de maximale grootte welke geupload mag worden is in te stellen.

Heb je bijvoorbeeld een sollicitatieformulier, dan zou de bezoeker een cv en pasfoto kunnen uploaden.

WordPress Woordenboek

Dit artikel is slechts één van de ruim 250 onderwerpen uit ons “WordPress Woordenboek”.

Wil je dit artikel en ons volledige WordPress Woordenboek bekijken, schrijf je in en je krijgt direct gratis toegang !

Woordenboek - Inschrijven

Ja, ik wil toegang tot het Woordenboek: