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.
Form layout looks different in the form builder than in Preview screenAsked 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:
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.
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
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?
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.
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.
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 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.
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
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.