> ## Documentation Index
> Fetch the complete documentation index at: https://fillout.com/help/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Fillout forms on Softr

> Enhance your Softr applications by embedding Fillout forms connected to Airtable, that can update or create records, and access logged in users

## What is Softr?

[Softr](https://www.softr.io/) 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:

* [Filtering linked record pickers](https://www.fillout.com/help/select-linked-airtable-records#enable-dropdown-filtering) to only show relevant results
* Creating multiple pages on the forms
* [Referencing previous answers](/answer-piping)
* [Hiding elements conditionally](https://www.fillout.com/help/conditional-hiding#hide-based-on-a-condition) based on previous answers or the user data

## Custom code block

<Note>
  You’ll need a paid Softr account to use this method.
</Note>

<Steps>
  <Step title="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**.

    <img src="https://mintcdn.com/fillout-005a867b/8xPSE_gltIWkl-pC/images/image.png?fit=max&auto=format&n=8xPSE_gltIWkl-pC&q=85&s=7dbcd6fa7b9a41bd1cbd1163d7f11065" alt="image.png" width="1780" height="440" data-path="images/image.png" />

    If 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`
  </Step>

  <Step title="Create a custom code block">
    In Softr, Add a **Custom code block**.

    <img src="https://mintcdn.com/fillout-005a867b/Im1asDOrrSnMFK8h/images/Screenshot2025-12-16at5.09.34PM.png?fit=max&auto=format&n=Im1asDOrrSnMFK8h&q=85&s=fdd5edc2d3b721a264dbdae9d35c5bac" alt="Screenshot 2025-12-16 at 5.09.34 PM.png" title="Screenshot 2025-12-16 at 5.09.34 PM.png" style={{ width:"49%" }} width="720" height="1160" data-path="images/Screenshot2025-12-16at5.09.34PM.png" />

    For more details, click [here](https://docs.softr.io/basic-building-blocks/faLmrJmdo6e3EsGyNHYQ6V/custom-code-block-overview/6XNrxFopUEiwbWipq81Eq1) to view Softr's documentation.
  </Step>

  <Step title="Paste Fillout embed code">
    You'll see a `Embed your custom code here` text. Paste the code there.

    <img src="https://mintcdn.com/fillout-005a867b/Im1asDOrrSnMFK8h/images/Screenshot2025-12-16at5.17.06PM.png?fit=max&auto=format&n=Im1asDOrrSnMFK8h&q=85&s=d865af69116983797ec873f7ea5a1c6e" alt="Screenshot 2025-12-16 at 5.17.06 PM.png" title="Screenshot 2025-12-16 at 5.17.06 PM.png" style={{ width:"50%" }} width="708" height="896" data-path="images/Screenshot2025-12-16at5.17.06PM.png" />
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Advanced: Filter records

Watch Dan Leeman from [Automation Helpers](https://www.automationhelpers.com/templates/build-filtered-forms-with-softr-and-fillout) build a filtered Fillout form, embedded in Softr.

<iframe width="100%" height="420" src="https://www.youtube.com/embed/8iNqptGxO4U" title="Build Filtered Forms with Softr and Fillout" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

## Update forms

You can embed complex forms that [allow logged in users to update their profile](/airtable-update-form). For example, a form that opens in a pop-up, to allow a logged in student to update their courses.

<img src="https://mintcdn.com/fillout-005a867b/SVULX_5c8yh6MT9m/images/guides/image-82.webp?fit=max&auto=format&n=SVULX_5c8yh6MT9m&q=85&s=a09148675e1f422c7fcf78b8543e0b30" alt="Update forms" width="600" height="364" data-path="images/guides/image-82.webp" />

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:

```js theme={null}
<!-- 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!

<Warning>
  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).
</Warning>

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):

```js theme={null}
<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](/url-parameters) for more information.

<Note>
  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.
</Note>

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!

## Related articles

<CardGroup cols={3}>
  <Card title="Pick from linked records" icon="folder" iconType="regular" color="#FFC738" href="/select-linked-airtable-records">
    Let respondents select linked records.
  </Card>

  <Card title="Embed parameters" icon="brackets-square" iconType="regular" color="#FFC738" href="/embedded-url-parameters">
    Pass URL parameters to your embeds to track data.
  </Card>

  <Card title="Answer piping" icon="wand-magic-sparkles" iconType="regular" color="#FFC738" href="/answer-piping">
    Insert previous answers into upcoming questions or fields.
  </Card>
</CardGroup>
