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

    How to set a transparent background with form designer

    Asked by drazek on July 08, 2015 at 05:07 PM

    how to style to go with WP theme

    we're having hard time styling the form to have a background transparent .. the white background around the field and inside the field just doesn't look good

    the jotform designer doesn't seem to work ... any ideas?

    http://www.cssdiet.com/v2/

     

    jotform designer background transparent
  • Profile Image
    JotForm Support

    Answered by Mike on July 08, 2015 at 06:54 PM

    Thank you for contacting us.

    Please try injecting the next CSS in order to set the transparent background on form.

    .supernova {
    background : transparent;
    }

    If you need any further assistance on this, please let us know.

  • Profile Image

    Answered by drazek on July 13, 2015 at 08:50 PM

    that doesn't seem to work .. http://cssdiet.com/v2

  • Profile Image
    JotForm Support

    Answered by Charlie on July 14, 2015 at 02:21 AM

    Hi,

    Is this the form you are referring to?

     

    May I know how you have embedded it? Did you use a plugin similar to a pop up or a modal? It seems like the element wrapping the form has its own background color.

    Here's a step by step on how you can make your background to transparent, do take note that this applies on the form itself:

    1. First, navigate to "Preferences"->"Form Styles"->Change "background" to "transparent"

    2. After that, make sure that the changes are save.

    3. Now navigate to your Form Designer Tool and add this custom CSS code.

    .supernova, .form-all, .jotform-form {

        background-color : transparent !important;

    }

     

    4. To test the form, close your Form Designer Tool and click the Preview button.

     

    Try embedding that form with the changes and see if it gives you a better result. However, make sure though that the element wrapping the form itself has the color that you want because it will be the background color that will show because of the transparency of the form.

    Do let us know if that works.

    Thanks.

  • Profile Image

    Answered by drazek on August 10, 2015 at 08:11 PM

    it's still not perfect

    http://www.cssdiet.com/v2/

    the email address field is small comparing to the submit button

    the email address field has transparent background too (therefore barely visible)

    you can see a form border on ipad (it's subtle but it's there)

    the error message you get when clicking on email field and submitting (without entering anything) changes form background to white

  • Profile Image
    JotForm Support

    Answered by Charlie on August 11, 2015 at 12:49 AM

    Hi,

    Could you tell us what form you are referring, I see there are two pars where the form is showing.

    This one:

     

    And the other one is in a pop up or a modal.

     

    If you could share us a screenshot of what you would like it to be, that would help us a lot. We'll wait for your response.