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

    Need help with custom CSS to align fields properly

    Asked by RogerYelvington01 on April 08, 2015 at 12:19 PM

    Hi Guys!

    I'm trying to format a few edits into my form and I really need some help.  I've attached a picture for reference of what I am trying to accomplish with the form layout.

    http://form.jotformpro.com/form/50968165278973

    Your help is appreciated, thank you!

    Page URL:
    http://form.jotformpro.com/form/50968165278973

    Screenshot
    layout format CSS Custom CSS
  • Profile Image

    Answered by Ben on April 08, 2015 at 02:13 PM

    I wanted to confirm first if the form above is the right one since it seems to not have the gray fields shown, instead a lot of fields with $ signs at the start.

    I would like to recommend to Expand the first two fields as well and when you have all fields set up as you want, do let us know and we can help you with the final layout.

  • Profile Image

    Answered by RogerYelvington01 on April 08, 2015 at 02:22 PM

    They are conditional, the first two drop downs at the top dictate which boxes and fields will show.

  • Profile Image

    Answered by Ben on April 08, 2015 at 04:11 PM

    OK.

    I cloned your jotform and made the changes mentioned above so that CSS can be applied to it properly. This is the resulting form: http://form.jotformpro.com/form/50976209822966

    You can clone it to your account by following the steps here: How to Clone an Existing Form from a URL

    Do let us know if you have any further questions.

  • Profile Image

    Answered by RogerYelvington01 on April 08, 2015 at 04:30 PM

    It doesn't seem to be applying when I clone the form and then try to cut and paste the CSS.  I was also making updates and edit to the form while waiting on a response, so I'm not sure if this updated it.  

    But the form is now complete, can you take a look and possibly just cut and past the CSS code here for me to apply?

     

    Thank you!

  • Profile Image

    Answered by Ben on April 08, 2015 at 05:47 PM

    OK. For the first two fields: Report and Position, you must click on them and then click on the gear wheel in the right corner. Following this, you should click on Expand option.

    Once expanded they will fall in line properly.

    The same should be done for the labelLess widgets under them titled "Current Month:"

    Now if you want to hide the required stars on all fields you should add the following CSS:

    .form-required {
        display: none;
    }

    If you only want to hide the ones on the widgets at the top, you should add this one instead:

    #id_71 .form-required, #id_70 .form-required {
        display: none;
    }

    Once you make them Expanded, they will also get distanced from the left.

    Do let us know how it goes, but please add the code at the bottom of the custom CSS field.