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 Designer shows correct layout, but Form Builder does not - and it is the same when embedded on a website

    Asked by glenpoolps on June 25, 2015 at 10:48 AM

    Here are a total of 4 screenshots to show what I am facing:

    Picture 1 is how it looks in the CSS tab (and how I want it to look and have saved it).

    Picture 2 is how it looks in the form builder and on our live site. Slight differences and yet NOT how I saved it in CSS! Secondary Phone Number is on two lines and the Select One Label has moved to the top instead of to the left where I put it!

    Picture 3 is from the CSS tab and exactly how I want it to look.

    Picture 4 is how it shows up in form builder and on our live site. NOT CORRECT! Again, it is slight and a preference in layout, the point is the Save feature is not working!

    Form Designer Form Builder CSS tab
  • Profile Image

    Answered by Ben on June 25, 2015 at 10:55 AM

    I am looking at your images above and to me it seems that the issue is with the width.

    The width of the 1st image of both groups seems to be wider than the one on the second ones.

    This can be seen by the labels using much more space instead of being 'broken' into several lines.

    Could you please give us the link to your page on your website where the form is embedded so that we can take a look at it and let you know if width is truly the cause of this, or if it is something else and how to resolve it?

  • Profile Image

    Answered by glenpoolps on June 25, 2015 at 05:58 PM

    Precisely!!! I have been working to adjust the label lengths so that the form elements appear as I wish them to appear (the way they appear in the original form which was imported into Jotforms!)

    The problem is none of these CSS edits which I painstakingly worked to make seem to be "taking" or "sticking". I don't understand what the problem is because on the CSS screen, everything looks as I intend it to be; however when I look at the form post-CSS edits in the form builder OR in our live version, everything is scrunched/the label lengths are totally messed up and not at all how I set them.

    By the way, I do not want my labels on top in these instances. I want them beside the blanks and/or dropdowns. There should be plenty of space to put these side-by-side. Again, it shows that way from the CSS screen.

    Ok I sure hope this is the correct link:

    http://form.jotform.us/form/51402544611141

    The form I am currently working with is called: Employment - Certified Staff Application.

    Thank you for your help.

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 25, 2015 at 10:56 PM

    Hi,

    I checked the injected CSS and they are all correct except that they are not taking effect on the live version since they are overpowered by the default styles assigned to the labels. The easiest way to resolve this is to add !important after the property value.

    Example:

    #label_504 {
    width: 170px !important;
    }

    The following CSS codes will correct the ones in your screenshots.

    #label_504, #label_505  {

      width: 170px !important;

      }

    #label_17, #label_20 {

      width: 80px !important;

     }

     #label_189 {

      color: #404040;

      width: 256px !important;

    }

    #label_191, #label_194, #label_492 {

      color: #404040;

      width: 250px !important;

    }

    Or find all the injected CSS codes in to your form specially the ones with label IDs and add !important to it. That should also work.

    Thanks!

  • Profile Image

    Answered by glenpoolps on June 29, 2015 at 02:41 PM

    Wonderful! That helps very much! Thank you!