There are generally three ways to get web-based form data into FileMaker.
- You can set up Instant Web Publishing using FileMaker Server Advanced, exposing a FileMaker layout directly to the web.
- You can write a custom HTML form and submit the data using FileMaker’s PHP API.
- You can use a third-party interface that works with FileMaker’s PHP API.
Using IWP seems like it requires little or no effort. However, aside from the additional expense of Server Advanced, certain programming constraints still exist. Accounting for multiple layouts or conditional fields that appear based on answers can complicate your solution quickly. A custom form requires a basic knowledge of HTML and associated web technologies (CSS, Javascript, PHP, etc.), but again runs into issues if you want AJAX-like feedback and actions.
Using a third-party option like Formstack gives you the flexibility of custom HTML technologies and offloads much of the design work. Still, design is only half the picture, as you need to integrate something like Formstack into FileMaker.
Getting Started With Formstack
The starting page for any developers is Formstack’s Developer Central page. You will need a Formstack account, and there is an associated cost with this method though you can try it for free first. For our purposes we’re going to use the Webhooks method instead of the REST API. The webhooks method sends data in a key/value format to an external URL upon the form submit action. That external URL is your PHP page, where you create the code to parse the submitted data and push it into FileMaker.
Your FileMaker file is where data will end up after the form is submitted. This will need to be hosted, and set up for fmphp access. The web interface layout(s) need only the fields that will receive data from the form. This gives you a couple of options: you can use the data separation model to them hook into this database and display your data or process it for any analytics; or, you can use the same database and build your analytics process as part the solution.
Setting Up the Webhook
Once you have built your form, you open the Settings and decide where to point the form for each submission. Note the two actions in the “After the Form is Submitted” section. This is where you point to your page that processes the data, and redirect the user after the data is processed.
To process the form data, we need FileMaker’s PHP API files, Formstack’s own class (Formstack.php) and an API key from Formstack. The Formstack items are found in Formstack’s Dashboard, in the Forms tab, in the Social Media section.
You need to write at least one file, with an optional second file. The first will process the data behind the scenes. In these instances, I have simply called it “webhook.php”. I created a second page, where the form will redirect after being processed. This is a simple “Thank you” page. You can customize the Thank You to display any text you like, and include a link back to the survey.
The Webhook Code
The webhook.php files contain PHP code to handle the data.
/* FORMSTACK SECTION */ require_once('Formstack.php'); define('API_KEY' , 'YOUR_FORMSTACK_API_KEY_GOES_HERE' ); // variable to skip extract function $skipExtract = $_GET['skipExtract']; $formstack = new Formstack(API_KEY); //instantiate the class $form = $formstack->form($_POST['FormID']); //internal form ID $form_name = $form['name']; // capture name $data = array('form_name' -> $form_name ); foreach( $form['fields'] as $field ) { $id = $field['id']; $name = $field['name']; $value = $_POST["$id"]; if($skipExtract) { $extract = $value; } else { $extract = fs_extract($value); } // check for sub values if($value == $extract) { $data["$id"] = "$value"; } else { foreach( $extract as $subkey => $subvalue) { $data["$subkey"] = "$subvalue"; } } } /* FILEMAKER SECTION */ require_once('FileMaker.php'); $fm = new FileMaker('MySurveys','hostaddress','user','pwd'); $action = $fm->newAddCommand('web_layout'); // now set the fields $action->setField('FirstField', $data['fieldid']); // see below for the number // etc for additional fields $result = $action->execute();
Note that in this case for the setField action you need to know the field ID issued from Formstack. To find the Field ID, you need to go to Publish >> Advanced, copy the contents of the “Form HTML” field into a text editing program, and find the field(s) being submitted. There you will see something like id=”field1234567″ name=”field12345567″ associated with each field. You need only the number. Return to your webhook.php page and fill in the fielded associated with each field you want to map for the FileMaker database. With Formstack you also can set up notifications, view stats, and more.
Job Application Form
For an example of how the front end works in action, check out our job application form. This form is created in Formstack, displayed on the web and then imports into a FileMaker database to parse the data and keep future notes.
While there might be slightly more effort in setting this up than building your own form, Formstack allows for an easy customization of forms and does most of that work for you. The required code to hook your forms into FileMaker is fairly minimal, yet the rewards save time and effort in the long run.
I’m really glad I decided to check your blogs. I can really use that technique for a project I’m working! Excellent post!
Thanks, Scott. Hope this helps. Once set up the process is completely automated.
Regards,
Anders
Anders,
Wow! Thanks much for posting this!
I’m just getting started with Webhooks. I’ve developed a FM12 database that we have hosted with a 3rd party (PointInSpace). It’s accessible via the FM12 app and IWP.
What I am hoping to do is use a Wufoo (http://www.wufoo.com) form to capture a request via an embedded form on our website and pass it into our FM12 database. The primary users of that FM12 database our internal staff, however we would like to offer our clients the ability to submit review requests right from our website, vs. calling our Cert Staff and having them input the request directly to the database.
Does this sound possible with the setup we have…3rd party hosted FM database, Wufoo – embedded form in our WordPress site?
Thanks!
Joshua
Hey Joshua, you appear to have two options. According to their reporting page you can export the surveys into tab delimited, csv delimited, and Ecel files, which you then can import into FileMaker. Even better, they appear to have a Rest API (http://help.wufoo.com/articles/en_US/SurveyMonkeyArticleType/Wufoo-REST-API-V3) which will return XML. It therefore sounds like you can run a script in FileMaker to “Insert from URL” and grab the XML from wufoo, and then parse this XML into fields. You would need a custom function to parse the XML, and I recommend one over at briandunning.com (http://www.briandunning.com/cf/1).
If you have a wufoo survey, see if you can sign up for the API key and place a query into a URL. Put this URL in your browser, and if you see data, then you can use the Insert from URL.
Regards,
Anders
Thanks Anders! I just realized I never responded back to this…thanks for your expertise!
Joshua
Joshua – You are welcome!
Anders, Nice article but I’m having trouble when I try to query a FM database with this method. The webhooks.php seems to be invoked by the FormStack form (which is embedded in a WP Page) upon submit, but then the user is sent directly to a default FormStack “Thank You” page. You mention ” a second page, where the form will redirect after being processed. ” but I don’t see anyway to direct the user to it within FormStack.
Is there something else going on after the form is submitted?
Thanks in Advance,
-Jason
Anders,
After reading my question again, I need to clarify that I realize I can add more than one Submit Action in FormStack but I need it to report back the results of my WebHooks.php query, not just a customized Thank You page. Ideally, the WebHooks.php file is also the Thank You page.
Is this possible using WebHooks?
Thanks again,
Jason
Jason – Check out this article in the Formstack documentation.
https://support.formstack.com/customer/portal/articles/1239134-confirmation-page?b_id=999
Jason – The webhook is a separate PHP page on your server that is called by Formstack when the form is submitted. This is setup in Formstack under Form > Settings > Email & Redirects > “After the Form is Submitted”. Add a new “Submit Action” and select the “Send Data to External URL (Webhook)”. The following link is to the Formstack documentation on webhooks.
http://developers.formstack.com/docs/webhooks