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

  • Profile Image
    taoa
    Asked on July 11, 2015 at 05:05 PM

    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. 

  • Profile Image
    Shadae
    Answered on July 11, 2015 at 07:11 PM

    Hi taoa,

    I do apologize for the issue that you are experiencing with your embedded form.

    The screenshot below shows your direct form and I am seeing that is different from the screenshot that you provided us with.

    Can you please provide us with the URL where your form is embedded so that we can better assist you?

    Thank you

  • Profile Image
    taoa
    Answered on July 11, 2015 at 08:10 PM

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

    http://taoa18.wix.com/taoa

  • Profile Image
    Chriistian
    Answered on July 12, 2015 at 12:42 AM

    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" onload="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. 

  • Profile Image
    taoa
    Answered on July 13, 2015 at 06:40 PM

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

  • Profile Image
    taoa
    Answered on July 13, 2015 at 06:41 PM

     

  • Profile Image
    Chriistian
    Answered on July 13, 2015 at 08:28 PM

    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.

  • Profile Image
    taoa
    Answered on July 14, 2015 at 01:47 PM

    Thank you. This seems to be working now.

  • Profile Image
    taoa
    Answered on July 14, 2015 at 01:52 PM

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

  • Profile Image
    Sammy
    Answered on July 14, 2015 at 02:34 PM

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

  • Profile Image
    taoa
    Answered on July 14, 2015 at 03:17 PM

    I will try that. Thank you!