How to hide label and red required asterisk?

  • Profile Image
    accucut
    Asked 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. 

  • Profile Image
    abajan
    Answered 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
    abajan
    Answered 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
    inverbatranslations
    Answered 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
    ashwin_d
    Answered 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!