Post

6 followers Follow
1
Avatar

Can I change the width of an embedded webform?

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!

Michael Simmons

Please sign in to leave a comment.

5 comments

0
Avatar

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.

Andreas Haugstrup Pedersen 0 votes
0
Avatar

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. 

 

Tes 0 votes
0
Avatar

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. 

Glauber Carvalho 0 votes
2
Avatar

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.

Jay Crutchfield 2 votes
0
Avatar

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

Kevin Eckley 0 votes