Form looks different in a Form Designer when compared to what it looks in Form Builder.

  • glenpoolps
    Asked 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:

    Form looks different in a Form Designer when compared to what it looks in Form Builder Screenshot 30

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

    Form looks different in a Form Designer when compared to what it looks in Form Builder Screenshot 41

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

  • Ben
    Replied 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.

    Form looks different in a Form Designer when compared to what it looks in Form Builder Screenshot 20

    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.

  • glenpoolps
    Replied on June 30, 2015 at 3: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). 

  • Ben
    Replied on June 30, 2015 at 3: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

    Form looks different in a Form Designer when compared to what it looks in Form Builder Screenshot 40

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

    Form looks different in a Form Designer when compared to what it looks in Form Builder Screenshot 51

    3. then go into Form Designer.

    Form looks different in a Form Designer when compared to what it looks in Form Builder Screenshot 62

    (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).