How-To: Integrate ProntoForms with AirTable

 

About

AirTable is an easy-to-use cloud database system, with opportunities for teams to collaborate and work on spreadsheets and projects simultaneously. Read more about AirTable.

ProntoForms does not have an out-of-the-box connector to Airtable.  However, it's easy to set up a no-code integration with AirTable using webhooks (HTTP Data Destinations and Data Sources)

These webhooks allow ProntoForms to trigger an API call to AirTable on a schedule (in the case of data sources) or every time a form submission is made (in the case of data destinations). 

[ top ]

 

Before You Start

AirTable: Key Concepts and Terminology

  • Base - This is AirTable's term for a spreadsheet/database.
  • Field - This is a column in a Base.   These define what kind of data goes into the Base. Usually, the answers from one question in ProntoForms will get sent to one Field in a Base. 
  • Record - This is a row in a Base.  This is the actual data in your spreadsheet.  One ProntoForms submission will usually create or update one Record in a Base.  Each record has a hidden "ID".

 

AirTable API Documentation

Be sure to have AirTable's API documentation on hand.  Their API documentation will help you find the ID for the Base you want to integrate with, and will list all the Fields in your Base.   You will need this API reference as you use this guide (Don't worry, we'll tell you what to do at each step).

When using the AirTable API documentation, be sure to be logged in, and choose the Base you want to integrate with at the top.  

 

AirTable API Key

Your AirTable account has an API key, which is like a password intended for system integrations.  When external systems like ProntoForms send data or requests to AirTable, that system has to include the API key in that request.  This way, AirTable knows which AirTable account to write to, and knows that ProntoForms has permission to do so. 

To find your AirTable API Key:

  1. Go to the AirTable API documentation.
  2. Click on "Show API Key" in the top right corner.
  3. The field after "Authorization" will list you AirTable APIT key.

 

 

Data Types

Just like each ProntoForms question has a data type, each Field in an AirTable Base has a data type.  The Data type defines what kind of data that Field is allowed to contain.   

When sending form submission data to AirTable, keep the data types of your Fields in mind.   AirTable won't let ProntoForms create a record if even a single Field in the record will contain invalid data, causing the data destinations to fail.

[ top ]

 

 

Connection

  1. Create the Connection as described here.
  2. Choose HTTP Connection as the type.


  3. Name the Connection, and select which FormSpaces it can be used in.
  4. For the Base Connection URL, enter https://api.airtable.com/
  5. Turn on Anonymous Access.  Because of the way that ProntoForms webhooks need to interact with the AirTable API, the authorization will be set up on the data source and data destination instead.
  6. Save the Connection. It is now ready to be used by data sources or destiantions.

[ top ]

 

Data Source

Typically, data is imported into ProntoForms using a data source.  When integrating with AirTable, ProntoForms can fetch the contents of a Base using a data source, and then display them as a list of options in a form. 

 

Create the Data Source

  1. Create the data source as described here, in the same FormSpace as your Form.
  2. Be sure to choose HTTP GET data source as the type.


  3. Name the data source.

 

Data Retrieval and Format Tab

  1. Go to the Data Retrieval and Format tab.
  2. Change the Data Format to JSON, as this is the format ProntoForms can get from AirTable.   Everything else in this tab can be left at the default values.

 

Connection Tab

Go to the Connection tab on the data source.  There are three changes to make here. 

 

1. Connection Configuration

 Choose the Connection you created in the section above.

 

2. URL Suffix

This is how ProntoForms will locate the Base that you want to pull a list of Records from.

Find the Correct URL for your Base

  1. Go to your AirTable API documentation.
  2. Choose "List Records" on the left of the screen.  This is the API Call that the HTTP GET destination will make to AirTable.


  3. On the left, under CURL, look at the first string, and copy the string after "airtable.com/"  until the end of your Base's name.


  4. Paste this as the URL Suffix in ProntoForms.

 

3. HTTP Headers

