Wij zijn fan van Gravity Forms. Als je met ons samenwerkt heb je dit ongetwijfeld van ons gehoord. En als je ons volgt in de diverse WordPress Facebookgroepen zul je ook hier regelmatig het advies om Gravity Forms te gebruiken voor bij zien komen.
Laten we eerlijk zijn, in principe is de basis van Gravity Forms niets meer of minder dan een simpele plugin om contactformulieren in je WordPress website te plaatsen. Maar gelukkig is er meer. Er is veel meer mogelijk met Gravity Forms. Eerder schreven wij over de basis, deze blog over Gravity Forms vind je hier. In deze blog gaan we dieper in op de mogelijkheden die deze WordPress plugin biedt en delen we een aantal tips om de plugin nog beter te laten werken. Dit zijn relatief eenvoudige tips tot wat meer ingewikkelde opties, doe er je voordeel mee.
- Een Gravity Form zonder titel plaatsen
- Gravity Forms koppelen aan ActiveCampaign / Mailchimp
- Bedankpagina aan Gravity Form koppelen
- Melding na verzenden Gravity Form
- PDF versturen van ingevuld Gravity formulier
- Foutmelding stylen Gravity Forms
- Labels verbergen van Gravity Forms
- Conclusie
1. Een Gravity Form zonder titel plaatsen
Mocht je niet bekend zijn met Gravity Forms dan is het handig om te weten dat je een formulier invoegt met een shortcode in een pagina. Je kunt in deze shortcode al direct een aantal opties meegeven waarmee je de weergave van het formulier kunt beïnvloeden.
Wij maken vaak gebruik van de optie om de titel en de omschrijving weg te laten. Dit doen we vooral als we het formulier gebruiken als inschrijfformulier of in een sidebar als contactoptie bijvoorbeeld.
Je voegt deze shortcode in en past uiteraard alleen de ID van het juiste formulier aan als je er meerdere in gebruik hebt en dan in plaats van testgravityform gewoon gravityform:
[testgravityform id=”JOUWID” title=”false” description=”false”]
De title en description hoef je normaal niet mee te geven als je deze standaard getoond wilt hebben. Als je ze niet wilt voer dan bovenstaande shortcode in et voilá.
2. Gravity Forms koppelen aan ActiveCampaign / Mailchimp
Maak jij gebruik van een nieuwsbrievensysteem als ActiveCampaign of Mailchimp? Wij maken net als veel van onze klanten zelf gebruik van ActiveCampaign. Daarnaast werken wij ook regelmatig met Mailchimp.
Beide systemen hebben eigen inschrijfformulieren die je relatief eenvoudig via knippen/plakken in een pagina in kunt voegen. Op zich heel leuk en aardig, maar als je de styling wilt aanpassen aan de stijl van je website dan loop je vaak tegen het probleem aan dat dit niet mogelijk is.
Om die reden werken wij standaard met Gravity Forms in iedere website en webshop die wij bouwen. Want de styling vinden wij natuurlijk net zo belangrijk als de functionaliteit.
Daarnaast is het eenvoudig om een inschrijfformulier voor jouw nieuwsbrief of download op diverse pagina’s terug te laten komen met dezelfde styling. Je hoeft alleen de shortcode nogmaals te plaatsen en de styling is overal hetzelfde.
Als laatste heb je de mogelijkheid om met verschillende formulieren verschillende lijsten aan te sturen. Dit kan op basis van bepaalde ingevulde of aangevinkte velden, maar ook op basis van tags die je meegeeft bij het insturen van het formulier.
Hoe koppel je een Gravity Formulier dan aan ActiveCampaign? Hiervoor geldt hetzelfde als voor Mailchimp. Je hebt een add-on nodig die je gratis kunt installeren als je de basisversie van Gravity Forms gebruikt (zie hier het volledige prijsoverzicht van Gravityforms.com)
Ga hiervoor naar Formulieren en klik vervolgens op Add-ons. Je ziet dan alle add-ons die er binnen jouw account beschikbaar zijn. Je klikt bij ActiveCampaign op install en de plugin wordt geïnstalleerd.
Vervolgens vind je onder de algemene instellingen van Gravity Forms de optie om je API URL en API Key in te vullen. Deze voer je eenmalig in, je vindt ze in de backend van ActiveCampaign.
Hierna krijg je onder de instellingen van een formulier een extra optie voor ActiveCampaign. Per formulier maak je een feed. Dit is een simpel stappenplan dat je kunt volgen waarin je de naam ingeeft, de naam van de lijst die je wilt selecteren en welke velden je wilt koppelen.
Voor Mailchimp en andere nieuwsbriefsystemen geldt ongeveer hetzelfde. Nog 1 tip: pas de standaard ‘versturen’ tekst op de button aan. Zet erop wat er gaat gebeuren als ik op de knop druk als bezoeker.
3. Bedankpagina aan Gravity Form koppelen
De standaard optie in Gravity Forms is ‘Bedankt voor je bericht! We zullen binnenkort contact met je opnemen’. Ten eerste niet heel klantvriendelijk en ten tweede ook lastig door te meten als je bijvoorbeeld via Google Analytics doelen wilt instellen.
Maar hoe pas je dit dan aan? Wat zijn de opties? Het beste is een losse bedankpagina te maken voor ieder formulier. Je kunt bezoekers dan speciaal bedanken voor hetgeen ze zojuist gedaan hebben. Bijvoorbeeld je ebook gedownload, je contactformulier ingevuld of een offerte aangevraagd.
De bedankpagina is je ideale kans om direct meer informatie te geven, een inschatting te geven van de reactietijd en bijvoorbeeld aan te geven wat mensen nodig hebben. Een verlengstuk van de aanvraag dus. En een belangrijk onderdeel omdat je hiermee de indruk van je website professionaliseert. Een bezoeker die bij jou en je concurrent een aanvraag doet en bij jou op deze manier bedankt wordt voor de offerteaanvraag zal eerder geneigd zijn om voor jouw bedrijf te kiezen. Onderschat dit niet.
Maar hoe pas je dit toe? Zorg dat je in ieder geval een bedankpagina hebt die bij het formulier past. Vervolgens ga je onder het formulier naar bevestigingen. Je zult zien dat deze standaard op tekst staat. Als je deze op ‘pagina’ zet heb je de mogelijkheid om de door jou aangemaakte bedankpagina te selecteren. En dit herhaal je voor ieder formulier wat je in gebruik hebt.
4. Melding na verzenden Gravity Form
Standaard zal Gravity Forms een basis-e-mail verzenden naar de administrator e-mail van een website. Heel soms is dit geen probleem, maar ik adviseer je om dit gewoon aan te passen. Als je naar ‘meldingen’ gaat onder een formulier dan vind je daar de beheerdersmelding. Deze kun je aanpassen. Pas hier in ieder geval de volgende velden aan:
- de naam waaruit het formulier verstuurd wordt
- het e-mailadres waar het formulier heen gestuurd wordt
Heb je veel formulieren dan is het aan te raden om dit ook al in de titel van de e-mail terug te laten komen, dit vergroot het overzicht voor jou als beheerder.
Naast de beheerder is het ook netjes om te zorgen dat degene die het formulier invult ook een bevestiging in de mailbox krijgt. Dit hoeft uiteraard niet bij een nieuwsbriefinschrijving, aangezien de bevestiging van inschrijving in principe vanuit het nieuwsbriefsysteem zal komen.
Je maakt een extra bevestiging, vult de velden in die nodig zijn en in plaats van E-mailadres invullen kies je voor Veld selecteren en kies je het e-mailadres veld. Een bezoeker die jouw formulier invult krijgt nu een afschrift in zijn of haar mailbox na verzending.
5. PDF versturen van ingevuld Gravity formulier
Standaard zal Gravity Forms een lijst sturen van ingevulde waardes als je bij optie 3 zoals hierboven aangegeven een beheerdersmelding ingevuld hebt die je naar de klant laat sturen. Maar uiteraard zijn er klanten die vanuit het formulier een PDF ingevuld zien worden die naar de aanvrager verstuurd wordt. En ook dat kan natuurlijk met Gravity Forms.
Er is een gratis addon beschikbaar vanaf GravityPDF.com waarmee je een eenvoudige PDF bij kunt voegen bij een e-mailmelding die verstuurd wordt vanaf de website.
Onze ervaring is dat je deze prima in kunt zetten als bevestiging van een bestelling of iets anders via Gravity Forms. Maar de gratis variant biedt weinig variatie in de layout. Vanaf de genoemde website zijn verschillende templates en add-ons te koop die je kunt koppelen aan je PDF.
6. Foutmelding stylen Gravity Forms
Heb je Gravity Forms in gebruik en de standaard foutmelding wel eens bekeken? Ik hoop het van niet. Hier word je namelijk echt niet bijzonder vrolijk van. Eigenlijk is deze gewoon simpelweg lelijk, het is in ieder geval geen sieraad voor jouw prachtige website.
Wat kun je hier aan doen? Je hoeft helemaal niks meer te doen. Dat hebben wij namelijk al voor jou gedaan. Plak de onderstaande CSS in de customizer van je thema en klaar.
/* custom css Gravity Forms */
.validation_error {
display : none;
}
.gform_wrapper .gform_body li.gfield.gfield_error,
.gform_wrapper .gform_body li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background : none;
border : none;
margin : 0;
padding : 0;
}
.gform_wrapper .gform_body .gfield_error .gfield_label {
color: #000;
}
.gform_wrapper #gform_1 .gform_body li.gfield.gfield_error input,
.gform_wrapper #gform_1 .gform_body li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning input,
.gform_wrapper .top_label .gfield_error textarea.textarea {
background: #ffecec !important;
border: 1px solid #d70000 !important;
color: #662424 !important;
}
.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper li.gfield_error textarea {
background: #ffecec !important;
border: 1px solid #d70000 !important;
color: #662424 !important;
}
Je kunt de code zelf testen door uiteraard eerst alle cache te legen (cache stel je zo optimaal in) en daarna het formulier direct te verzenden zonder iets in te vullen.
7. Labels verbergen van Gravity Forms
Standaard is het niet mogelijk om de tekstlabels boven de velden van Gravity Forms uit te zetten of te verbergen. Afhankelijk van de stijl van de website willen wij regelmatig gebruik maken van placeholders in plaats van de labels boven de velden. Maar hoe zet je ze dan uit? Je kunt ze natuurlijk verbergen met CSS, maar dat is best een klus aangezien de ID’s bij ieder formulier anders zijn. Dat moet gemakkelijker kunnen.
En jawel, je kunt een klein stukje code toevoegen aan de functions.php van je thema of een plugin als Post Snippets for WordPress gebruiken om deze code overal te activeren.
De onderstaande code voegt een extra optie toe aan de achterkant van je formulier.
/* hidden label gravity Forms */
add_filter( ‘gform_enable_field_label_visibility_settings’, ‘__return_true’ );
Vervolgens ga je in het formulier een willekeurig veld bewerken en heb je onder het tabblad uiterlijk een optie zichtbaarheid label veld die een optie ‘verborgen’ heeft.
Kies voor deze optie en je kunt gebruik maken van placeholders in plaats van labels. Dit is een detail maar wel een belangrijke vind ik. Kijk vooral wat bij jouw website en huisstijl past.
De code kun je natuurlijk sowieso opslaan, wie weet heb je deze binnenkort nodig en dan weet je niet meer waar je die ook alweer gezien had. Dat heb ik tenminste altijd 😉
Hieronder zie je een voorbeeld van een formulier met alleen gebruik van de placeholders.
8. Conclusie
We kunnen nog wel zeker 7 tips geven. Wij zijn heel enthousiast over Gravity Forms zoals je waarschijnlijk uit onze blog wel kunt halen.
Bovenstaande tips zijn eigenlijk basistips die je op iedere website kunt toepassen.
Meer tips gaan we later delen in meerdere blogs. Dit zullen meer specifieke tips zijn over de keuze tussen een WooCommerce webshop of een Gravity Form. En meer geavanceerde koppelingen met boekhoudsystemen en externe systemen.
Ben je al overtuigd? Bestel dan direct jouw eigen licentie van Gravity Forms.
Heb jij ervaring met Gravity Forms of twijfel je om het te gaan gebruiken? Waar loop jij tegenaan? Ik ben benieuwd naar jouw ervaringen. Deel je ze in een reactie?
