Webflow en Integromat

Geschreven door Elvira Clement

Wat is Integromat?

Met Integromat kan je gemakkelijk processen automatiseren. Via Integromat kan je koppelingen maken met verschillende programma’s, zoals bijvoorbeeld Trello, maar ook met Webflow. Tijdens mijn zoektocht naar automatiseren van processen in Webflow kwam ik eerst Zapier tegen. Echter heeft Zapier een hoop beperkingen en zijn de abbonnements kosten redelijk hoog. Vandaar dat ik Integromat heb uitgeprobeerd. Ik wil jullie graag wat features van Integromat laten zien die met Webflow gecombineerd kunnen worden.

Content van een Webflow formulier in Google Spreadsheets krijgen

Met Integromat kan je content van een Webflow formulier snel in een Google Spreadsheet laten vullen. 
Allereerst moet je natuurlijk een Integromat account aan maken. Als je deze hebt aangemaakt en hebt ingelogd kom je op een dashboard pagina terecht. Hierop kan je zien hoeveel operations je al hebt uitgevoerd en of je aan het gratis limiet zit.

Rechtsbovenaan de pagina staat de knop Create a new Scenario. Wanneer je hier op hebt geklikt wordt je doorverwezen naar een pagina waar je kan zoeken naar verschillende diensten die gekoppeld zijn met Integromat. Typ “Webflow” en klik Webflow aan. Wanneer er een vinkje staat bij Webflow, klik dan op Continue.

Stap 1: Een scenario aanmaken

Je komt nu op de scenario pagina. Hier kan je verschillende workflows maken. Om te beginnen met Webflow moet je op het vraagteken klikken. Als het goed is zie je dan een popup verschijnen waar Webflow al in staat, als dit niet het geval is kan je naar Webflow zoeken via de Search optie onderaan in de popup.

Klik op Webflow. Je ziet nu alle opties die Integromat levert in combinatie met Webflow. Zo kan je bijvoorbeeld je website publishen, collection items op halen, een nieuwe collection item aanmaken, collection items updaten. Integromat heeft ook opties voor e-commerce, zoals het updaten van Item inventory of het ophalen van een bestelling.

Klik op Watch Events. Dit is een trigger die kijkt wanneer er via de website een formulier wordt verstuurt, een site wordt gepublished of bijvoorbeeld een order binnen komt via e-commerce.

Stap 2: Connectie maken met Webflow

Er wordt je gevraagd om een webhook aan te maken. Dit klinkt misschien technisch, maar eigenlijk gaat dit heel erg gemakkelijk: druk op de knop Add. Druk op de knop Add bij het veld Connection, vervolgens op Continue.

Wanneer je ingelogd bent op Webflow wordt er gevraagd om Integromat toegang te geven tot een project. Selecteer het project waar het Webflow formulier zich in bevindt en klik op “Authorize application”. Selecteer bij Site ID jouw project en bij Trigger Type “Form submission” en druk op de knop Save en daarna op OK. 

Integromat maakt de webhook automatisch aan.

Stap 3: Webflow module testen

Je kan nu de module testen. Dit doe je door op Run once (links onder in het scherm) te klikken. Integromat gaat dan kijken naar wanneer een formulier wordt verstuurd op de website. Vul op de website een formulier in. Kijk bij Webflow Project Settings of het formulier correct is aangekomen.

Ga vervolgens terug naar Integromat om te kijken of hij de form submission heeft gevonden. Wanneer het succesvol is gelukt, zou er het nummer 1 boven moeten staan. Je kan vervolgens op het vergrootglasje klikken om de data van het formulier in te zien.

Stap 4: Google spreadsheet aanmaken

Maak in Google Drive/Google Sheets een spreadsheet aan. Geef deze de kolomnamen van de velden van het formulier.

Stap 5: Google spreadsheet koppelen met Integromat

Ga terug naar Integromat en hover met je muis over de blauwe Webflow bol aan de rechterkant. Er verschijnt een plusje. Met dit plusje kan je een nieuwe module toevoegen. Wat we nu willen doen is Webflow koppelen aan Spreadsheets.

Klik op het plusje en zoek naar Google Sheets via de zoekfunctie onderaan in de popup en klik hier op.
Opnieuw opent er een popup met alle functionaliteiten die mogelijk zijn met Integromat en Google Spreadsheets.

Wij willen de data van een Webflow formulier in een Spreadsheet krijgen. Dit betekent dat er een rij moet worden toegevoegd aan de spreadsheet: klik dus op “Add a Row”.

Connectie met Google maken

Nu wordt je gevraagd om een connectie te maken met Google Sheets. Klik net zoals bij de vorige module op de Add knop, geef de connectie een duidelijke naam en klik op continue. Er opent nu een popup waarbij je kunt inloggen met Google. Door in te loggen met Google geef je Integromat toestemming tot je Google Drive bestanden, om deze te bewerken, aan te maken en te verwijderen.

Spreadsheet vullen met gegevens uit het Webflow formulier

Wanneer je Integromat toestemming hebt gegeven, druk je op Mode: “Select spreadsheet and sheet”. In deze modus kan je bij de optie “spreadsheet” gemakkelijk het spreadsheet wat je net hebt aangemaakt selecteren. Selecteer de spreadsheet die je net hebt aangemaakt en druk op OK. Kies bij Sheet het desbetreffende blad van jouw spreadsheet.

Vervolgens zoekt Integromat automatisch de headers van de spreadsheet. Doordat je net met Webflow een test run hebt gedaan door een formulier in te vullen is deze data beschikbaar om in de velden in te vullen. 

Koppel de velden van de spreadsheet met de data van het Webformulier.

Stap 6: Testen van je Integromat oplossing

Wanneer je alle velden hebt gekoppeld van het formulier met Google sheets kan je de werking van deze functionaliteit gaan testen. Druk opnieuw op Run Once. Wanneer je nu een formulier invult op de website, zou deze informatie moeten zijn toegevoegd aan je spreadsheet formulier.

Als dit werkt, kan je de scenario op “on” zetten, zodat Integromat automatisch voor jou aan het werk gaat. Dit doe je door de switch Scheduling op On te zetten.

Wanneer dan op de website een formulier wordt verstuurd, gaat Integromat gelijk voor je aan de slag.