All you need to include here is the Authorization, which confirms that you are supposed to have access to this Base.

 

  1. Go to your AirTable API documentation again, choose the correct base, and click on "Show API Key" in the top right corner.


  2. In the HTTP GET data source in ProntoForms, go to HTTP Headers.
    1. Under Header Key, enter "Authorization".
    2. Under Header Value, copy the value that starts with Bearer and is followed by your API key.

 

Save the Data Source; set-up is complete.

[ top ]

 

 

Check the Contents of the Data Source

After saving your data source, if you want to make sure that the data source is pulling data from the correct base...

  1. Mouse over the dropdown beside the data source name.
  2. Choose Download as Excel.


  3. An Excel sheet will download.  You can see which columns are included; the columns should reflect the Fields in your base, and the rows should reflect the Records.

 

Attach the Data Source to a Form

In order to use your AirTable data in a form, you need to connect it to a Dropdown question in your form.  You will also likely want the form to behave so that when a user chooses a Record from the dropdown, it populates other fields in the form.

Reference the following resources:

[ top ]

 

 

 Creating/Updating Records in AirTable

In order to create a record in AirTable, you will need:

  • A document that contains information for the fields you want to update in your Base
  • A data destination, which is what sends that document

 

Document

AirTable is expecting a particular format for the data you send to it, which doesn't exactly match ProntoForms default JSON format.   So, you'll need to use a "Handlebars" type document, which lets you easily build the data format AirTable is expecting.

Create a Handlebars Document

  1. Create a Document as described here.
  2. Choose Handlebars as the type. 
  3. Set up the Configuration tab as pictured below. 
    (You may not see Form Model Version. This is a legacy field.)

 

Handlebars Template

Here, you'll need to reference the Fields in your AirTable Base, and tell ProntoForms what data to put in them.

 

