Hooking Formstack into FileMaker

There are generally three ways to get web-based form data into FileMaker.

1. You can set up Instant Web Publishing using FileMaker Server Advanced, exposing a FileMaker layout directly to the web.
2. You can write a custom HTML form and submit the data using FileMaker’s PHP API.
3. 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.