Streaming live at 10am (PST)

How to implement prefill using URL parameter to airtable form embed in webflow

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.

Hi @ihas0318,

In case you’re still looking for the answer…

  1. Add this script to the inside head tag of your webflow page:
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
  1. Add this iFrame into your embed code. (Note there is no src attribute here. We’ve added an id attribute:
<iframe id="myIframe" class="airtable-embed" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
  1. 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>

Since the URL parameters I’ve used in this script are “name” and “email”, the URL I give to my users should therefore be constructed like so:
https://website.com/yourpage?name=John+Doe&email=john@gmail.com

I hope this solution works for you too!

For more information, see the post by the author of the script: