Making the background transparent

  • ZZLocal
    Asked 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.

  • Jan
    Replied 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.

    Making the background transparent Image 1 Screenshot 40

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

    Making the background transparent Image 2 Screenshot 51

     

    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.

    Making the background transparent Image 3 Screenshot 62

    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.

  • ZZLocal
    Replied 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!

  • Jan
    Replied 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.

  • LicenceTT
    Replied on June 9, 2016 at 3: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?

  • Nik_C
    Replied on June 9, 2016 at 5: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!