Prefill form and embed in Webflow

[Yoshi089]

Hi,

Airtable - Support

Prefilling a form

When making an Airtable form, you can use prefill_ parameters in the URL of the form to prefill specific fields. Find the URL for the form you wish to prefill. Once you get the form URL, you can ...

I am using the prefill feature to create 3 different links for 3 different webflow pages.
On each page i prefill a single-select field with the page-name. Eg. “project_one”, “project_two”, etc…

Within airtable i open the “embed view” and copy the code.
Then i add my “?prefill_ProjectName=project_one” code.
After that within webflow i use the HTML-Embed element to paste the shared link into.

Example embed code before:
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shrbasdada21212?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="979" style="background: transparent; border: 1px solid #ccc;"></iframe>

Example embed code with prefill:
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shrbasdada21212?prefill_ProjectName=project_one?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="979" style="background: transparent; border: 1px solid #ccc;"></iframe>

When i load the page within webflow, the single select field is just empty.

Any ideas how the src-line should look like?
Thanks!

[ScottWorld]

You have a question mark before background color, when it should be an ampersand.

[Yoshi089]

Hey @ScottWorld, thanks for your answer. Maybe i am still doing something wrong, but also with “&backgroundColor” instead of “?backgroundColor” its still not working. No airtable is shown in the published website.

As mentioned within the airtable documention:
If you wish to prefill more fields, enter an ampersand ( & ) and then enter more prefill_ parameters.

To clearify: i only have one prefillparameter. The “?backgroundColor=cyan” is auto-generated from the airtable embed code.

Also when i just remove the “?backgroundColor=cyan”, its also not working.

Thanks for any help.
Joe

[ScottWorld]

Ah, thanks for the info. It’s very possible that pre-filling forms might not work when embedding forms in another website. Pre-filling forms might only work if you’re using the form using its normal share link (which keeps it within the Airtable domain). I’m assuming that you CAN get the prefill to work properly if you just use the normal share link for the form?

[Yoshi089]

Hey, that was fast! Thanks for your support!

Yes, prefill only works fine when using the normal airtable share link.
Thats why i just copied the prefill url within the embed code, which doesn´t work for me right now.

[ScottWorld]

I just tried it on my end with my own form, and prefilling a field works fine for me — for BOTH embedded forms AND normal Airtable forms.

So if you’re still unable to get it work, I would recommend reaching out to support@airtable.com and having them look into it.

[Justin_Barrett · Accepted solution]

Here’s how inline URL arguments work. The first one after the primary URL uses the ? separator between the URL and the attribute you’re passing…

www.website.com/something?attribute=value

Additional attributes are added using the & separator:

www.website.com/something?attribute=value&attribute2=value2&attribute3=value3

Whether you add your prefill attribute before or after the existing background color attribute is irrelevant, as long as the separator order stays as it should: ? for the first one, and & for all the rest. If you leave the background color attribute where it was and add yours after it, it would look like this:

<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shrbasdada21212?backgroundColor=cyan&prefill_ProjectName=project_one" frameborder="0" onmousewheel="" width="100%" height="979" style="background: transparent; border: 1px solid #ccc;"></iframe>

If you flip the order, it should look like this:

<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shrbasdada21212?prefill_ProjectName=project_one&backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="979" style="background: transparent; border: 1px solid #ccc;"></iframe>

All that aside, I should ask this: are you sure this is the correct embed URL for your form? When checking a form of my own, I don’t see a background color attribute in the embed URL. In fact, I don’t recall seeing background colors in the URLs of any views I’ve embedded, forms or otherwise.

[Yoshi089]

Hey @Justin_Barrett , great answer! Thanks for your time and effort.
This helped and I just tried it out -> it works!

Super awesome!
Thanks also to @ScottWorld for your support!
You rock!

Joe