Help

Embedded form loading too 'narrow'

Topic Labels: Formulas
2754 1
cancel
Showing results for 
Search instead for 
Did you mean: 
Richard_Foxwort
7 - App Architect
7 - App Architect

I have created a form to collect input into my airtable, and have it embedded in a webpage vis iframe.

Form loads and works fine, but the input fields are displayed in a narrow column down centre of page, rather than loading edge-to edge in the browser window. On moble, this makes the form look very small/unusabel.

Is possible to zoom in but I’d much prefer the form loads so that the columns of input fields is displayed at max size in the available browser window.

I’ve tried both with and without header graphic in the form, and have specified 100% width for the iframe.

Anyone got some ideas what else to try to force load my Airtable form at max width?

1 Reply 1

Hi @Richard_Foxworthy - this is probably something to do with the webpage itself (structure/styling) rather than the Airtable form. The form embed code is:

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

This has 100% width, so will fill the page “container” it is embedded into. It will almost certainly be a problem with the container - too narrow, too much padding or something like that.

A simple HTML page will show you what it should look like:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
    <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/[ADD YOUR FORM ID HERE]?backgroundColor=green" frameborder="0" onmousewheel="" width="100%" height="706" style="background: transparent; border: 1px solid #ccc;"></iframe>
  </body>
</html>

Copy the above snippet, paste it into a text file named index.html, change the form ID to be your form ID, then open it in a browser and you will see what I mean. Resize the browser to get a mobile view (or use Chrome Dev Tools if you are familiar with that).

Mobile view:

Screenshot 2019-05-02 at 08.10.18.png

I would recommend using the autosize height feature of the embed code too:

Screenshot 2019-05-02 at 08.07.11.png

Hope this helps!

JB