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 hide label and red required asterisk?

    Asked by accucut on May 01, 2013 at 05:46 AM

    Trying to create a very compact contact form with NAME, EMAIL, and MESSAGE fields only. Needs to fit inside a 200px container.

    Want all three fields to be required but do not want any field labels or the red required asterisks to be visible.

    Please advise. 

    hide asterisk hide field labels
  • Profile Image
    JotForm Support

    Answered by abajan on May 01, 2013 at 07:05 AM

    Thanks for asking. Here's what to do:

    1. Set the label alignment of the "Name" field to Top like you've done with the "Email" and "Message" fields:


    2.
    Replace the current injected CSS with the following:

    .form-label-top {
    display: none;
    }

    .form-required {
    color: transparent;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-error-message,
    .form-button-error {
    display: none !important;
    }

    .form-validation-error {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    }


    3.
    Align the submit button to the left by clicking it and then clicking Button Align and selecting Left:


    4. Save the form

    (If necessary, the fields can also be brought closer together.)

    Should you need further assistance, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on May 01, 2013 at 07:23 AM

    It may be better to substitute the following CSS for the above:

    .form-label-top {
    display: none;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-error-message,
    .form-required,
    .form-button-error {
    display: none !important;
    }

    .form-validation-error {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    }

    In other words, remove the second rule and add .form-required to the third rule's selector. After all, you want to remove the asterisk (.form-required) not just hide it by making it transparent!

  • Profile Image

    Answered by inverbatranslations on July 14, 2014 at 01:41 PM

    the CSS did not work. Can you please provide more information?. My labels are align to the left an dI have the translator for the form. 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 14, 2014 at 02:01 PM

    Hello inverbatranslations,

    Do you want to remove the error messages as well?

    Upon checking your form, I found that you have just added one css code to hide the asterisk mark from form which seems to work as expected. The asterisk mark is not being displayed in your form anymore. Please check the screenshot below:

     

    Please inject the following custom css code in your from to hide the validation error messages:

    .form-line-error {

    background: none repeat scroll 0 0 !important;

    }

    .form-error-message,

    .form-required,

    .form-button-error {

    display: none !important;

    }

    .form-validation-error {

    -moz-box-shadow:none !important;

    -webkit-box-shadow:none !important;

    box-shadow:none !important;

    }

    The following guide should help you in injecting custom css code :  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!