Embedded form loading too 'narrow'

Richard_Foxwort · ‎May 01, 2019

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?

JonathanBowen · ‎May 02, 2019

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:

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

Hope this helps!

JB

CristianCG · ‎Nov 06, 2024

Hi there!

At miniExtensions, we've created a third-party form that integrates seamlessly with Airtable and gives you greater control over its appearance. For example, you can adjust the width of the form or increase the text size in field descriptions and formula fields.