Hoe kun je de plugin Gravity Forms gebruiken samen met het Divi thema

Custom code, Divi thema, Formulieren, Plugins, Webdesign tips

Ik werk veel met het de plugin Gravity Forms omdat je hiermee je geavanceerde formulieren beter kunt opbouwen en instellen dan standaard met het Divi formulier element. Het is een betaalde plugin die per jaar wel minimaal $59 kost. Zelf heb ik de elite versie van $259 omdat je daarmee voor een onbeperkt aantal site het systeem mag gebruiken. Of het nu gaat om een eenvoudig contactformulier of dat het gaat om een offerteformulier waarin automatisch een gepersonaliseerde mail wordt verzonden naar de klant. Of dat het gaat om een eenvoudig webshop met een iDeal koppeling via Mollie? Het kan allemaal met Gravity Forms. Het is echt een toegevoegde waarde als je het gaat gebruiken in je website, zeker als webdesigner geef ik je de tip om het eens te proberen. Maar de integratie met Divi is niet zo simpel. Wat je hoopt is dat je gewoon een formulier dat je hebt gemaakt kunt aanklikken in de pagebuilder. Maar zo werkt het helaas niet. Dat is wat je best vaak ziet.. er zijn prachtige plugins, prachtige thema’s en WordPress is top, maar integraties gaan soms moeizaam. Het is daarom belangrijk dat je dat eerst uitzoekt of een systeem wel werkt met een ander systeem voordat je het in je offerte zet. Ik heb helaas ook mijn lesje moeten leren, ik hoop dan ook dat je met artikel leert dat de combinatie van Gravity Forms, WordPress en Divi mogelijk is.

In dit artikel ga ik je in vier stappen uitleggen hoe je een formulier dat je hebt gemaakt in Gravity Forms kunt toepassen in je website en ik ga je ook laten zien hoe je voor verschillende weergave (dus desktop, tablet en mobiel) verschillende formulieren kunt laden veel plezier met het lezen van dit artikel. En maak er iets moois van!

Stap 1: Je gaat eerst een formulier maken in Gravity Forms, ik neem aan dat je al weet hoe dit gaat.

  • Ga naar je backend
  • Klik op formulieren
  • Creeren een nieuw fromulier
  • Sleep een paar velden in het formulier vanuit de items rechtsboven in beeld.
  • Sla het formulier op en ga naar het menu formulieren.

Stap 2: Nu komt het, je moet gaan kijken wat het ID is van jouw formulier. Ga dus naar de pagina formulieren en let op deze indicator. Nu dat je weet wat het ID is, gaan we dit ID gebruiken in een shortcode die we op de pagina gaan zetten.

Stap 3: Ik ga er vanuit dat ik voor het formulier met ID 1 het formulier wil weergeven. Ga naar de voorkant van je site open de pagina die je wilt aanpassen en ga naar de gewenste locatie waar je hebt formulier wil plaatsen. Klik op toevoegen tekst vak en voer de volgende code in.

[gravityform id="1"]

Stap 4: Klik nu op opslaan, verlaat de visuele builder en bekijk het resultaat.

Meer tips over hoe je Gravity Forms kunt gebruiken in Divi.

Nu ga ik je uitleggen hoe je ook een formulier kunt laten weergeven voor de mobiele telefoon alleen.

  • Eerst maak je het formulier zoals beschreven in de eerste stap. Voor mobiele weergave zou ik zorgen dat je probeert om zo min mogelijk velden in het formulier te zetten. Bekijk vervolgens welke ID dit formulier heeft. 
  • Ga naar de voorkant van de website naar de gewenste pagina en maak een tekst blok die alleen zichtbaar is voor mobiel dat doe je op de volgende manier.
  • Ga naar geavanceerd en klik op de weergave en vink de opties tablet en desktop aan. Met deze instelling wordt het tekstvak alleen weergegeven voor de mobiele telefoon.
  • Nu plak je de short code met het ID van het mobiele formulier in het tekstvak. En vervolgens klik je op opslaan en je verlaat de visuele builder. Maak een scherm nu klein of laat de website op je mobiele telefoon en zie het resultaat.

Let op dat je dan wel zorgt dat je het ander formulier dus die op dekstop en tablet moet worden weergegeven dus uitzet voor mobiel.

Op die manier kun je perfect je formulieren targeten voor de verschillende resoluties en kun je het de bezoeker van je steeds meer naar zijn zin maken.

