How to embed Fillout forms in Softr
Enhance your Softr applications by embedding Fillout forms connected to Airtable, that can update or create records, and access logged in users
Enhance your Softr applications with Fillout forms
Softr lets you build powerful applications that connect to databases like Airtable, but sometimes you could use the help of more powerful form applications that allow for things like:
- Filtering linked record pickers to only show relevant results
- Creating multiple pages on the forms
- Hiding elements conditionally based on previous answers or the user data
Note: you’ll need a paid Softr account to embed Fillout forms.
1. In Softr, create a custom code block

For more details, click here to view Softr's documentation
2. Copy an embed snippet for a Fillout form
You can get embedding options for Fillout forms in the
Share
tab for your form:
You can press “Get code” on the option you’d like to try.
Note: you should
publish
your Fillout form before trying it in Softr3. Paste the embed snippet into the Softr code block

4. Publish
your Softr application and try your Fillout form!
At this point, you should be ready to try your embed! See below for more advanced instructions.
Advanced
You can embed complex forms like forms to update an existing user’s profile based on the current logged in user. For example, a form that opens in a pop-up, to allow a logged in student to update their courses:

How to access the logged in Softr user in Fillout forms
Simple standard
embed
Here’s an example snippet for passing in the email, full name, and record ID of the user that is logged in:
<script> let filloutUrl = 'https://forms.fillout.com/t/XXXXX?'; if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) { filloutUrl = filloutUrl + 'email=' + window['logged_in_user']['softr_user_email']; filloutUrl = filloutUrl + '&name=' + window['logged_in_user']['softr_user_full_name']; filloutUrl = filloutUrl + '&id=' + window['logged_in_user']['airtable_record_id']; } document.write('<iframe src="' + filloutUrl + '" width="100%" height="900px" frameborder="0" marginheight="0" marginwidth="0" title="My Airtable form"></iframe>'); </script>
In this snippet, replace the “XXXXX” with the unique ending of your form URL that you can find in the
Share
tab of your form.Popup
and slider
embeds
For the popup and slider embedding types, you can use the following code snippet:
<!-- PASTE YOUR EMBED CODE HERE --> <script> document.addEventListener("DOMContentLoaded", function () { const filloutDivEmbeds = document.querySelectorAll('[data-fillout-id]:not([data-fillout-id=""])'); filloutDivEmbeds.forEach((target) => { if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) { target.setAttribute('data-email', window['logged_in_user']['softr_user_email']); target.setAttribute('data-name', window['logged_in_user']['softr_user_full_name']); target.setAttribute('data-id', window['logged_in_user']['airtable_record_id']); } }); }); </script> <script src="https://server.fillout.com/embed/v1/"></script>
Right below the line to
Paste your embed code here
, you can paste in the embed code you copied from Fillout’s Share
page for your form. That’s it!Accessing the URL parameters/hidden fields in Fillout
You can access the
email
, name
, and id
URL parameters much like any other URL parameters in Fillout if using the above methods to pass those in from Softr. Click here for more information about URL parameters in Fillout forms.Your URL parameters aren’t required to be called
email
, name
, nor id
. You can rename these in Fillout when registered, but the snippets above will need to adjusted to replace the names with your desired names.