Pre-fill forms with Fillout and Make

I had several instances where someone wanted to give Guests access to update fields, but in a pre-filled form format, and only specific fields.

I know native support for this is coming in various forms, but I thought I'd share one of the workarounds we’ve come up with anyway.

In summary, what we're doing here is using SmartSuite, Make.com and Fillout.com to:

  • Create a SmartSuite Form that someone can fill out for the first time.

  • Upon submission, they will receive an email with a special link they can use to update their info (specific fields you, as the form builder, choose) at a later time

  • That link:

    • Is a Make webhook containing the Record ID of that specific record and a flag indicating whether it's an incoming request from SmartSuite and a form needs to be pre-filled, OR an incoming request from Fillout and a SmartSuite record needs to be updated.

    • If the request is coming from a SmartSuite link, then we use the Record ID to get all or some of the fields from that record in SmartSuite.

    • We then use that info to generate a Fillout.com pre-fill link then pass that back a 308 redirect in a webhook response. This will in turn forward the person that clicked that link to the pre-filled form.

    • Lastly, when the Fillout form is submitted, the webhook is called again, but this time it will update the SmartSuite record with the new information.

SmartSuite Form/Record

Start by creating your SmartSuite form. Here I've got my favorite food form:

To be clear, this is not a pre-fill, this is "Robert Jones" filling this out for the first time, thus creating this record in the database:

Note that Full Name is a Text field, not a Full Name field.

Once the form pre-fill/update link is generated you would set up your own Automation to send that link to the email provided.

Now, on to Fillout.com.

Create a Form with the fields you want pre-filled.

<full_name> is a placeholder for information we will get from SmartSuite using Make.
Favorite Food will be pre-filled, if there's anything to pre-fill.

In Fillout settings, create three URL parameters:

  • full_name

  • fav_food

  • record_id

In Fillout, click Edit to go back to the Form Editor. Delete <full_name>, type the @ symbol, then select URL Parameters → full_name which is insert a variable as shown below:

This will allow the form to pre-fill full_name with what has been supplied in the URL’s full_name parameter. 

For Favorite Food, click the field then select the + icon on the right in the Default Value box to Add reference. Select URL parameters → fav_food

In Make, add a new Custom Webhook module and copy the URL.

In SmartSuite, create a formula field, here it’s called “Form Prefill Update”:

Add the highlighted part onto the end of your webhook link.

Go back to Make and click on Redetermine Data Structure if it’s not already still listening for an incoming call.

Visit your final “Form Prefill Update” link and ensure you get an “Accepted” response and that it was successful in Make. You should now have variables available for source and record_id.


In Make, add a Router then a new SmartSuite Make an API call module.

After the Router, add a filter for source. If source = ss then route to the SmartSuite Make an API call.

For SmartSuite Make an API Call, set up your URL as shown using your specific App ID and record ID from the webhook. Remember to also add account-id to the query string.

Test your Scenario and visit your link again from SmartSuite. You should now have all the record’s information in the SmartSuite output bundle.

Next, add a Webhook Response module after the SmartSuite module:

For the Webhook response parameters, enable Show Advanced Settings.

Use 307 for the code.
Leave Body empty.

Add a Header with a Key of “Location”. The value should be the URL of the pre-filled Fillout.com URL. Include here all the URL Parameters included earlier on Fillout.com: full_name, fav_food, and record_id.

To get the URL, go to the Share page in Fillout and get the Form URL after publishing it.

Just replace the “xxxxx” with each field.

Now, run your Scenario again, visit the Make webhook link in SmartSuite once again, and this time, if it works properly, the Make Webhook Response will send a 307 redirect and you will be redirected to your pre-fill form.

Now for the record update.

Go back to Fillout, to the Integrations panel and select Webhook under APIs section:

Give the new Webhook Integration a cool name

Paste the same Webhook URL from the first module in your Make Scenario into the URL field, minus the query string portion.

Under URL Parameters, add the parameters: source, record_id, full_name, and fav_food. 

On the right side, you’re telling Fillout where to grab the information that will be submitted to the Webhook. 

For source, it’s a static value of “fillout”.

For record_id, you use the record_id URL parameter. This is basically just passing through from the URL parameter and doesn’t exist anywhere on the form unless you want to display it somewhere.

full_name and fav_food both come from the Page.

Test run the Webhook module then click Test fetch.

Now your webhook output bundle has a slightly different set of values.

Add a SmartSuite Update a Record module as a new route to the Router.

For this filter, source=fillout.

Configure the Update a Record according to the fields you want updated.

Final Scenario:

Tested successfully with the following fields in SmartSuite:

  • Text

  • Text Area

  • Single Select (List of options must be manually synced)

  • Multiple Select (List of options must be manually synced, and extra functions needed in Make to properly update the SmartSuite field)

  • Number

  • Number Slider

  • Percent

  • Email

  • Phone

  • Full Name (use two text fields in Fillout)

  • Yes/No

Other fields may work as well with extra configuration, but haven’t gotten to those yet.

Something similar can also probably be done with JotForm, but there just hasn't been a request for it yet.

Link to the SmartSuite form if you’d like to try for yourself: https://form.smartsuite.com/s07pfiuw/Qa6sfcdy7K

Be sure to address security issues, IP address restrictions on the webhook, etc…

9
4 replies