What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

    Form layout looks different in the form builder than in Preview screen

    Asked by asapcarparts on December 11, 2014 at 01:26 PM

    The form looks the way it is supposed to in the form builder, but when i view a preview of it, or place it into my website it looks completely different. Please see below.

    Form looking normal in editor

    Form in preview mode and website:

  • Profile Image

    Answered by raul on December 11, 2014 at 03:58 PM

    Looks like you were able to fix your form by yourself since the reported form has been deleted, but I found this form: http://www.jotform.us/form/43446220049146 which looks pretty similar

    Is this correct? If it's not, please let us know if you're referring to a different form and we'll be happy to help.

    Thank you.

  • Profile Image

    Answered by asapcarparts on December 11, 2014 at 04:16 PM

    I made the mistake of deleting the form in question. But with the form you mentioned above I am having the same issue. The form looks good in the editor, but when previewing it and adding to site it does not look the same. I'm getting this problem with every form im creating

  • Profile Image

    Answered by asapcarparts on December 11, 2014 at 04:19 PM

    I also ran across another problem, when trying to add the feedback button to my site, it interferes with my navigation menu, and my sub-menus dont drop down anymore. is there a workaround by any chance?

  • Profile Image

    Answered by asapcarparts on December 11, 2014 at 04:36 PM

    I have solved the problem with the feedback button by installing the wordpress plugin. 

    I still need help with the design problem of the forms.


  • Profile Image
    JotForm Support

    Answered by Mike_T on December 11, 2014 at 05:55 PM

    When you edit the form in the new Form Designer, it is being saved with some additional mobile styles. Then, when you preview the form it has a different layout because of these mobile styles. The form preview window width is less than 768 pixels wide, so that the @media rules are being applied. It means that the form will be probably fine when embedded on your site.

    I have attached a ticket to this thread to see if we can do anything about this preview issue.

    Thank you.

  • Profile Image

    Answered by asapcarparts on December 12, 2014 at 09:25 AM

    Even after removing the @media styles, the form is still not displaying properly. Also, sometimes after leaving the designer, the layout completely changes once returned to the editor.

    This is getting really frustrating, as I need this forms to display properly. I am wanting to upgrade from the free version, but if my forms won't look the way they are supposed too, I will have to find another service to use.

    I have always used jot form, for myself and my clients, and would prefer not having to find another service.

    Take the Customer Feedback form that I have for instance. The screenshot that was posted above looks normal, but not anymore. All the fields are being stretched to 100% width for some reason. I had the 'Full Name' and 'Email' fields next to each other. On the scale rating, the labels are set to left align, but yet they top align.

    The 'Submit' button also stretches to 100%.

    Please help.

  • Profile Image

    Answered by raul on December 12, 2014 at 11:01 AM

    Please check the following cloned version of your form: http://form.jotformpro.com/form/43454221947961

    I've changed the theme to Default since you were using the Nova Theme which includes the @media CSS code mentioned by Mike.

    And then removed the @media code from the form and this is how it looks on the Preview Window.

    Let us know if this works for you. If it does, feel free to clone this form into your account.

    By the way, I see that Mike has already submitted this thread to our development team and it's been assigned to a developer. So, hopefully the developer can provide a permanent fix for this issue soon.

  • Profile Image

    Answered by asapcarparts on December 12, 2014 at 11:16 AM

    How would i make the form responsive to only smartphones? When i insert the form into my website using the feedback button, the form switches to responsive form when using desktop. I need it to become responsive only for the smartphones.

    thanks for your help

  • Profile Image

    Answered by raul on December 12, 2014 at 12:13 PM

    Try adding the mobile responsive widget to your form and make sure you have disabled the Form Responsiveness option.

    Let us know if this helps.