Can I change the width of an embedded webform?

Follow

Michael Simmons

• March 19, 2015 21:00

Hey everyone,

I have a quick question. I've embedded a Podio webform on my website, and I'd like to change its width. Is this possible?

If so, what CSS code should I add and where?

I've tried a lot of options, but couldn't find a solution.

Thanks!

1

• 

  Jay Crutchfield

  • May 23, 2017 19:39
  • Edited

  Using the JS snippet embedded in a web page...

  What I did that works is edit your webform at Podio, go to Configuration in right margin, under Theme, then Edit Custom CSS and I have this

  div.container {
    width: 100% !important;
  }
  form#webform.webforms {
    width: 100% !important;
  }
  #webforms__fields-container {
    max-width: 500px !important;
  }

  and it should shrink for devices. The ID with max-width is the maximum width for desktop/laptop. This also makes it left aligned.

  2

  Comment actions Permalink
• 

  Andreas Haugstrup Pedersen

  • March 19, 2015 22:33

  If you inspect your own website after placing the webform you can see that the javascript you pasted in added an iframe to your website. If you adjust your site's CSS to limit the width of this iframe the webform to adjust to fit that width.

  0

  Comment actions Permalink
• 

  Tes

  • March 29, 2016 17:02

  Adjusting the iframe results in the individual fields looking like they have been cut short - the right hand border of the field input box is missing (see screenshot). Is there any way to set the form field sizes so they have a max? Also currently the forms look bad on a mobile as the rest of the page (apart from the form) is responsive. 

   

  

  0

  Comment actions Permalink
• 

  Glauber Carvalho

  • February 04, 2017 05:11
  • Edited

  Hard to believe but you need to add some css for responsive width. For every webform, I need to add a few lines so the form is responsive. Podio, please add this out of the box. 

   

  As for the body - Still trying to find a solution for the width. 

  0

  Comment actions Permalink
• 

  Kevin Eckley

  • January 11, 2018 22:33

  Jay, that code worked good for me, but how can the text remain centered vs becoming left aligned? I ask because I don't know css all that well. Thanks

  0

  Comment actions Permalink

Please sign in to leave a comment.