Build Filtered Forms with Softr and Fillout

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