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

  • Profile Image
    IngaSlosarova
    Asked on October 09, 2017 at 06: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


  • Profile Image
    Kiran
    Answered on October 09, 2017 at 08: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.

    Hope this information helps! 

  • Profile Image
    IngaSlosarova
    Answered on October 09, 2017 at 08: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?

  • Profile Image
    IngaSlosarova
    Answered on October 09, 2017 at 09: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

  • Profile Image
    Mike_G
    Answered on October 09, 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.

  • Profile Image
    IngaSlosarova
    Answered on October 09, 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?


  • Profile Image
    IngaSlosarova
    Answered on October 09, 2017 at 10:20 AM


  • Profile Image
    Kiran
    Answered on October 09, 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! 

  • Profile Image
    IngaSlosarova
    Answered on October 09, 2017 at 11:09 AM

    Thanks for your help :)