In deze blog post leg ik uit hoe je in plaats van de gewone mail-inzending, je Gravity Forms inzendingen kan opslaan in een Office 365 SharePoint lijst.

Here’s an English translation of this post in PDF: Gravity Forms to SharePoint blog post translation

Omdat het een vrij uitgebreide tutorial is, heb ik hem onderverdeeld in 5 delen; mede omdat je buiten WordPress ook wel wat werk hebt.

  1. Voorbereiding Gravity Forms (formulier maken en webhook add-on)
  2. SharePoint (lijst aanmaken)
  3. Flow aanmaken, instellen en testen
  4. Webhook instellen in Gravity Forms
  5. Flow verder afwerken

1. Voorbereiding Gravity Forms

We beginnen bij Gravity Forms waar we uiteraard een formulier aanmaken met alle velden die naar onze SharePoint-lijst moeten verzonden worden.

Voor deze demo kies ik voor een eenvoudig formulier maar in principe zijn alle velden gewoon ondersteund:

Stap 1 Aanmaken van het formulier
Stap 1: Aanmaken van het formulier

Je kan na het opslaan van het formulier ook al de “Webhooks add-on” installeren en activeren (let wel: deze add-on is enkel beschikbaar voor Gravity Forms Elite licenties.)

Stap2: Webhook add-on installeren en activeren
Stap 2: Webhook add-on installeren en activeren

2. Aanmaken SharePoint-lijst

Vervolgens springen we naar Office 365 om op een SharePoint-site (een nieuwe of bestaande uiteraard) een aangepaste SharePoint-lijst te maken. Tip hier is om op de lijst geen enkel veld als verplicht in te stellen; dat helpt later bij het maken van de Flow.

Hier zie je de test-lijst die ik heb aangemaakt met dezelfde velden als op het formulier:

Stap 3: Aanmaken SharePoint-lijst
Stap 3: Aanmaken SharePoint-lijst

3. De Flow aanmaken <– die doet “de magie”

Meld indien nodig terug aan bij Office 365 en klik door naar Flow. Maak een nieuwe Flow aan en stel als trigger in “When a HTTP request is received”:

Stap 4: Maak de flow aan
Stap 4: Maak de flow aan en kies bij trigger: “When a HTTP request is received”

Als action gaan we vanzelfsprekend kiezen om een item aan te maken in een SharePoint-lijst:

Stap 5: Create Item instellen als actie
Stap 5: Create Item instellen als actie

Kies bij de actie je SharePoint-site uit de keuzelijst en vervolgens de lijst die we eerder aanmaakten. Als je vervolgens op “Save” klikt, gaat de link tevoorschijn komen die we in de WebHook add-on van Gravity Forms moeten ingeven (kopieer de link uiteraard):

Stap 6: Vul de gegevens van de SharePoint-site en lijst in en klik op Save
Stap 6: Vul de gegevens van de SharePoint-site en lijst in en klik op Save

Tip: deel de link die gegenereerd wordt best niet of op deze manier kunnen entries van je formulier “gekaapt” worden door anderen.

4. De webhook instellen in Gravity Forms

Nu we de link hebben gekregen uit Flow, kunnen we deze gaan invoeren in Gravity Forms. Het resultaat is dat Gravity Forms niet enkel de gewone, ingestelde meldingen zal uitvoeren maar ook dat alle gegevens naar Flow gestuurd worden ter verwerking.

Ga dus terug naar de instellingen van je formulier dat je eerder aanmaakte en maak een webhook aan:

Stap 7: Webhook aanmaken
Stap 7: Webhook aanmaken

De instellingen voor de webhook zijn heel eenvoudig. Geef de webhook een duidelijke naam en plak de link uit Flow in het veld van de webhook. Alle overige instellingen mogen op de standaard-instellingen blijven staan (vergeet niet op te slaan):

Stap 8: URL van Flow plakken en instellingen van de webhook
Stap 8: URL van Flow plakken en instellingen van de webhook

5. Flow verder afwerken; JSON-gegevens invoeren en velden SharePoint invullen

We keren terug naar Flow. Nu moeten we een kleine truc uitvoeren om de gegevens van het formulier te laten herkennen in Flow. De velden die van ons formulier komen moeten immers ingevuld worden in de juiste velden van de SharePoint-lijst.

We gaan hiervoor de Flow een testrun laten uitvoeren. Hierbij vullen we ons formulier effectief in en klikken we op de knop om het te versturen. De gegevens worden op die manier naar Flow gestuurd en kunnen we met een handige ingebouwde functie in Flow de gegevens bruikbaar maken.

Stp 9: Test Flow en stuur het formulier in
Stp 9: Test Flow en stuur het formulier in

In Flow verschijnen automagisch de gegevens die van ons Gravity Forms formulier, via de weblink, naar Flow gestuurd warden.

Deze hebben we nodig om de Flow verder in te stellen:

Stap 10: Kopieer de gegevens
Stap 10: Kopieer de gegevens

Deze gegevens gebruiken we nu om aan Flow te vertellen hoe de gegevens van ons formulier zijn opgebouwd. Ga terug naar het bewerk-venster van de Flow. Bij de trigger “When a HTTP request is received” kan je klikken op “Use sample payload to generate schema”. In de pop-up plak je de eerder gekopieerde gegevens uit stap 10:

Stap 11: JSON-payload plakken in de pop-up
Stap 11: JSON-payload plakken in de pop-up

We gaan verder met het bepalen welk veld van ons formulier, in welk veld van onze SharePoint-lijst moet gaan. De velden zijn herkenbaar aan hun ID dat ze ook in Gravity Forms hebben gekregen tijdens het ontwerpen van ons formulier (bv. 1.3 en 1.6 voor respectievelijk voornaam en naam, 2 voor onderwerp en 3 voor bericht). Via de optie “dynamic content” kan je in de actie “Create item” de formuliervelden in de bijhorende SharePoint-kolom plaatsen:

Stap 12: De velden uit het formulier in de juiste velden van de SharePoint-lijst plaatsen
Stap 12: De velden uit het formulier in de juiste velden van de SharePoint-lijst plaatsen

In principe is na het opslaan onze setup compleet nu. Vul nu het formulier in en kijk in de SharePoint-lijst of de gegevens allemaal netjes op hun plaats gezet worden:

Stap 13: Resultaat in SharePoint
Stap 13: Resultaat in SharePoint

Zo, dat is het einde van een uit de kluiten gewassen blog post. Inmiddels zou je dus moeten kunnen instellen om Gravity Forms naar Office 365 te verzenden.

Heb je hier toch nog vragen over of lukt er ergens iets niet? Neem gerust contact met me op!