Ik werk veel met het de plugin Gravity Forms omdat je hiermee je formulieren beter kunt opbouwen en instellen. Het is een betaalde plugin die per jaar wel minimaal $59 kost. Zelf heb ik de premium 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 leerst 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"]

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

De linker kolom halve breedte: gf_left_half

De rechter kolom halve breedte: gf_right_half

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.

Dit artikel is geschreven op basis van:

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