Can we position the "required" asterisk to the right of the field, not at the end of label?

  • tracy_surmd
    Asked on May 15, 2015 at 1:19 PM

    My client is requesting that the red "required" asterisk be directly next to the form field on the right. Currently it is on top of the field where the label would be. We're not using labels, just hints in the field. How do I do this?

     

    Thanks!

  • Ben
    Replied on May 15, 2015 at 3:20 PM

    Yes, you could achieve that (on the form above), by adding the following CSS code to your jotform:

    .form-line.jf-required > div:after {
        color: red;
        content: "*";
        float: right;
        margin-bottom: -20px;
        position: relative;
        right: -8px;
        top: 5px;
    }

    This will add the asterisk behind the field.

    You can see here how to add it to your jotform: Inject Custom CSS Codes

    Please add it behind all the other code that you see in there and do let us know how it goes.

  • tracy_surmd
    Replied on May 19, 2015 at 5:59 PM

    Ben, your answer seems to be working for most of the required fields, but not all, and I can't figure out why. I thought it might be that the label alignment was different on the ones that aren't showing up, but changing that didn't make a difference. All fields are required except for phone number and address. This is also showing sub labels under the fields, which isn't necessary since I have the hint text in the fields now, which I didn't have set before. When I click on them they say that the label won't be shown on the form, but when I preview it it shows. 

     

    http://www.jotform.us/form/51344598525159

  • raul
    Replied on May 19, 2015 at 6:57 PM

    Please allow us some time to work on this and see if we can find the necessary CSS code to affect all the fields in your form.

    We'll let you know here once we have any news about this.

  • tracy_surmd
    Replied on May 27, 2015 at 1:55 PM

    My client has now decided that they just want to do regular top aligned labels, so the red asterisk can go next to that. I tried just deleting the CSS code from above, but no matter what I do the top labels still don't show up, and sub labels are still showing up on some fields. HELP!!! http://www.jotform.com//?formID=51344598525159#

  • David JotForm Support
    Replied on May 27, 2015 at 3:16 PM

    You can revert your form back to any previously saved state using your form revision history:

    http://www.jotform.com/help/294-How-to-View-Form-Revision-History

    Once you have your form back to a previous version that is acceptable, let us know the specific changes you would like made.  It seems there has been quite a lot added to this form already so if you could get the form back to a suitable state, we can help you to adjust it from there.