Build Filtered Forms with Softr and Fillout
Learn to filter Softr form dropdowns based on logged-in user context, displaying relevant Contacts or Accounts, for a dynamic user experience.
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.
Video Tutorial
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
Need any help with your own Airtable or Softr build?