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

    Making the background transparent

    Asked by KPetroff on May 11, 2016 at 11:00 AM

    I have had trouble in the past getting transparent backgrounds. I have learned how to go into the forms code and double check that the code is retaining the transparency or how to change the code to get it transparent. I have lost that ability. Where do I go now to get to the code of the form.

    background transparent css code custom CSS form designer
  • Profile Image
    JotForm Support

    Answered by Jan on May 11, 2016 at 11:57 AM

    If I understand you correctly, you would like to make the form's background transparent through the CSS code. Please check the available options below:

    1. You can easily edit the background using the Form Designer. Under the "Design" tab, click the Background option and slide to the left for it to become transparent.

    You can also use the CSS tab to add your own custom CSS for the background.

     

    2.  In the new Preferences menu, go to the "Form Styles" tab and then go to the "Custom CSS" tab. You can insert your CSS code in the text-area.

    Here's an example of CSS code if you want the form's table to be transparent:

    .form-all {
      background-color: transparent !important;
    }

    Related guide: How-to-Inject-Custom-CSS-Codes

    Let us know if you need further help. Thank you.

  • Profile Image

    Answered by KPetroff on May 11, 2016 at 12:37 PM

    I will have to try this. Just doing the color selection in the form designer has never worked for me. I have always had to change the code under the preferences or forget using a transparent background all together. Thanks!

  • Profile Image
    JotForm Support

    Answered by Jan on May 11, 2016 at 12:56 PM

    I understand, you can easily inject custom CSS to make your background transparent. If you need a help in the CSS code, let us know so that we can help you. Thank you.

  • Profile Image

    Answered by LicenceTT on June 09, 2016 at 03:25 PM

    Hi there, 

    I am trying to make the background semi-transparant and use a failsafe method incase transparency is not supported:

     

    .form-all {

      background-color: rgb(0,0,0); !important;

      background-color: rgba(0,0,0,0.5); !important;

    }

     

    I injected this code in the form, but it does not work. What goes wrong?

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 09, 2016 at 05:37 PM

    Hello LicenceTT, 

    I opened a separate thread for your question since we tend to have a separate thread for each question, and you can find it here.

    Please open separate threads for each question you have so we can assist you more quickly.

    Thank you!