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 stretch the background image of my contact form to full width

    Asked by nickius on August 18, 2016 at 06:31 AM
    Also, how do i stetch the background image of my contact form to full width. I tried using jotform-form: width 100%  but it did t work. Im using the brick template for my form. Kabbagehome.com Thank you 
  • Profile Image
    JotForm Support

    Answered by Boris on August 18, 2016 at 06:41 AM

    Please try adding the following custom CSS to your form:

    .supernova {
        background-image: url("https://s3.amazonaws.com/jufs/EltonCris/form_files/brick-wall.jpg")!important;
        background-size: cover !important;
    }

    You can add CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The above CSS code should make your embedded form appear like this:

    Please let us know how it goes, or if any additional tweaks are needed. Cheers

  • Profile Image

    Answered by nickius on August 18, 2016 at 10:36 PM

    Okay, but I need the image to cover the full width of my website. What css command should I use for the image to cover the whole page?

  • Profile Image
    JotForm Support

    Answered by beril on August 19, 2016 at 03:05 AM

    The CSS code that provided by my colleague covers the whole page. In addition to that, you can also try the CSS code below:

      .supernova {

      background: url("https://s3.amazonaws.com/jufs/EltonCris/form_files/brick-wall.jpg") no-repeat center center fixed; 

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

    }

     

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by nickius on August 19, 2016 at 03:13 AM

    The image still doesn't cover the whole width of the page. The are white spaces on both sides of the webpage. 

  • Profile Image
    JotForm Support

    Answered by beril on August 19, 2016 at 04:42 AM

    Thank you for providing the screenshot of your issue. Could you please indicate the URL of your page? This will help us better analyze the problem. We will wait for your response.

  • Profile Image

    Answered by nickius on August 19, 2016 at 01:12 PM

    Kabbagehome.com

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 19, 2016 at 02:47 PM

    I checked your website and the form is properly embedded in your page.

    However, the spacing you see around the form is part of the container style in your page not with the form. This container has a fixed width of 960px and it is centered on the page. Since the embedded form is under this container, the form width can't go beyond its container width.

    Here's a visual image that shows the width of the div element with class .container where the form is embedded.

    The easiest way to resolve this is to edit the container width in your website main_style.css file from 960px to 100% under .container class. You can ask your web developer to do this if you are not familiar with editing your website CSS.

    If you have more questions, let us know.

  • Profile Image

    Answered by nickius on August 19, 2016 at 05:09 PM

    Thank you. How Can I gain access to the main_style.css file?

  • Profile Image
    JotForm Support

    Answered by david on August 19, 2016 at 06:42 PM

    The file should be hosted on the server where your website is hosted.  It is not something we will have access to.