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

    How to move the asterisks of required validation inside the fields?

    Asked by optizign13 on February 06, 2014 at 12:44 PM

    Hello. Whenever I make forms, I use the Hint Example option for text so the text is inside the input area (which is cleaner and nicer looking). Is there n option to make the input/textarea required? I know that there is a "Required" button option but that is placed outside of the input boxes and I don't want that. This will help a lot with spam and such. Please let me know. Thanks! 

    Page URL:
    http://healthy-male.com/contact-us/

    make forms textarea hint thanks
  • Profile Image
    JotForm Support

    Answered by BDAVID on February 06, 2014 at 02:24 PM

    Hi, If you do not want ot have the Required message outside of the Text Area like this, I think is not possible.

    However, you can remove the Highlight Effect:

    Also change the color of the required message by injecting CSS code

    This is the code:

    .form-line-error input:not(#coupon-input),

    .form-line-error textarea,

    .form-validation-error {

    border: 1px solid #F8F8F8

    ;

    -moz-box-shadow: 0 0 2px red;

    -webkit-box-shadow: 0 0 2px #eee;

    box-shadow: 0 0 2px #F8F8F8

    ;

    }to.form-line-error input,

    .form-line-error textarea,

    .form-validation-error {

    border: 1px solid #F8F8F8

    ;

    -moz-box-shadow: 0 0 2px #F8F8F8

    ;

    -webkit-box-shadow: 0 0 2px #eee;

    box-shadow: 0 0 2px #F8F8F8

    ;

    }.form-line-error {

    background: none;

    }.form-line-error .form-error-message {

    background: none;

    color: black;

    }

    Since what you trying to avoid is things such as spam, you can also add a captch field:

    Hopet this helps you, if you have another questions please open a new thread.

  • Profile Image

    Answered by optizign13 on February 06, 2014 at 02:44 PM

    Hello. Sorry, I think you misunderstood me. I understand the captcha option is used for security, and I will use that as a 2nd option. However, I am trying to acheive something else. 

    Once I click the red "required option" button, the red * is outside of the input area.

    My quesiton is: If there is a way to have/move the red * INSIDE the input area (as oppose to outside)? If I simply add "*" under "Hint Example," the required option will not be applied. 

    Bascailly, it doesn't make sense to have only the red * outside the input box when the rest of the text is inside (using Hint Example).

    I hope that helps clarify what I am trying to achieve. Thanks. 

  • Profile Image

    Answered by EliezerN on February 06, 2014 at 04:05 PM

    Thanks for the explanation.

    We can move the red asterisks inside the fields, however, they will not dissappear at the time of typing into the fields. I moved the asterisks as you wish in a cloned form and here it is: http://form.jotformpro.com/form/40365781186965

    What you can do is to set the fields as required, remove the red asterisks using CSS code and then put the asterisks as hint text so that people can know the fields are required.

    Here is an example form: http://form.jotformpro.com/form/40366750948968

    You can clone my form if you think is useful for you. Here is how to clone it: How to clone an existing form from a URL

    I used this CSS code to hide the asterisks:

    .form-required

    {

    display:none !important;

    }

    I hope this helps. Inform us if you need further assistance with this inquiry.

    Thanks

  • Profile Image

    Answered by optizign13 on February 25, 2014 at 07:41 PM

    Hello. Thank you for the code! It works well. 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 25, 2014 at 09:40 PM

    Hello optizign13,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!