Wil je websitebezoekers via een formulier data laten wegschrijven naar een custom post type? Met Gravity Forms kan het een stuk eenvoudiger dan je zou denken!
Ik ben ervan overtuigd dat je met custom post types, Gravity Forms en Advanced Custom Fields zo’n 99% van de meeste websites kan maken zonder een geniale developer te zijn. Weten hoe deze drie zaken werken is dan ook een must voor elke WordPress developer. Zo kan je namelijk zelf geavanceerde functionaliteiten toevoegen aan je website zonder steeds naar een plugin te moeten grijpen.
Stel dat je jouw website wil uitbreiden met een formulier waar bezoekers een belverzoek kunnen aanvragen. Bezoekers vullen dus hun naam, telefoonnummer en korte omschrijving in, en vervolgens krijgt de verantwoordelijke een verzoek om deze persoon op te bellen. De verantwoordelijke wil niet enkel via mail op de hoogte worden gehouden van nieuwe verzoeken, maar via een Custom Post Type wil de verantwoordelijke ook binnen WordPress een overzicht van alle verzoeken. Zo kan zij makkelijk behandelde verzoeken verwijderen om het overzicht te behouden.
Opzet
Voor deze demo-doeleinden heb ik een nieuwe WordPress-installatie opgezet met:
- Gravity Forms
- De Gravity Forms add-on “Advanced Post Creation” (hiervoor heb je het Elite-abonnement nodig)
- Advanced Custom Fields (gratis versie volstaat)
Ook heb ik een Custom Post Type “belverzoeken” aangemaakt. Via Advanced Custom Fields heb ik een extra veld toegevoegd aan dit custom post type genaamd “telefoonnummer”.
De uitdaging
We willen dat gebruikers op de website een formulier hebben waar ze drie zaken kunnen invullen: naam, telefoonnummer en bericht. Na het verzenden van dat formulier, willen we dat deze data wordt weggeschreven naar de overeenkomende velden van het custom post type.
De oplossing
Installeer Gravity Forms en activeer de add-on “Advanced Post Creation”. Maak een nieuw formulier aan en voorzie de velden die overeenkomen met je custom post type, in mijn geval is dat: naam, telefoonnummer en omschrijving.
Navigeer naar de instellingen van het formulier. Je ziet nu een nieuw tabblad “Post Creation” waar je de opmerking krijgt dat je geen feeds hebt. Maak een nieuwe feed aan.
Geef de feed een duidelijke titel (omschrijf wat je met het formulier gaat doen) en kies bij ‘Type’ voor je custom post type in plaats van ‘Post’. De ‘status’ en ‘date’ kan je in de meeste gevallen ongewijzigd laten. Standaard zal de huidige ingelogde gebruiker worden geregistreerd als auteur. Moeten gebruikers niet inloggen (in ons geval zijn het bijvoorbeeld gewoon websitebezoekers), dan kan je een andere auteur kiezen.
Scrol naar beneden naar het onderdeel ‘Post Content’. Hier ga je instellen welke informatie uit het formulier overeenkomt met je custom post type.
Als titel kies ik ervoor om de voornaam + achternaam van bezoeker weer te geven. Hiervoor kan je gebruikmaken van de variabelen door op het {…} icoontje te klikken. Als content kies ik voor het veld ‘Omschrijving’ uit mijn formulier.
Tot slot koppel ik ook het veld ‘Telefoonnummer’ aan mijn custom field met dezelfde naam.
Publiceer het formulier en voeg het toe aan een pagina zodat gebruikers het formulier ook effectief kunnen raadplegen. Et voila! Na het verzenden van het formulier wordt nu automatisch een nieuw item gemaakt als custom post type.
Belangrijke kanttekening! In dit voorbeeld verzamelen we gevoelige gegevens van gebruikers (namelijk hun naam en telefoonnummer). Voor elke inzending zal er een custom post type worden gemaakt en dus ook een post (zoals https://yeti.media/belverzoek/thibault-seynaeve). Vergeet dus niet om voldoende securitymaatregelen te nemen zodat deze posts niet publieklijk toegankelijk zijn!
Een logische uitbreiding zou zijn om in het WordPress dashboard nu ook custom admin columns te maken zodat je het telefoonnummer kan zien zonder steeds een belverzoek te moeten aanklikken. Hoe je admin columns maakt voor je custom post type leer je hier.
Laat een reactie achter