Nu geef ik je nog wat tips om wat meer te variëren met de formulieren. Je kunt bijvoorbeeld instellen dat de titel van het formulier wordt weergegeven maar je kunt ook bijvoorbeeld instellen dat een bepaalde tab van je formulier wordt weergegeven als eerste. En ik geef je ook een tip over hoe je nu kolommen kunt maken in je formulier voor mobiel zul je dat niet zo snel nodig hebben maar voor de desktop kan dat wel fijn zijn dat je een tweetal velden naast elkaar kunt zetten.

Helaas is Gravity Forms op dit moment nog niet zo goed ontwikkeld dat je de kolomindeling makkelijk kunt bepalen dus je moet met custom code gaan werken. Dat is wel een groot nadeel van de plugin, ik hoop dat ze in de volgende versie van het systeem dit hebben opgelost. Temeer ook omdat het systeem per jaar een bedrag kost en van zo’n systeem verwacht je dan toch wel meer.

Met deze code wordt de titel en de omschrijving van het formulier niet weergegeven.

[gravityform id="1" title="false" description="false"]

Met deze code wordt de titel en de omschrijving van het formulier wel weergegeven.

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

De linker kolom halve breedte: gf_left_half

De rechter kolom halve breedte: gf_right_half

Als je radiobuttons of checkboxes mooi in kolommen wilt verdelen kun je daar nu ook Aangepaste CSS-klasse voor gebruiken. Bijvoorbeeld op deze manier: Je hebt een vraag met vijf mogelijke antwoorden. Om niet een te lange rij met antwoorden te hebben kun je ze prima over drie kolommen verdelen.

Met de code gf_list_3col_vertical kun je deze indeling maken. Wil je ze liever over twee kolommen verdelen dan is de aangepaste CSS klasse gf_list_2col_vertical

Dezelfde code kun je dus ook toepassen voor Checkboxes.

Met deze code kun je twee kolommen maken in je formulier (meer info op https://www.gravityforms.com/css-ready-classes/)

By the way the short codes die ik heb beschreven hierboven werken ook in de standaard thema’s van WordPress. Ik schrijf dit artikel met name voor Divi maar er zijn genoeg elementen die ook prima werken voor andere thema’s van WordPress.

En dan nog dit: Gravity Forms is net als Divi een fantastisch systeem, er zijn allerlei verschillende add-ons te krijgen voor Gravity Forms. Je kunt bijvoorbeeld hele gave reports maken met Userinsights, let daarbij wel op dat het support vaak maar voor 1 jaar is en dat je na een jaar weer een nieuwe licentie moet kopen. Je moet dan dus goed over wegen of $99 per jaar het wel waard is. Hetzelfde geld voor de Divi Marketplace, daar staan prachtige plugins die perfect met Divi werken, maar let altijd wel even goed op de terugkeerde kosten.

Update van dit artikel (Nov 2023)

Er is sinds kort een nieuw systeem voor gravityforms icm Divi. Je kunt een add on kopen op de Divi Marketplace om Gravity Forms formulieren in te laden in jouw website. Je kun hiermee jouw formulier perfect finetunen met de binnen de Divi Visual builder. Dus je hoeft niet meer met shortcodes te werken. Je kunt de extention vinden op de Divi Marketplace. Op het moment van schrijven kostte deze 69 Dollar voor met 1 jaar support.

Soms kun je ook uit de voeten met Divi formulieren, bekijk de voor en nadelen in dit artikel.

Dit artikel is geschreven op basis van:

Gravity Forms versie: 2.4.21
WordPress: v 5.5.3
Divi: v 4.6.6

Enthousiast geworden over Gravity Forms?

Als je via onderstaande link de plugin koopt, krijg ik een kleine vergoeding van Gravity Forms. Dit kost jou niets extra, maar je helpt mij om meer tips te schrijven.

Andere tips die misschien ook interessant zijn

Enthousiast geworden over Divi

Als je via onderstaande link het thema koopt, krijg ik een kleine vergoeding van Divi. Dit kost jou niets extra, maar je helpt mij om meer tips en inzichten over Divi te blijven delen. 

Divi WordPress Theme

Heb je geen tijd om er zelf mee aan de slag te gaan?

Mogelijk kan ik je helpen!
Stuur een berichtje naar opdekoffie@bijpieter.nl