Förra sommaren gick jag genom ett antal olika tjänster för att göra formulär på webben för att samla in information. Tanken var att skriva om tjänsterna här på bloggen, men några andra projekt kom emellan. Det finns en mängd tjänster där du drar/släpper fält, texter, bilder mm och gör ett webbformulär, t.ex. form.io, forms.app, jotform.com, typeform.com, heyflow.app, cognitoforms.com för att nämna några få. Sök efter "web form builder" så hittar du dem alla!
Flera av tjänsterna har funktioner för flera sidor, flöden, inloggning, betalningar, filuppladdningar, varukorgar och allt annat du kan tänka dig. Sedan tidigare har vi använt Google Forms för formulär som sparas i FileMaker. Även Claris har i år annonserat att de kommer med en egen variant i form av Claris Studio.
Oavsett vilken av tjänsterna du tittar på går det snabbt att komma igång och snabbt att göra ett enkelt formulär. Jag använde tjänsten forms.app (men kunde lika gärna valt någon av de andra tjänsterna) för att göra ett enkelt formulär där de inmatade svaren sparas i en FileMaker-databas (vad annars?). Allt utan att skriva mer än några få rader programkod/script.
En finess med tjänsterna är att du inte behöver någon egen webbserver eller ett webbhotell, formulären finns i respektive tjänst. Du behöver inte heller kunna HTML eller någon annan kod, och formulären "bara fungerar".
Formuläret i det här exemplet ser ut så här:
I exemplet vill jag att personer ska kunna anmäla sig på webben. Det finns fält för namn, epost, erfarenhet av FileMaker och en kommentar. Jag skapade ett konto på forms.app och valde gratis-varianten som tillåter att 150 formulär sparas varje månad. Det finns flera färdiga mallar att utgå från, men jag startade med ett tomt formulär och skapade fält i webbformuläret för "Full Name", "Email", "Single Selection" och "Long Text" (för kommentaren). Det går att flytta runt fälten och såklart lägga till flera.
Rubriker och ledtexter för fälten ändras direkt på webbsidan och platshållare kan anges för varje fält. Glöm inte att spara då och då!
Varje formulär får en unik länk som du delar med de som du vill ska fylla i formuläret, t.ex. publicerar på din hemsida. Länken har formen "my.forms.app/form/62e1238c971e3xxxxx". Formuläret anpassar sig till skärmstorleken, är responsivt och fungerar bra att fylla i även på mobiler med mindre skärmar.
Det finns inställningar för färger, bakgrundsbild m.m. Jag ändrade bara de rundade hörnen som är förvalt till helt fyrkantiga fält och tog bort numret för varje fält.
Alla svaren från formulären sparas i forms.app men jag vill ju förstås att de ska hamna rakt in i min FileMaker-databas som finns på en FileMaker Server. I tjänsten forms.app finns möjligheter att koppla ihop med en mängd andra tjänster som Google Sheet och Excel men även s.k. Webhooks. En webhook är en webbsida (url) som tar emot svaren från formuläret. Webbsidan kan sedan spara formuläret i FileMaker.
Det går att göra samma typ av funktion i t.ex. Javascript som jag använde för Google Forms för att spara svaren i en FileMaker-databas med Data API, men denna gång ville jag göra det ännu enklare och använder istället en av de till synes oändligt många tjänster för att styra flöden som finns. Jag har förmånen att ha tillgång till servrar med Node-RED både på kontoret och hemma så det var ett lätt val. Jag gjorde ett enkelt flöde i Node-RED som startas med ett anrop till en webhook.
I inställningen för Webhook i forms.app anger jag vilken url som min Node-RED-server har. Varje gång någon fyller i formuläret anropas mitt flöde i Node-RED.
Mitt flöde består av 4 boxar som kallas noder, även dessa dras/släpps i Node-RED, och sätts ihop med streck.
Förutom noden som tar emot en webhook från forms.app (Post från forms.app) finns en nod som ger "ok" (200) som resultat tillbaka till forms.app och en nod som omvandlar data från formuläret till en JSON-kod som FileMakers Data API förstår och innehåller mina fältnamn. Här behöver jag skriva några rader Javascript-kod.
Den sista noden, Create Record, skapar en post i min FileMaker-databas och ingår i paketet node-red-contrib-filemaker som jag installerat i min Node-RED-server.
När någon fyller i formuläret på webben skickas informationen till min webhook och mitt Node-RED-flöde startar. Informationen stuvas om och sätts sedan in i en ny post i min FileMaker-databas. Hela processen tar någon sekund.
Tjänster: