I’ve embedded an airtable form in a page built with webflow.
I wanted to prefill airtable form using the URL parameter, but I don’t know how to do it.
First, I embedded the airtable form in a page built with webflow, referring to the following site
Then I realized that I can write prefill directly in the embed code.
However, what I want to do now is to prefill the embedded airtable form using the URL parameter, but I don’t know how to do it.
I have a feeling that I can do it by applying the code in the URL below, but the code is too complicated for me to understand.
I’m using deepl, so I apologize if the wording is confusing.
Edit the below script according to your needs and install it into the ‘before body tag’ of your webflow page:
<script>
let myIframe = document.getElementById("myIframe");
let endpoint = "https://airtable.com/embed/xxxxxxxxxxxxxx";
let url_string = window.location.href;
let url = new URL(url_string);
console.log(url_string);
let name = url.searchParams.get("name");
console.log(name);
let email = url.searchParams.get("email");
console.log(email);
let fullURL = endpoint+"?prefill_Name="+name+"&prefill_Email="+email;
console.log(fullURL);
myIframe.src = fullURL;
</script>
Re-did everything from scratch in case I missed something. Same problem. Some info:
Inside HEAD tag: <script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
Before BODY tag:
<script>
let myIframe = document.getElementById("AirtableEmbed");
let endpoint = "https://airtable.com/shr...5WB";
let url_string = window.location.href;
let url = new URL(url_string);
console.log(url_string);
let email = url.searchParams.get("email");
console.log(email);
let fullURL = endpoint+"?prefill_Email+Address="+email;
console.log(fullURL);
myIframe.src = fullURL;
</script>
In EMBED element: <iframe id="AirtableEmbed" class="airtable-embed airtable-dynamic-height" frameborder="0" onmousewheel="" width="100%" height="1991" style="background: transparent; border: 1px solid #ccc;"></iframe>
<script>
let myIframe = document.getElementById("myIframe");
let endpoint = "https://airtable.com/embed/shr...jTU";
let url_string = window.location.href;
let url = new URL(url_string);
console.log(url_string);
let name = url.searchParams.get("name");
console.log(name);
let email = url.searchParams.get("email");
console.log(email);
let fullURL = endpoint+"prefill_Name="+name+"&prefill_Email="+email+"&prefill_Receive+Email+With+Results=true";
console.log(fullURL);
myIframe.src = fullURL;
</script>
Thanks for the reply @Dean_Arnold! Appreciate you taking some time with me.
I’ve checked and re-checked. Tried removing the “?”, renamed my ID from “AirtableEmbed” to the same as yours. Copy and pasted stuff in again. Not getting any love here.
I’m looking at the console, and I do see the following:
Looks like I need the “?” since it’s missing from the URL.
After plugging that in, the console log looks great. The link to Airtable is perfectly formed, and when I click on it from the console it loads up just like it should.
The problem is this “Refused to display” line from Airtable and the X-Frame-Options setting. X-Frame-Options appears to be a setting that restricts embedding. Which seems strange for Airtable to reject, considering this is embed code.
It fails the minute I add the ID tag to the iFrame. I’ve tried moving code to the header, body, inline, etc. Nothing seems to get past this.
Will try Airtable support. This shouldn’t be this hard, and I have no idea why it works for you and not me! Oy.