Get the Correct Fields from AirTable

  1. Go to your AirTable API documentation.
  2. Choose "Create a Record" on the left of the screen.  This is the API Call that the HTTP GET destination will make to AirTable.
  3. On the left, under CURL, after the -d, there will be a list of all the fields in the base.


  4. Copy everything after the -d, and between the single quotes, into the Handlebars Template field (if you want to do this in Notepad or a similar application instead of working directly in the interface, that's fine too.)
    • Make sure you omit the single quotes, but keep all the { and } brackets.
    • Remove any fields that you don't want ProntoForms to update

  5. You've just created a JSON file that will send exactly what you see above to AirTable.  But, you don't want to send those static values - you want to send the answers to questions in your forms.

    Replace the values with references to your question's Unique ID.  Usually, it can be in the format "{{answers.YourUniqueID.[0]}}".  Omit any spaces or special characters in the ID. 

    When the document is sent to AirTable, ProntoForms will replace your question references with the actual answers to those questions.



    Finding Unique ID's in ProntoForms
    When creating or editing a question, you can find the Unique ID.



  6. Save the document; you're done setting it up.  

[ top ]

 

Create a New Record with a Data Destination

Data Destinations are used to take information from ProntoForms form submissions, and then insert that data into external systems.  In the case of AirTable, a data destination can be used to create a new Record each time a form submission is made.

 

Create the Data Destination

  1. Create a data destination as described here.
  2. Choose HTTP POST/PUT as the type. 
  3. Name the destination.

 

Connection Tab

Navigate to the Connection tab.  Two changes need to be made here.

 

1.  Connection Configuration

In the Connection tab, choose the same connection as your data source.

 

2. URL Suffix

Just like with the data source, this tells ProntoForms which Base in your AirTable account to add a record to. 

Find the Correct URL for your Base

  1. Go to your AirTable API documentation.
  2. Choose "Create a Record" on the left of the screen.  This is the API Call that the HTTP GET destination will make to AirTable.
  3. On the left, under CURL, look at the first string, and copy the string after "airtable.com/".  (Don't include the backslash "\").
  4. Paste this as the URL Suffix in ProntoForms.

[ top ]

 

Request/Response Configuration Tab

In the Request/Response Configuration tab, you'll be telling the data destination what kind of call to make to AirTable, and what to send.  There are two changes to make here.





 1. HTTP Method

 Choose POST.   POST is used for creating things, and AirTable requires that you use this method.

 

 

 2. Request Headers

You will include two headers here; one for the authorization, and one to tell AirTable what content type you are sending.

Authorization

Go to your AirTable API documentation again, choose the correct base, and click on "Show API Key" in the top right corner.



  1. In the HTTP GET data source in ProntoForms, go to HTTP Headers.
    1. Under Header Key, enter "Authorization".
    2. Under Header Value, copy the value that starts with Bearer and is followed by your API key.


Content Type

Copy this information from just below the Authorization line in the AirTable API documentation.

Save the data destination; Setup is complete!

[ top ]

 

 

Connect the Data Destination and your Document to Forms

In order for your form submission to trigger the creation of a Record in Airtable, the destination and your document must be connected to the form.  Read here about how to connect destinations and documents to forms in the Form Builder. 

Be sure to:

  1. Connect your HTTP POST/PUT Destination
  2. Link your Handlebars document to the destination

 

[ top ]

 

Update a Record with a Data Destination 

AirTable also allows updating existing records through their API.   ProntoForms can trigger this update, again using an HTTP POST/PUT Destination as a webhook.

In order to update a Record, the form submission will need to tell AirTable which Record to update.


Using the AirTable Record ID

In AirTable, each Record has a hidden Unique ID field.  This is autogenerated by AirTable, and cannot be edited or overwritten.   When you need to update a Record in AirTable, you need to provide this ID to identify it.

In order to do so, this ID must be: 

  1. Imported into ProntoForms from a Data Source
  2. Populated into the form from a dropdown/radiobutton that uses the data sourc
  3. Sent back to AirTable in your Handlebars document, through the destination


Data Source

You don't need to do anything here; your Data Source will automatically include a column for the IDs of every record in your base.  If you download the contents of your data source, you'll see this column already.

 

Form

The form will need to have the ID populated into it.  Usually, you want to hide the ID from users.

Create a Hidden ID Question

Create a text field question after the dropdown the references the data source, and mark it as "Hidden on Device".

 

Populate the ID from a Dropdown

Above, where we discussed data sources, we mentioned how to allow users choose a field from the data source (like the "name" of the record) and populate other columns into other questions in the form.

If you need to update Records in AirTable, set this up, and populate the "id" into a hidden text field. 



 

Document

In the Handlebars document, add an additional line for "id", and to reference the question in your form that is autopopulated with the ID.

 

Data Destination

The data destination to update an existing record is very similar to the one used to create a new record.

 

Create the Data Destination

To start, copy your existing data destination from above, or create a new one with the same settings.  The only changes you need to make are documented below.

 

Connection Tab

URL Suffix

Update the URL Suffix. At the end of the existing URL, reference the question in your form that contains the ID for the Record you want to update.  You can do this using Data Record Expression Language; just format it with %a[the Question Unique ID].

When the form is submitted, that expression will be replaced with the answer to the ID question, targeting the correct Record to update.

 

Request/Response Configuration Tab

HTTP Method

Change the method to PATCH.  This is the method used to update existing Records in AirTable.

 

These are the only changes you need to make.  Save the destination, and connect it to your form and document. 

[ top ]

 

 

Setting up Different Data Destinations to Conditionally Create vs. Update Records

If you have a scenario where a form needs to conditionally create a record, or update an existing record, some additional steps need to be taken.   

  1. The form needs to have a question which indicates what scenario should be triggered by the submission.   How you design this is up to you -- it could be a simple question where the user answers "New Record" or "Existing", which is what will be pictured here.


  2. Set up custom filtering rules on your data destinations that evaluates the answer to that question, and determines if the data destination should run or not.   This will ensure that AirTable doesn't BOTH create and update records with each form submission, and that it instead completes only one action. 

 

Example Filtering Rules

The "Create" Data Destination

This destination will only execute if the answer to the question is "New."

 

The "Update" Data Destination

This destination will only execute if the answer to the question is "Existing."

[ top ]

 

 

Testing

To see if your integration is complete, open the mobile app, sync to get the newest version of your form, and make a submission.   Ensure there are no errors in the ProntoForms system, and see if your Record got created or updated in AirTable. 

[ top ]

 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments