Skip to main content

Targeting a field in an embedded form with javascript

  • December 9, 2022
  • 6 replies
  • 71 views
D
Forum|alt.badge.img+1

Hey all, I've created a form to solicit website feedback.

I will place it in our CMS on *every* article we run - thousands and thousands of pieces of content. I want to auto fill in one field ('sourceurl') with my own javascript snippet, which works, but the problem is I can't target the field - every time you load the form, it dynamically generates a new ID for the input field.

 

We have enterprise support (and I've even spoken to our rep and put in tech requests). I've also posted here and was told my solution should work, but at that time, I didn't realize the IDs generate fresh, so I am still trying to get this working.

I've even used the 'field manager' which lists a static ID for the field, but this static ID is not used in the embedded iframe as far as I can tell.

    6 replies

    TheTimeSavingCo
    Forum|alt.badge.img+31

    Hm, may I know what issues you faced when prefilling the URL the iframe uses?

    For example let's say the embed code is:

     

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrQEm9amm6lVmI5m?backgroundColor=gray" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

     

    I believe you can prefill the field in the iframe by doing:

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrQEm9amm6lVmI5m?backgroundColor=gray&prefill_Name=Test" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

    Which I believe should do what you're looking for?

     

    Adam, Airtable Consultant - thetimesaving.company
    D
    Forum|alt.badge.img+1
    • David_Streever
    • Author
    • Participating Frequently
    • December 15, 2022

    Hm, may I know what issues you faced when prefilling the URL the iframe uses?

    For example let's say the embed code is:

     

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrQEm9amm6lVmI5m?backgroundColor=gray" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

     

    I believe you can prefill the field in the iframe by doing:

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrQEm9amm6lVmI5m?backgroundColor=gray&prefill_Name=Test" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

    Which I believe should do what you're looking for?

     


    Hi Adam - I'm trying to use javascript to put the page url into a hidden form field.

    But I can't target the form field because Airtable uses dynamic IDs for the inputs LOL. I've been through enterprise support - it took over a month to get a definitive answer - "We can't do that."

    My only thought at this point is I have to do my own form (lol) and send the data into Google Sheets & sync that with Airtable. I'm going to try that next. 

    TheTimeSavingCo
    Forum|alt.badge.img+31

    Hi Adam - I'm trying to use javascript to put the page url into a hidden form field.

    But I can't target the form field because Airtable uses dynamic IDs for the inputs LOL. I've been through enterprise support - it took over a month to get a definitive answer - "We can't do that."

    My only thought at this point is I have to do my own form (lol) and send the data into Google Sheets & sync that with Airtable. I'm going to try that next. 


    Ah okay.  I think I don't understand what you're trying to do as it feels like the iframe option should work.  I'd love to find out more about what you're doing exactly to see if I could help

    It sounds like you're exploring an alternative solution already though, so no worries if you don't want to revisit this

    Adam, Airtable Consultant - thetimesaving.company
    D
    Forum|alt.badge.img+1
    • David_Streever
    • Author
    • Participating Frequently
    • January 20, 2023

    Ah okay.  I think I don't understand what you're trying to do as it feels like the iframe option should work.  I'd love to find out more about what you're doing exactly to see if I could help

    It sounds like you're exploring an alternative solution already though, so no worries if you don't want to revisit this


    Thank you! I'm still plugging away at this.

    The iframe wouldn't work because the form is on hundreds of pages, all with different urls; the iframe prefill would only work if it was always the same prefill. Does that make sense?

    For example, I have one embed:

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrQEm9amm6lVmI5m" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

    It can live on any number of pages, each with a unique url.

    I want to track *which page* the user submits the form from; so if they're on, mysite.com/page1, I need to capture that url. Or mysite.com/page2.

    I can easily get the url with javascript. I can even write the url to a form field. The problem is airtable dynamically generates the field id every time the form is loaded, so I can never target airtable fields.

    Basically the only way I can imagine this working (at this point) is to set up a Google form and then manually import the CSV into airtable once a week or so - because Google forms gives me unique class names for each form field! it's bizarre to me that we're spending like 10k a year on Enterprise Airtable and can't do some really basic things with the forms that are normal on totally free products.

    TheTimeSavingCo
    Forum|alt.badge.img+31

    Thank you! I'm still plugging away at this.

    The iframe wouldn't work because the form is on hundreds of pages, all with different urls; the iframe prefill would only work if it was always the same prefill. Does that make sense?

    For example, I have one embed:

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrQEm9amm6lVmI5m" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

    It can live on any number of pages, each with a unique url.

    I want to track *which page* the user submits the form from; so if they're on, mysite.com/page1, I need to capture that url. Or mysite.com/page2.

    I can easily get the url with javascript. I can even write the url to a form field. The problem is airtable dynamically generates the field id every time the form is loaded, so I can never target airtable fields.

    Basically the only way I can imagine this working (at this point) is to set up a Google form and then manually import the CSV into airtable once a week or so - because Google forms gives me unique class names for each form field! it's bizarre to me that we're spending like 10k a year on Enterprise Airtable and can't do some really basic things with the forms that are normal on totally free products.


    > It can live on any number of pages, each with a unique url.

    > I want to track *which page* the user submits the form from; so if they're on, mysite.com/page1, I need to capture that url. Or mysite.com/page2.

    > I can easily get the url with javascript

    Yeah, I was thinking we'd use JavaScript to grab the page's URL, use it to dynamically generate the embed's URL, and then put that into the iframe's src value.  I take it that's not possible though?

    Adam, Airtable Consultant - thetimesaving.company
    N
    Forum|alt.badge.img+7
    • Noah_Steinberg
    • Participating Frequently
    • August 19, 2023

    > It can live on any number of pages, each with a unique url.

    > I want to track *which page* the user submits the form from; so if they're on, mysite.com/page1, I need to capture that url. Or mysite.com/page2.

    > I can easily get the url with javascript

    Yeah, I was thinking we'd use JavaScript to grab the page's URL, use it to dynamically generate the embed's URL, and then put that into the iframe's src value.  I take it that's not possible though?


    Any luck solving this?

    Terms & ConditionsAccessibility statement