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 do I remove the background colour so that the background is the website?

    Asked by mytaxco on September 29, 2013 at 05:58 AM

    i wish the forms to 'float' on top of my site 

     

    at the moment the background is 'white'

     

    Page URL:
    http://mytax.co/expenses.html

    Screenshot
    colour background colour transparent none color
  • Profile Image
    JotForm Support

    Answered by EltonCris on September 29, 2013 at 06:19 AM

    Hi,

    Inject this CSS codes to your form. This makes the form background to transparent.

    body, .form-all{

    background:none !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    You can also turn off the highlights effect on your form when clicking the fields. Here's how:

    Hope this helps. Let us know if you need anything else. Thanks!

  • Profile Image

    Answered by mytaxco on September 29, 2013 at 06:34 AM

    hi 

     

    ive done both and it did not work! 

     

    please help

  • Profile Image
    JotForm Support

    Answered by Tasha on September 29, 2013 at 07:59 AM

    Hi,

    In addition to what EltonCris provided please also inject the following css. 

    body, html {

    background: none !important;

    }

    Thanks!

  • Profile Image

    Answered by mytaxco on September 29, 2013 at 10:37 AM

    i have done that and its not working... please help!

    Inject Custom CSS
    Add your own CSS code to your form. You can change every aspect of the form by using CSS codes. For example:
    .form-line-active { background:lightblue; color:#000000; }will change the selected line's background color on the live form.

    Using Firebug or similar tools will help you identify class names and defined styles.
    .body, .form-all{background:none !important;}
  • Profile Image
    JotForm Support

    Answered by Tasha on September 29, 2013 at 10:55 AM

    Hi,

    The css that you injected is not the one that I provided. Please replace the .form with html and remove the . from infront of body.

    body, html {

    background: none !important;

    }

    Thanks!

  • Profile Image

    Answered by mytaxco on September 29, 2013 at 11:29 AM

    ive changed it again and still no joy 

     

    Inject Custom CSS
    Add your own CSS code to your form. You can change every aspect of the form by using CSS codes. For example:
    .form-line-active { background:lightblue; color:#000000; }will change the selected line's background color on the live form.

    Using Firebug or similar tools will help you identify class names and defined styles.
    body, html { background: none !important; }
  • Profile Image
    JotForm Support

    Answered by abajan on September 29, 2013 at 12:00 PM

    @mytaxco

    Please try substituting transparent for none and let us know if that helps to resolve the issue. From my understanding of the CSS 2.1 Spectransparent should be used to override background colors while none should be used to hide background images. This fiddle demonstrates the difference between the two values. In the second rule of the CSS, change the value of the declaration from transparent to none and then click "Run" to display the result. You'll discover that although the second rule would normally take precedence over the first, it becomes ineffective and as such, the first rule sets the background of the Result pane to red.

    If this change doesn't help either, please provide the URL of the web page within which the form is embedded, so that we can examine its source for possible conflicts between the page's CSS and that of the form.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on September 29, 2013 at 12:13 PM

    Hang on ... My solution doesn't work either. Let me experiment a bit and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on September 29, 2013 at 12:29 PM

    LOL, it's actually much simpler than we've been telling you. First remove the injected CSS and then see this guide.

    Once the form becomes transparent, you'll immediately notice that its labels and other text become hard to see. To correct this, click the Font Color button (on the same Form Style tab that has the Background tool) and either drag the little circle in the color square to the upper left corner or enter #FFF (or #FFFFFF) in the box and then click OK and save the form.

  • Profile Image
    JotForm Support

    Answered by abajan on September 29, 2013 at 12:35 PM

    Incidentally, if you don't wish the pink background when an error is triggered (as in your screenshot), inject the following CSS:

    .form-line-error {
    background: transparent;
    color: #FFF;
    }

  • Profile Image

    Answered by mytaxco on September 29, 2013 at 01:58 PM

    your a hero... thanks a million

  • Profile Image

    Answered by khrisell on September 29, 2013 at 02:30 PM

    Hello,

    In behalf of my colleagues, you are most welcome!

    We are glad to assist you on your JotForm needs.

    Feel free to contact us anytime if you need any assistance.

    We're here to help.

    Thank you for using JotForm. :)