Skip to main content

​
What is Softr?

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 things like:

​
Custom code block

You’ll need a paid Softr account to use this method.
1

Choose an embed style

Start by clicking Publish in the upper right corner of the Fillout form editor. A popup will show up where you can pick an embed style.image.pngIf you’ve already published your form, click Share in the top middle or top right. Adjust your embed style settings to fit your use case. Then, Get the code
2

Create a custom code block

In Softr, Add a Custom code block.Screenshot 2025-12-16 at 5.09.34 PM.pngFor more details, click here to view Softr’s documentation.
3

Paste Fillout embed code

You’ll see a Embed your custom code here text. Paste the code there.Screenshot 2025-12-16 at 5.17.06 PM.png
4

Publish your Softr app

That’s it! 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: Filter records

Watch Dan Leeman from Automation Helpers build a filtered Fillout form, embedded in Softr.

​
Update forms

You can embed complex forms that allow logged in users to update their profile. For example, a form that opens in a pop-up, to allow a logged in student to update their courses. Update forms The styling of your embed can be adjusted to match your brand in Softr.

​
Access logged-in Softr users in Fillout

For custom code blocks, use the following code snippet: 
<!-- PASTE YOUR EMBED CODE HERE -->

<script>
    document.querySelectorAll("[data-fillout-id]:not([data-fillout-id=\"\"])").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!
Make sure to remove the first line in the code block, when pasting in your embed snippet (we’ve moved it over to later in the snippet, above).
You may also prefer using a simple custom embedding method as opposed to our built-in embedding snippets. Here’s an example snippet for passing in the email, full name, and record ID of the user that is logged in, using a custom iframe embedding method (if you need more customization): 
<div id="fillout_embed_div"></div>
<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'];
	}

  var targetDiv = document.getElementById('fillout_embed_div');
  var iframe = document.createElement('iframe');

  iframe.setAttribute('src', filloutUrl);
  iframe.setAttribute('width', '100%');
  iframe.setAttribute('height', '900px');
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('marginheight', '0');
  iframe.setAttribute('marginwidth', '0');
  iframe.setAttribute('title', 'Fillout form');
  iframe.setAttribute('allowfullscreen', 'true');

  targetDiv.appendChild(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.

​
Access 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.
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 be adjusted to replace the names with your desired names.
Fillout forms also automatically inherit URL parameters from your Softr pages. If you have any page that has a recordID URL parameter, as long as you have that registered as a URL parameter in your Fillout form, it will automatically get passed in!

Pick from linked records

Let respondents select linked records.

Embed parameters

Pass URL parameters to your embeds to track data.

Answer piping

Insert previous answers into upcoming questions or fields.