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

    Is there a way to make sure required field asterisk is next to the label and does not fall under it?

    Asked by Duncan Dexter on April 27, 2015 at 03:39 PM
    also is there a way to make all the red asterisks stay next to there subject as you can see some fall underneath
    custom CSS CSS required asterisk
  • Profile Image

    Answered by Ben on April 27, 2015 at 03:55 PM

    I am looking at your jotform: http://form.jotform.us/form/50846634763160 Duncan and I see what you mean.

    There are few ways to do it with CSS.

    The easiest and quickest ones are with code such as:

    span.form-required {
        float: right;
    }

    and

    span.form-required {
        float: left;
    }

    The first code will show the asterisk right next to the field on the right of the label and be moved away from the label itself in some fields quite a lot.

    The second one will show the label right next to the asterisk, but the asterisk will be on the far left of the label (not on the right as it is now).

    This would be the best way to accomplish what you are after by my opinion, but there is another option and that is to use this code:

    label.form-label {
        width: 200px !important;
    }

    Basically we must make the width of the label bigger than original 150px in order to allow the required mark to be in the same row with the rest of the characters, otherwise it would not fall in properly.

    You can add and experiment with the code above by following the steps here: Inject Custom CSS Codes

    Do note that you should have only one of the 3 options there, not all three at the same time.

    Do let us know how it goes.