Skip to main content

Style the embedded form with CSS


  • New Participant
  • 2 replies

Hi,

A client of mine is using Airtable form on Squarespace.
How can I add custom CSS to the form?

I found this Better Whitespace Use with Custom CSS but I don’t understand where to add the CSS.

Thank you

4 replies

  • Inspiring
  • 183 replies
  • January 18, 2022

The short answer is that you would add CSS to the page where the form is embedded (i.e. your client’s Squarespace page).

The long answer is that you may run into problems with CORS and also with the form’s class names and HTML structure changing over time, which will break your CSS.

I’d contact Airtable support directly about your question to get guidance about these two issues.


  • Author
  • New Participant
  • 2 replies
  • January 18, 2022

Unfortunately the CSS added on the Squarespace page is not able to target the elements of the Airtable form because it is inside of a <iframe>


  • Participating Frequently
  • 7 replies
  • January 18, 2022
Marian wrote:

Unfortunately the CSS added on the Squarespace page is not able to target the elements of the Airtable form because it is inside of a <iframe>


Yea Marian-

I had a similar issue, mainly cause I hated how it looked. You can use a Stacker or miniextenstions to create a better UI to imbed on the Squarespace site.

The easiest solution (at least for us) was to just use the open new window function and have the button just share the form via the share url.

If I find out a way to use the CSS ill let you know.


  • Author
  • New Participant
  • 2 replies
  • January 18, 2022
Joshua_Caldwell wrote:

Yea Marian-

I had a similar issue, mainly cause I hated how it looked. You can use a Stacker or miniextenstions to create a better UI to imbed on the Squarespace site.

The easiest solution (at least for us) was to just use the open new window function and have the button just share the form via the share url.

If I find out a way to use the CSS ill let you know.


Thank you very much!


Reply