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

    Form and page background looks very odd

    Asked by xagolab on June 28, 2015 at 12:04 PM
    2.  Using background color on the form, the form color bleeds out of the desired width and adapts to the width of the page content which looks very odd
    form background page background
  • Profile Image
    JotForm Support

    Answered by Welvin on June 28, 2015 at 12:11 PM

    You can remove the form and page background if you want to. Just click transparent selector in the form designer:

    Or, you can inject the following custom CSS codes:

    body, html {

    background: transparent !important;

    }

    .form-all {

    background: transparent !important;

    }

    Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Thanks

  • Profile Image

    Answered by xagolab on June 28, 2015 at 12:24 PM

    I do want soft background color but I do not want the background color of the form width to bleed and take on the width of the page content width.  Currently that's what it is doing which look very odd.  How can I restrict the bleeding part of the color from form to stay within the form and not take the width of the page content width.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Jan on June 28, 2015 at 03:35 PM

    If I understand you correctly, you would like to have the same background as the webpage right?

    You can use the code provided by Welvin above. If it did not work, then instead of using "transparent" then use the color "white" or "#ffffff". Here's an example code.

    body, html {

    background: #ffffff !important;

    }

    .form-all {

    background: #ffffff !important;

    }

    If this is not what you need then please provide more details so we can assist you properly. Thank you.

  • Profile Image

    Answered by xagolab on June 28, 2015 at 03:45 PM

    Let me explain.

    For example:

    My form width is 700px.  All my fields are within 700px and I have set a background color of the form to black which is filled in 700px.  So far so good

    My webpage content width is set to 1200px.  So when I add the code of the form to my content/container width of 1200px, the black color fills the 1200px instead of staying contained within 700px on my page.

    Why does the black color bleed into the container width of 1200px instead of staying within the form width of 700px?

    This makes my whole page look ugly.  This is just an example.  Not to say I was using black color.  LOL.  But I think you get the idea now.

    Currently I have modified my form width to almost match my content width so that I don't see this problem but I really didn't wanted to but I saw no option.

    So, do I have an option? 

  • Profile Image
    JotForm Support

    Answered by Jan on June 28, 2015 at 07:41 PM

    I checked your webpage and  I didn't see any issues with the width or with a black background. Is this the webpage you're referring to? http://www.xagolab.com/servicerequest

    The background color of the form and your webpage are not the same.

    I created an illustration based on the description you said about the issue. Is this correct?

    When you embed the form using iframe, you need to adjust the width of the iframe. When I checked your webpage, it shows that the iframe width is 100% which means it will occupy the whole container. Here's an example code:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51764160633150" frameborder="0" style="width:100%; height:3742px; border:none;" scrolling="auto"></iframe>border:none;" scrolling="auto">

    You can change the width value to 700px. So it should look like width: 700px;

    Hope this helps. Thank you.

  • Profile Image

    Answered by xagolab on June 28, 2015 at 07:45 PM

    Precisely.  Thank you.  You solved my problem.  I appreciate you understanding my concern.  I am not a programmer and I have been having this issue every time I embed the code.  It fills the background color from the form to the content no matter what I dd.

    But now I see where my mistake has been.  Wow.  Thanks.

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 29, 2015 at 04:13 AM

    On behalf of my colleague, you are welcome.

    Feel free to contact us if you have any other questions.