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

    Background color for...

    Asked by Tellmemore on September 19, 2012 at 01:40 AM

    I'm using the Google sites gadget (http://hosting.gmodules.com/ig/gadgets/file/102235888454881850738/jotform.xml).  

    Is there a way to make the background something other than white, or better yet, tansparent?  See my page for what I mean.  You'll see the white background; but when you click 1 or 2 stars, the form covers up the white.  I'd like the white to better match the colors of the page.

    https://sites.google.com/a/dslextreme.com/storyteller/guestbook/FillinEmailForm#stars

    I look forward to your replies.  Thank You!

    Page URL:
    https://sites.google.com/a/dslextreme.com/storyteller/guestbook/Fillin<br/>EmailForm#stars

  • Profile Image
    JotForm Support

    Answered by Rodjit on September 19, 2012 at 02:47 AM

    Hi Tellmemore,

    Here are the steps to make your form transparent:

    1) Open your form in edit mode,
    2) On the top toolbar Click on "Form Style" Tab
    3) Click on Background
    4) Write "transparent" (without the quotes) in the text box
    5) Click OK
    6) Save your form


     

    Hope this helps.
    Rodjit
  • Profile Image
    JotForm Support

    Answered by idarktech on September 19, 2012 at 02:55 AM

    In addition to Rodjit, after making your form background to transparent you may inject the following CSS code to your form:

     

    body, html {

    background-color: transparent !important;

    }

    Follow this guide: How to Inject Custom CSS Codes

    Let us know if you have any other questions or concerns. Thank you!

  • Profile Image

    Answered by Tellmemore on September 19, 2012 at 04:02 AM
    Thank you for your reply!
    Well, I entered the text you provided, but all it does is increase the
    amount of white around my form. Any other suggestions? And, what is "
    Rodjit"?
    I look forward to your reply. Thank You!
    --------------------------------------
  • Profile Image
    JotForm Support

    Answered by idarktech on September 19, 2012 at 04:14 AM

    @Tellmemore

    You can try my suggestion above. Please Inject this CSS codes (updated one) to your form:

    body, html, .form-all {

    background-color: transparent !important;

    }

    This should help. Thank you.

  • Profile Image

    Answered by Tellmemore on September 19, 2012 at 07:15 AM
    Well, nothing is working; whatever I input, a white backgr still appears.
    I give up! I'll just have to stick with the unattractive, shocking white
    backgr. If you think of anything else, I'll give it a try.
    Signing off for now; thank you for your help!
  • Profile Image

    Answered by pinoytech on September 19, 2012 at 07:44 AM

    @Tellmemore,

    I have check your webpage where your form is embedded and found out that on your body tag of your webpage set a background-color to white. Please take a look screenshot bellow:

    Hope this help.

  • Profile Image
    JotForm Support

    Answered by idarktech on September 19, 2012 at 10:29 AM

    @Tellmemore

    As mentioned by pinoytech, the white background is something to do with google iframe's background. Unfortunately there's no way to edit it. However, to overcome this you may have to re-embed your form using iframe code with google's Embed gadget.

    First, get your form's iframe embed code and include the following CSS code above it before embedding.

    <style>

    body{

    background-color: transparent !important;

    }

    </style>

    Check this screen:

    Click the image to zoom

    Let us know if you can't get it working. Thanks!

  • Profile Image

    Answered by Tellmemore on September 19, 2012 at 03:59 PM
    idarktech:* *OMG--Exactly what I was looking for!!! Thank You! Thank You!
    :)
    AND, Thank You everyone else too for your responses!
  • Profile Image
    JotForm Support

    Answered by idarktech on September 20, 2012 at 04:02 AM

    Happy to hear it. Cheers!