- \n
- Log in op het WP dashboard<\/li>\n
- Klik op links in het menu op Pagina’s<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-06-at-20.48.53.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Klik bovenaan op Nieuwe pagina<\/em><\/li>\n
- De pop-up die eventueel verschijnt mag weg geklikt worden, je ziet nu het onderstaande scherm:<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.46.44.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Vul bij Titel toevoegen<\/em> de titel van je pagina in (bv. Contact)<\/li>\n
- Klik rechts bovenaan 2x op de blauwe knop Publiceren<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.49.04.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Klik daarna bovenaan links op de blauwe knop Bewerk met Elementor<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.50.46.png\" "\\"Screenshot")
<\/span><\/p>\nEen titel toevoegen<\/h2>\n
- \n
- Klik op het plusteken in het midden van de pagina<\/li>\n
- Klik vervolgens op \u00e9\u00e9n van de vakken, afhankelijk van welke container structuur je wil. In het voorbeeld kiezen we een kolom container<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Plusje.png\" "\\"Plusje\\"")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-22.01.11.png\" "\\"Kolom")
<\/span><\/p>\n- \n
- Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" "\\"Raster\\"")
<\/span><\/p>\n- \n
- Sleep het Koptekst<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de sectie<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Koptekst-titel-juisttt.png\" "\\"Koptekst")
<\/span><\/p>\n- \n
- Zorg ervoor dat het koptekst element geselecteerd is door er in te klikken, wijzig de tekst en pas indien gewenst nog andere stijlaanpassingen toe (zoals kleuren, typografie,…)<\/li>\n<\/ul>\n
Een contactformulier invoegen en instellen<\/h2>\n
Het is erg belangrijk dat je je formulier ook goed beschermd tegen spam, dit kan met Google reCAPTCHA en Honeypot. Ga daarvoor naar module 7 les 4 of klik hieronder.<\/p>\n
Een formulier invoegen<\/span><\/h3>\n
- \n
- Klik links bovenaan in de zwarte balk op het rastertje<\/li>\n
- Voeg IN de container met de koptekst eronder een nieuwe container toe door die er in te slepen en los te laten wanneer je de roze balk ziet onder het koptekst element<\/li>\n<\/ul>\n<\/span>
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-13.19.50.png\" "\\"Screenshot")
<\/span><\/p>\nJe krijgt nu de onderstaande structuur: een hoofdcontainer met daarin een koptekst element, onder het koptekst element een subcontainer.<\/p>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-13.18.50.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Selecteer de subcontainer door op het roze vakje met het rechthoekje te klikken en zet de richting op Kolom. <\/em>Pas eventueel ook al de uitlijning <\/em>van de container aan<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-13.23.04.png\" "\\"Screenshot")
<\/span><\/p>\n\n
- \n
- Klik rechts bovenaan bij de instellingen in de rode balk op het raster<\/strong><\/li>\n<\/ul>\n<\/span><\/p>\n
- \n
- Typ “Form” in het zoekvak<\/li>\n
- Sleep het Form <\/em>of Formulier<\/em> element links vanuit de instellingen in de subcontainer en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-13.26.51.png\" "\\"Screenshot")
<\/span><\/p>\nHet formulier verschijnt nu in de subcontainer.<\/p>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-13.28.23.png\" "\\"Screenshot")
<\/span><\/p>\nDe labels vertalen & extra velden toevoegen<\/span><\/h3>\n
- \n
- Zorg ervoor dat het formulier geselecteerd is door er in te klikken<\/li>\n
- Klik links in de instellingen op Name<\/strong> <\/em>en wijzig bij Label <\/em>en Placeholder<\/em> <\/em>de tekst naar bv. “Voornaam”<\/li>\n
- Bij Required<\/em> kan je ervoor kiezen om dit veld verplicht te laten invullen<\/li>\n
- Zet bij Column width<\/em> de breedte op 50%, zodat er nadien nog “Achternaam” naast geplaatst kan worden<\/li>\n
- Bij Type<\/em> zie je dat dit een Tekst<\/em> is, dat mag blijven staan<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-18.23.13.png\" "\\"Screenshot")
<\/span><\/p>\n- \n
- Dupliceer het Voornaam-veld door ernaast op het icoon met de 2 papiertjes te klikken. Er zal een 2de identiek veld toegevoegd worden<\/li>\n
- Wijzig de Label<\/em> en Placeholder<\/em> tekst naar “Achternaam”<\/li>\n
- Vertaal ook Email<\/em> <\/strong>naar “E-mail”. Zoals je kan zien is het Type<\/em> is hier geen tekst maar Email<\/em><\/li>\n
- Zet het Email<\/em> veld op 50% zodat we ernaast nog een gsm-nummer veld kunnen toevoegen<\/li>\n
- Klik onderaan op Item toevoegen<\/em> en sleep dit veld onder Email<\/em><\/li>\n
- Geef dit veld het type Number<\/strong><\/em><\/li>\n
- Wijzig de Label<\/em> en Placeholder<\/em> tekst naar “Gsm-nummer”. Een andere optie is dat je bij Placeholder<\/em> een voorbeeld gsm-nummer zet zodat mensen meer geneigd zijn om dit in te vullen op de manier zoals jij wil<\/li>\n
- Zet het Number<\/em> veld op 50% zodat het naast het e-mailadres komt<\/li>\n
- Klik op Message<\/strong>, <\/em>je zal zien dat hier als Type <\/em>een <\/span>Tekstarea o<\/em>fwel een tekstvak wordt gebruikt. In tegenstelling tot het type Tekst<\/em>, kan hier veel meer tekst in geplaatst worden<\/li>\n
- Wijzig de Label <\/em>tekst naar “Bericht” en de Placeholder <\/em>tekst bv. naar “Typ hier…”<\/li>\n
- Maak dit veld verplicht<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-18.25.53.png\" "\\"Screenshot")
<\/span><\/p>\nExtra instellingen<\/span><\/h3>\n
FORM FIELDS<\/p>\n
- \n
- Input Size<\/span>: hier kan je de grootte van de invulvelden<\/strong> wijzigen (in het voorbeeld blijvt het op Small<\/em> staan)<\/li>\n
- Label<\/span>: kies of je de labels boven de tekstvelden<\/strong> wil weergeven (in het voorbeeld wordt dit uitgezet)<\/li>\n
- Required Mark<\/span>: als je dit aanvinkt, kan je sterretjes weergeven<\/strong> die aangeven dat het veld verplicht is (in het voorbeeld wordt dit uitgezet)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-18.26.39.png\" "\\"Screenshot")
<\/span><\/p>\nBUTTONS<\/p>\n
- \n
- Size<\/span>: kies hier de grootte <\/strong>van de knop<\/li>\n
- Alignment<\/span>: hier kan je de uitlijning <\/strong>van de knop kiezen (links, gecentreerd, rechts of uitgevuld -> bij Uitgevuld<\/em> gaat de knop over de hele breedte van de kolom weergegeven worden)<\/li>\n
- Step Buttons<\/span>: je mag deze vertalen als je wil maar meestal zal je een eenvoudig formulier invoegen waarbij geen stappen worden doorlopen<\/li>\n
- Submit Button<\/span>: hier kan je de tekst van de knop<\/strong> wijzigen, bv. naar “Verzenden” ipv “Submit)<\/li>\n
- Icon<\/span>: je kan eventueel nog een icoon<\/strong> toevoegen aan de knop en de positie daarvan instellen (boven, onder, links of rechts)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-09-at-20.06.39.png\" "\\"Screenshot")
<\/span><\/p>\nACTIONS AFTER SUBMIT<\/p>\n
Hier kan je bepalen wat er gebeurt nadat iemand het formulier heeft ingediend. Een belangrijke dus!<\/p>\n
- \n
- Collect submissions<\/span>: als dit toegevoegd wordt zullen alle inzendingen<\/strong> verzameld worden in de backend van WordPress<\/strong><\/li>\n
- Email<\/span>: als je dit toevoegt zal er na inzending ook een e-mail verzonden worden<\/strong> naar een e-mailadres naar keuze (dat van jezelf)<\/li>\n
- Redirect<\/span>: wanneer je een redirect instelt kan je ervoor zorgen dat mensen naar bv. een bedanktpagina worden omgeleid<\/strong> nadat ze op “Verzenden” hebben geklikt. Als je dit niet instelt zal de bezoeker op dezelfde pagina blijven en komt er een eenvoudige Success message<\/em> onder het fomulier<\/li>\n
- Pop-up<\/span>: in plaats van een omleiding naar een aparte bedanktpagina kan je er ook voor zorgen om een pop-up te tonen<\/strong> <\/li>\n<\/ul>\n
- Email<\/span>: als je dit toevoegt zal er na inzending ook een e-mail verzonden worden<\/strong> naar een e-mailadres naar keuze (dat van jezelf)<\/li>\n
- Alignment<\/span>: hier kan je de uitlijning <\/strong>van de knop kiezen (links, gecentreerd, rechts of uitgevuld -> bij Uitgevuld<\/em> gaat de knop over de hele breedte van de kolom weergegeven worden)<\/li>\n
- Label<\/span>: kies of je de labels boven de tekstvelden<\/strong> wil weergeven (in het voorbeeld wordt dit uitgezet)<\/li>\n
- Vertaal ook Email<\/em> <\/strong>naar “E-mail”. Zoals je kan zien is het Type<\/em> is hier geen tekst maar Email<\/em><\/li>\n
- Bij Required<\/em> kan je ervoor kiezen om dit veld verplicht te laten invullen<\/li>\n
- Klik rechts bovenaan bij de instellingen in de rode balk op het raster<\/strong><\/li>\n<\/ul>\n
- Selecteer de subcontainer door op het roze vakje met het rechthoekje te klikken en zet de richting op Kolom. <\/em>Pas eventueel ook al de uitlijning <\/em>van de container aan<\/li>\n<\/ul>\n
- Zorg ervoor dat het koptekst element geselecteerd is door er in te klikken, wijzig de tekst en pas indien gewenst nog andere stijlaanpassingen toe (zoals kleuren, typografie,…)<\/li>\n<\/ul>\n
- Sleep het Koptekst<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de sectie<\/li>\n<\/ul>\n
- Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong><\/li>\n<\/ul>\n
- Klik rechts bovenaan 2x op de blauwe knop Publiceren<\/em><\/li>\n<\/ul>\n
- De pop-up die eventueel verschijnt mag weg geklikt worden, je ziet nu het onderstaande scherm:<\/li>\n<\/ul>\n
- Klik bovenaan op Nieuwe pagina<\/em><\/li>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-09-at-20.36.45.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/08\/Screenshot-2023-08-17-at-17.17.59.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-12-at-11.59.08.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-12-at-11.58.15.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-12-at-12.04.31-e1644664118403.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-12-at-12.04.43.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-12-at-12.04.55.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-12-at-12.05.05.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-18.33.29.png\" "\\"Screenshot")
<\/span><\/p>\n