How can I create transparent background for a form that has a theme applied to it?

  • IngaSlosarova
    Asked on October 9, 2017 at 6:10 AM

    Hi everyone,

    I tried to set the background of the form to transparent. The form has a theme applied to it and I read on one of the forums that injecting css

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

    will solve this issue, however when I applied it, it didn't work


    Did anyone come across it and has a solution?


    If you could help me on that, I'd really appreciate it.

    Thanks a mill,
    Inga


  • Kiran Support Team Lead
    Replied on October 9, 2017 at 8:33 AM

    The code should be working fine any of the forms since the class .form-all is common for all forms. I have tried applying a theme to the cloned version of your form and added the CSS code which worked fine at my end. Please note that it can be best viewed when the form page is having background image or a different color than the form.

    Please see the screenshot of the form before and after applying the CSS code to the form.

    How can I create transparent background for a form that has a theme applied to it? Image 1 Screenshot 20

    Hope this information helps! 

  • IngaSlosarova
    Replied on October 9, 2017 at 8:59 AM

    Hi Kiran,

    Thank you very much for getting back to me.

    I added the css and when the form was embedded on the website it looks like this

    Would you know it is not transparent?

  • IngaSlosarova
    Replied on October 9, 2017 at 9:55 AM

    If it helps in any way, the form is created through form entries, so should it be something that will be changed for form input?

    Any help is highly appreciated

  • Mike_G JotForm Support
    Replied on October 9, 2017 at 10:00 AM

    I would like to apologize for any inconvenience, however, the screenshot that you tried to share with us was not posted together with your response in this thread. To include screenshots in your reply, please check this guide — How-to-Post-Screenshots-to-Our-Support-Forum

    We will be glad to help you with your concern. May we just know the link to the website where you have embedded your form, please?

    We will wait for your response.

  • IngaSlosarova
    Replied on October 9, 2017 at 10:19 AM

    Hi Mike, I tried few more things and  it worked and it is all fixed now:)

    I just have one little thing to ask, the text in send button is not in the centre, what CSS code can I use for that?


  • IngaSlosarova
    Replied on October 9, 2017 at 10:20 AM

    How can I create transparent background for a form that has a theme applied to it? Image 1 Screenshot 20


  • Kiran Support Team Lead
    Replied on October 9, 2017 at 10:50 AM

    Please inject the following CSS code to your to align the button text to center.

    .form-submit-button {

        padding: 0px !important;

    }

    Thank you! 

  • IngaSlosarova
    Replied on October 9, 2017 at 11:09 AM

    Thanks for your help :)