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 looks different in a Form Designer when compared to what it looks in Form Builder.

    Asked by glenpoolps on June 30, 2015 at 12:30 PM

    http://form.jotform.us/form/51488521128153

    Here is what the screen looks like in the CSS editor screen:

    But here is how it looks in the Form Builder screen AFTER saving with !important:

    This is what I mean when I say the changes are not sticking! It is sooooooo aggravating!!! Please advise!

    Form Designer Form Builder layout form layout
  • Profile Image

    Answered by Ben on June 30, 2015 at 12:37 PM

    Now I took a look at your live form http://form.jotform.us/form/51488521128153 and it seems to me that the fields are looking as they should.

    As I had mentioned in the other thread, this seems different to you because a different amount of space is available to your form and it is trying to adjust.

    If you do not want that to be happening, you can set your form as non mobile responsive and the form will take the same space every time.

    You can see how to make it responsive here: How to make forms Mobile Responsive to turn the same feature off, just do the opposite - deselect both checkboxes shown.

    Do let us know however if you have any further questions in regards to this manner and we would be happy to assist.

  • Profile Image

    Answered by glenpoolps on June 30, 2015 at 03:18 PM

    Why is the amount of space available on the CSS screen different from the amount of space available on the Form Builder screen? It does not make sense that the amount of space would be different on these two screens. This is why I am unclear as to why my changes appear just fine on the CSS screen but then not on the form builder screen.

    (I tried turning the Make Mobile Forms Responsive thing on and off and neither one changed the effect in form builder). 

  • Profile Image

    Answered by Ben on June 30, 2015 at 03:41 PM

    Why is the amount of space available on the CSS screen different from the amount of space available on the Form Builder screen?

    To me the Form Designer utilizes more of the screen than the Form Builder. If you notice on the Form Builder, there are two gaps on both left and right and a menu on the left. The right part is the only one that shows the form.

    Now in Form Designer, everything is right next to the borders of the window with a lot more space in the middle section where the form is being shown.

    Allowing you the same experience that you would actually have if you go to the form directly.

    Please note that Form Builder is only one part of your form creating tool, and it is there to allow you to quickly and simply add the fields, set their properties and avoid all the extra weight that the styling adds to it, by offering only the simplest of styling options such as basic field positioning.

    With Form Designer on the other hand, you have all the tools needed to style and re-style your form.

    Now I am saying this only so to explain that Form Designer does have some of its own CSS code active on the form to allow you to see entire form and to keep it all easy to easily add new fields, make changes, etc. of course as much as it is possible.

    I would suggest to open the form in your browser in a new tab and then go into Form Designer to style it. That will allow you to make the changes, but also to see if the same changes have been properly applied.

    You can do that by:

    1. opening the preview and

    2. then selecting to open in a new tab, and

    3. then go into Form Designer.

    (I tried turning the Make Mobile Forms Responsive thing on and off and neither one changed the effect in form builder).

    In that case, there is some code active that makes it behave like that, not the mobile responsive option. Might be part of the code of the Form Builder, but could also be part of the code of your JotForm itself.

    I would also suggest taking a look at the following guide on our blog: Form Designer Tutorial: Let's create fantastic forms! it will help you with the Form Designer and was mostly made by my colleague Elton that you have met on the other thread.

    It will show you different things that you can achieve and quickly with and without CSS tab (depending on which one is easier for you to use).