Making embedded form fit the web page

Hi! When I use the iframe code to embed a form in my website, it leaves me with a huge white space at the bottom of my form. I had switched to using the source code, but then it cuts off some of the text on the right side of the form. What's the best solution? Do I just need to change the height of the iframe? And is that something I'll have to adjust to a different height on every single form we embed? Or is there something I should do with the source code?

Thanks!

When embedding the iFrame embed code, you'll need to set a fixed height on it, you can also set the "scrolling: auto" if the next pages of your form are longer. You could try using the default embed code instead, then we can try resolving the issue of the form being cut off at the right side. 

I've checked your form and it seems there are CSS errors on it? Did you add the following CSS in our Form Designer tool?

You can try adjusting the form's width so that it will match your website and not be cut off at the right. Here's a custom CSS code that you can use:

.jotform-form {

max-width: 700px !important;

padding-left: none !important;

padding-right: none !important;

}

You might also be interested in this guide about custom CSS code: http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes.

Do let us know if you have changed your embed code to the default one and we'll check it again and see if we can resolve it.

Thank you.

That part you highlighted in the CSS doesn't look like something I added. I think I did add something that I found in the forum to get rid of the gray box above the form. 

So which of the heights from the iframe code am I supposed to adjust? Is the default height too tall and that's why I'm getting that extra space at the bottom? 

<iframe id="JotFormIFrame" style="width: 100%; height: 6990px; border: none;" src="//form.jotform.us/form/51167105447149" height="240" width="320" frameborder="0" scrolling="auto"></iframe>

Maybe it makes more sense to just use the Wordpress code (I thought I had tried this before and it hadn't worked). But it looks like everything shows up correctly with that code - no extra space at the bottom and the right side isn't cut off. So maybe that's just the solution. If I use the Wordpress code, should I still add that custom CSS? Thank you!

For the iFrame code, not sure though why there's a duplicate height and width on it. It should be like this:

Before:

<iframe id="JotFormIFrame" style="width: 100%; height: 90px; border: none;" src="//form.jotform.us/form/51167105447149" height="240" width="320" frameborder="0" scrolling="auto"></iframe>

After:

<iframe id="JotFormIFrame" style="width: 100%; height: 2990px; border: none;" src="//form.jotform.us/form/51167105447149" frameborder="0" scrolling="auto"></iframe>

You should adjust the height inside the "style" attribute. Also, make sure that you remove the duplicate to avoid conflict. Here's a guide that you can refer about our iFrame embed code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

I noticed you're not using the iFrame code, is that the Wordpress code or are you using a WP plugin? The form seems to display properly in your end now. If everything is working as expected, no need to use the custom CSS code that I mentioned. 

You can also clone my form here: http://form.jotformpro.com/form/51396178062964. I've removed the error CSS code in it, to clone it you can follow this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

Do let us know if you have managed to work everything out.

Thank you.