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

    Changing the input field background opacity

    Asked by editiononebooks on July 11, 2016 at 01:41 PM

    Hello

    I have this new form which has a background image. I am trying to figure out how to have the data entry fields appear with a mask / transparency to make them standout from the background image without having them be totally white. Ideally it would appear as a faded / semi transparent background for only the areas where the user will enter info. 

    Thanks!

     

    Ben 

    Page URL:
    https://jotform.com//?formID=61924604405957

    changing input field background custom css opacity
  • Profile Image
    JotForm Support

    Answered by John_Benson on July 11, 2016 at 03:13 PM

    I understand what you mean. You can use this custom CSS:

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input {
    background-color: rgba(46, 97, 132, 0.5) !important;
    }

    Here's a guide on how to add custom CSS to the form.

    The rgba values correspond to the color and the opacity of the input fields. The first 3 which is 46, 97, 132 is the color light blue that has the hex color of #2e6184. While the 0.5 is the opacity. You can adjust it to your preferred values.

    If you want, you can add these additional codes to remove the box shadow and make the border stand out.

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {
    border: 1px solid #1E3D51 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    }

    Here's the result:

    Hope that helps. Thank you.