Build Filtered Forms with Softr and Fillout

Learn how to build dynamic forms that filter options based on your Airtable data by combining Softr and Fillout. This powerful combination lets you create personalized form experiences for your users.

Have you ever wanted to filter a dropdown on a form inside of Softr based on the context of the currently logged in user?

Maybe you only want to show a list of Contacts that work at the user’s organization, or you only want to show a list of Accounts the user is assigned to.

We can use the power of Softr and Fillout to create a better, more dynamic form experience.

Below you’ll find the video tutorial, a little bit of JavaScript that we use to send data from Softr to Fillout, and the Airtable base with a few modifications we made.

JavaScript for Custom Code Block in Softr

This code can be copied and pasted into the Custom Code block in Softr on your /new-project page

<script>
  const formId = "nESbGnpCr5us";
  let filloutUrl = "https://forms.fillout.com/t/" + formId + "?";
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const recordId = urlParams.get("recordId");

  if (
    window["logged_in_user"] &&
    window["logged_in_user"]["softr_user_email"]
  ) {
    filloutUrl =
      filloutUrl + "userId=" + window["logged_in_user"]["airtable_record_id"];
    console.log(window.logged_in_user);
    console.log(filloutUrl);
  }

  document.write(
    '<iframe src="' +
      filloutUrl +
      '" width="100%" height="900px" frameborder="0" marginheight="0" marginwidth="0" title="My Airtable form"></iframe>'
  );
</script>

Airtable Base

Here is a link to the Airtable base we used. It’s a slightly modified version of the Project Management base for Softr, but also includes an Accounts table and fields to display RecordIds.

https://airtable.com/appENH0yJIeXsSkf4/shrMlQoVoJYBWLbbU