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 adjust the opacity of a form's background?

    Asked by Andrew12345 on October 28, 2011 at 04:23 PM

    How do I make the page transprent so that it has a some opacity. Im looking for something like this:

    As you can see My background is in the back and I want my form similar to the front/center part maybe more dark so others can read it. Can you give me the CSS or tell me what to do step by step.

     

    Thanks

  • Profile Image

    Answered by yasinco on October 28, 2011 at 05:21 PM

    Im sure you just have to ujust the bacjground color to #FFFFFF as an html, its buit in feature.

    I hopw this helps.

    ~Yasin

  • Profile Image

    Answered by fxr on October 28, 2011 at 05:50 PM

    Can you try in Preferences -> Form Styles -> Background

    type in 'transparent '

     

     

    Let us know if that works.

     

    Thanks. 

  • Profile Image
    JotForm Support

    Answered by abajan on October 28, 2011 at 10:51 PM

     

    Andrew12345, with due respect to my colleague, from your screenshot it appears that rather than the form having a totally transparent background, you wish it to have just a partially transparent one. My findings are that this would only be possible if the full source of the form were to be embedded into the page.

    Here's a clone of your form embedded in a page. (In case the form contains info you don't want revealed to the general public, I have set the thread to "Private".) View the source of the page and take note of the .form-all rule. A combination of the info found at this link and this one helped me to come up with the solution. (For some reason, I was unable to make conditional comments work in this case and had to use the "\9" hack instead, as described at the second link.)

    If you intend to use this solution, there are a couple things that should be borne in mind:

    * In order to accommodate IE 8, the page must have a strict doctype (see the top of the page)
    * Changing the order of the background declarations will likely stop the opacity magic from working in IE.

    If you need additional help with this, do let us know.

    EDIT: As described below, it was subsequently discovered that embedding a form's full source is unnecessary for this to work.

  • Profile Image
    JotForm Support

    Answered by abajan on October 29, 2011 at 06:33 AM

    Good News!

     There's actually no need to embed the full source. The short embed method (used here) is sufficient. (My tests so far suggest that this will not work with an iFrame, which is odd because as our user guide article titled "So, Which Embed Code Should I Use" states, "...The [short embed option] basically creates an iFrame on the fly...". I'll have to run additional tests.)

    Originally, when I thought that conditional comments would have been required to achieve partial opacity in IE, I erroneously thought that the Inject CSS facility would have stripped the comments' tags.

    Incidentally, here is the CSS that should be injected.

    UPDATE: Subsequent tests have shown that it works with iFrames too.

  • Profile Image

    Answered by Andrew12345 on October 29, 2011 at 04:03 PM

    Good so far, we'll keep in touch if anything unusual occurs.

  • Profile Image
    JotForm Support

    Answered by abajan on October 29, 2011 at 04:09 PM

    Glad to be of assistance.

    Cheers