Form looks completely different in the preview window, as it does when viewed when embedded.

As usual, Jotform looks completely different in the preview window, as it does when viewed when embedded. 

This happens every time I make a Jotform, there just does not seem to be a solution. PLEASE HELP!

Every time I go to preview, the form looks fine, but when it is embedded into a site, it looks like a huge mess. 

Attached is a screen shot of how the form is appearing when embedded. 

Thank you for your help... Here is a link to the embedded form:

http://taoa18.wix.com/taoa

Hi taoa,

I checked your site and I was able to see the issue. Can you try re-embedding your form using the iFrame embed code below and see if it helps?

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformz.com/form/51916773178668" frameborder="0" style="width:100%; height:566px; border:none;" scrolling="no"></iframe>

Do let us know if you need further assistance.

Regards. 

That code does not work. When inserted, it looks similar but now the "comments" option is completely gone. 

Hi taoa,

Can you try injecting the custom CSS code below in your form and see if it works?

@media screen and (max-width: 480px) {

#cid_9{

display:block;

}

#input_9{

display:block;

}}

To inject custom CSS code to your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

Do let us know if you need further assistance.

Regards.

Thank you. This seems to be working now.

How can I make the comments box the same length as the other boxes?

You can adjust the numbers of rows and columns for the comments input

I will try that. Thank you!