Maak van Gravity Forms een FAQ pagina feedback formulier

Hoe maak je zelf met Gravity Forms een feedback formulier op jouw FAQ pagina? Hiermee meet je de nuttigheid van de pagina en kun je op basis van de reacties de pagina aanpassen om jouw bezoekers nog beter van dienst te zijn.

Wat doet een Gravity Forms feedback formulier?

Met behulp van een aangepast Gravity Form wordt er onderaan een pagina een optie getoond: “Was deze informatie nuttig?” met een ‘Ja’ en ‘Nee’ optie. Die weergave kun je natuurlijk zelf naar eigen inzicht aanpassen in bijvoorbeeld een duimpje omhoog en omlaag of iets anders.

• Kiest men de optie ‘Ja’ (nuttig), dan is er ook de mogelijkheid om aan te geven waarom, maar dit is niet verplicht.
• Kiest men de optie ‘Nee’ (niet nuttig), dan kun je een aantal vragen stellen en bijvoorbeeld een vrije tekst veld tonen waar men mee kan reageren. De vragen zijn natuurlijk wel verplicht.

Wat heb je nodig om zelf een Gravity Forms feedback formulier te maken?

• Gravity Forms plug-in (developer licentie voor gebruik Polls add-on, optioneel)
• Advanced Custom Fields plug-in (optioneel)
• Google Analytics Event Tracking plug-in (optioneel)

De opzet van een Gravity Forms feedback formulier

1. Maak een nieuw Gravity Forms formulier. Ik neem hierbij aan dat de basis werking van Gravity Forms je wel bekend is.
2. Het belangrijkste is dat je de Polls add-on geactiveerd hebt. De Polls radio buttons gebruik je voor de ‘Ja’ en ‘Nee’ knoppen in het formulier. In principe kan dit ook zonder de polls add-on te gebruiken, maar dan heb je in de Gravity Forms administratie zijde natuurlijk geen duidelijke weergave van de resultaten.
3. Je kan dan eventueel zoals in het voorbeeld nog extra velden (conditioneel) tonen bij ‘Ja’ en ‘Nee’, zodat je om meer info kunt vragen aan de bezoeker om de keuze toe te lichten.
   

   Toon meer opties bij een ‘nee’ keuze

4. Om zo veel mogelijk informatie te krijgen om op te kunnen filteren binnen de Poll add-on (in de administratie) heb ik extra verborgen velden toegevoegd in het formulier: Pagina titel {embed_post:post_title}, Pagina URL {embed_url}, Pagina ID {embed_post:ID} en Bezoeker IP {ip}.
5. De ‘Ja’ en ‘Nee’ knop is gestyled met CSS. Hierbij wordt de radio button vervangen door in dit geval een knop, maar je kan het natuurlijk ook vervangen door een plaatje of een icoontje. Je voegt hiervoor op de Poll radio buttons een class toe .gf-feedback-buttons. Het formulier zelf geef je de class .gf-feedback.
   

   Feedback weergave keuze aan bezoekers zijde

   /* Gravity Forms - feedback form */
   .gf-feedback .gf-feedback-buttons .gfield_radio li label::before {
       border-radius: 4px;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
       content: "";
       cursor: pointer;
       display: inline-block;
       font-size: 12px;
       font-weight: 400;
       line-height: 1rem;
       padding: 0.35rem 0.96rem;
       text-transform: none;
       vertical-align: middle;
       min-height: 26px;
   }
   .gf-feedback .gf-feedback-buttons .gfield_radio li:first-child label::before {
       color: #36c;
       content: "Ja";
       border: 1px solid #36c;
   }
   .gf-feedback .gf-feedback-buttons .gfield_radio li:nth-child(2) label::before {
       color: #36c;
       content: "Nee";
       border: 1px solid #36c;
   }
   .gf-feedback .gf-feedback-buttons input[type="radio"]:hover + label::before, .gf-feedback .gf-feedback-buttons input[type="radio"]:checked + label::before {
       background-color: #36c;
       color: #fff;
   }
   .gf-feedback .gf-feedback-buttons .gfield_radio li label {
       color: #fff;
   }
   .gf-feedback li.gf_list_inline ul.gfield_checkbox li, .gf-feedback li.gf_list_inline ul.gfield_radio li {margin: 0!important;}
   .gf-feedback {
        padding: 0px !important;
   }
   .gf-feedback .gfield_radio li label {font-size: inherit;}
   .gf-feedback-buttons .gfield_radio li:first-child input, .gf-feedback-buttons .gfield_radio li:nth-child(2) input {display: none !important;}
   
   .gf-feedback .gf-feedback-buttons .gfield_radio li label {
       margin: 0 !important;
   }
   .gf-feedback .gfield_label {
       font-weight: 400 !important;
   }
   .gf-feedback-buttons .gfield_label {
       font-size: 14px !important;
   }
   .gf-feedback {
       border-top: 1px solid #ccc;
   }
   .gform_button.button {
       background-color: #36c;
       border: medium none;
       border-radius: 4px;
       color: #fff;
       padding: 8px 10px;
   }
   .gform_button.button:hover { opacity: 0.7;}
   /* END Gravity Forms - feedback form */

   Bovenstaande CSS code neem je over in jouw child-theme style.css of in een custom CSS optie binnen de WordPress website.

6. Nu rest je nog het formulier toe te voegen onder een bericht of pagina. Wil je dit handmatig doen dan kun je gewoon de Gravity Forms shortcode gebruiken in de betreffende pagina of het bericht. En dan ben je klaar om te gaan testen in jouw website.

Optioneel

Voor iets meer gemak voor de gebruiker kun je Advanced Custom Fields plug-in gebruiken. Hiermee voeg je een keuze optie toe aan de beheer omgeving van pagina’s, berichten of een Custom Post Type. Je noemt het veld bijvoorbeeld ‘cf_geholpen’ zoals in het voorbeeld hier onder.

Daarna moet je wel het betreffende template in jouw child theme aanpassen zodat de pagina/bericht weet of hij het formulier wel of niet moet tonen en waar. Je moet de code dus op de juiste plek toevoegen. De code hier onder kijkt naar de status van het custom field, bij een ‘true’ wordt het formulier getoond.

Let op!
Als je meerdere formulieren hebt in Gravity Forms dan kan het zijn dat dit formulier niet het ID ‘1’ heeft. Je moet  het ID (1) in de code op regel 10 dan aanpassen naar jouw formulier ID.

<?php 
	// START form check
	// used in support posts for adding a poll form below the post
	// get metafield value cf_geholpen
	// if true show the form 
	$form_check = get_post_meta( $post->ID, 'cf_geholpen', true );
	
	// Check if the custom field has a value.
	if ( $form_check ) {
		gravity_form( 1, false, false, false, '', false );
	}
	// END form check 
?>

Google Analytics Event Tracking for Gravity Forms toepassen

Door het gebruik van deze plug-in kun je de resultaten van bijvoorbeeld de ja/nee keuze gebruiken in Google Analytics.

Hoe je dit instelt binnen Google Analytics kun je hier lezen en ook vind je daar meer informatie over alle mogelijkheden die deze plug-in biedt om interacties in een Gravity Form te tracken binnen Google Analytics.

Veel succes met het bouwen van jouw Gravity Forms feedback formulier. Heb je vragen of wil je hulp inhuren neem dan contact op.

Je leest in het haha! portfolio meer over het project waarin dit Gravity Feedback formulier is toegepast.

Wil je ook een Gravity Forms licentie aanschaffen? Dat kun je dan hier doen.

Als je onze link volgt naar de Gravity Forms website verdienen wij er ook nog iets aan en het kost jou verder niets extra.