How to position asterisk on required field for a plain check box agreement field?

  • montsho
    Asked on July 2, 2015 at 11:39 PM
    Also, I know I could just use the basic checkbox but the asterisk (required field) would be in a completely different place. It makes the form look sloppy. Is there a way to put the asterisk where I want it to be? I guess that's two questions...
  • Charlie
    Replied on July 3, 2015 at 12:06 AM

    You can position the asterisk using custom CSS code if you are using the plain check box field for the agreement field.

    Here's my sample form: http://form.jotformpro.com/form/51828488514970?

    Here's the steps how I edited mine.

    1. First, open the form in your Form Designer tool.

    How to position asterisk on required field for a plain check box agreement field? Image 1 Screenshot 60

    2. First, we want to select the specific element, you can do that by hovering on the fields and double clicking them. In this case, I want to change the blank label with the asterisk. I want to change its width.

    How to position asterisk on required field for a plain check box agreement field? Image 2 Screenshot 71

    3. After double clicking, you'll see in the CSS area its specific CSS path or selector. We can now design or style that specific element. Here I just changed the width.

    How to position asterisk on required field for a plain check box agreement field? Image 3 Screenshot 82

    4. I then repeat the same process but I'm selecting the actual asterisk.

    How to position asterisk on required field for a plain check box agreement field? Image 4 Screenshot 93

    5. After double clicking the asterisk, you'll see its CSS path or selector at the right side. I then positioned it using this code:

    CSS path or selector {

    position: relative !important;

    left: 20em !important

    }

    How to position asterisk on required field for a plain check box agreement field? Image 5 Screenshot 104

     

    You'll see that the asterisk is now placed at the end of the text. To learn more about the Form Designer Tool and the custom CSS code, you can check these guides:

    http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- 

    http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes 

     

    I hope that somehow helped. Do let us know if you need more information on this.

    Thanks.

  • montsho
    Replied on July 6, 2015 at 7:20 AM

    Thanks. A few years back, I left you guys and paid for Formstack. They were just awful. JOTFORM IS SO WORTH IT. Small business owners everywhere need to know about your service. It's more than just forms. #itseverything

  • BJoanna
    Replied on July 6, 2015 at 10:34 AM

    On behalf of my colleague, you are welcome.

    Also thank you for your kind words. We are happy to hear that you are satisfied with JotForm.

    Feel free to contact us if you have any other questions and we would be happy to assist you.