On preview, the form looks fine, but on the actual website, the text-areas expand. The form position also changed.

On preview, the form looks fine, but on the actual website, the text-areas expand.

Original Post: https://www.jotform.com/answers/1256484

I checked your form (http://www.jotform.me/form/72171200030434) and the page URL (https://www.machon-noam.co.il/%D7%A4%D7%99%D7%9C%D7%AA-%D7%94%D7%9B%D7%A0%D7%94) that you have provided on the other thread. 

It looks the same to me. Here are the screenshots:

- Website:

- Form link:

Is the issue resolved? Is the form link and page URL, correct? 

What device are you using when viewing the form and page URL?

Let us know so we can investigate it further. Thank you.

No, this is not the form I'm referring to.

Same URL, form #51892012601446.

You can see it if you press on the green-white button at the bottom of the page-

Thank you

I'm sorry for the trouble caused to you. 

I did check your form and I am able to see the issue you are having.  The issue is caused because of the iFrame width. I will get back to you on this soon.

Please embed your form using the following iFrame embed code and see if that solves your problem:

<iframe id="JotFormIFrame" allowtransparency="true" src="https://secure.jotform.me/form/51892012601446" frameborder="0" scrolling="no" style="width: 481px;height: 455px;border: none;"></iframe>

Do get back to us if the issue persists.

I embedded the iFrame code you sent me.

This is what it looks like now:

I presume that resolves the problem? If not, what exactly that you want the form too look like when embedded?

FYI, forms from JotForm are mobile responsive. The form embedded on your website into a small container renders the mobile responsive layout so it appears properly when viewed on mobile. It's actually much easier to fill when the form field expands when embedded into a small container.

Thanks

How can I get rid of the grey area around the form?

Is the problem in the form's CSS or the iframe code?

I'll mention again that every time I try and edit a form, the moment I press 'edit form', the form changes without me touching the CSS and creates these problems.

Thank you.

In order to get rid of the grey area around the form, you need to change the background colour of your form. Please click on the "Form Designer" button and then select a page colour which suits your page. 

Finally, please save your form and then let us know if you encounter any issue.

Hey,

I tried that, but there is still a border around the form itself.

Is there a way to delete it?

To remove borders please inject this custom CSS code to your form:

.supernova .form-all, .form-all {

border: none !important;

-webkit-box-shadow: none !important;

-moz-box-shadow: none !important;

box-shadow: none !important;

}

How to Inject Custom CSS Codes

The result is: