Fillout logo

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:
  • Creating multiple pages on the forms
 
ℹ️
Note: you’ll need a paid Softr account to embed Fillout forms.

1. In Softr, create a custom code block

notion image
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:
notion image
 
You can press “Get code” on the option you’d like to try.
ℹ️
Note: you should publish your Fillout form before trying it in Softr

3. Paste the embed snippet into the Softr code block

 
notion image

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:
 
The styling of your embed can be adjusted to match your brand in Softr!
The styling of your embed can be adjusted to match your brand in Softr!
 

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.
Next
Copy and paste questions