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 to make image full-width

    Asked by kgavriel on January 10, 2017 at 08:46 PM

    Hello,

    I need some help making the header image full-width. So far I was able to remove the shadow-border, make form 100% width (top code) and set image width to 100%, but still cant get rid of the white space. 

    I also need help selecting all the fields so I can set left padding with css. Its easy to select required ones, but not the rest. Only option is to select the form-line, but that moves image as well. 

    Relevant code and screenshots below. 

     

    Thanks! 

     

    .form-all {

        width : 100% !important;

        max-width : none;

        margin-top : 20px;

        padding : 0px;

    }

    ----------------

    .form-image {

        width : 100%;

        height : 100%;

    }

    Page URL:
    https://form.jotform.com/70065517912151

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Charlie on January 11, 2017 at 02:41 AM

    Hi,

    Could you please check this cloned form I have and if that's what you would like to accomplish: https://form.jotform.com/70101054796956. You can clone it to have a copy of it in your account. Here's how: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    I checked your CSS code and updated it to this:

    .supernova .form-all {

        border : 0px solid rgba(0, 0, 0, 0);

        -webkit-box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);

        -moz-box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);

        box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);

    }

    .form-all {

        width : 100% !important;

        max-width : none;

        margin-top : 0 !important;

        padding : 0px;

    }

    .form-html h2 {

        font-weight : 700;

    }

    .jotform-form {

        padding : 0px;

        margin : 0px;

    }

    .form-image {

        width : 100%;

        height : 100%;

    }

    .form-html {

        padding-left : 50px;

    }

    /*Set all the images to 0 padding and set margin-top to 0*/

    [data-type='control_image'].form-line {

        padding: 0 !important;

        margin-top: 0 !important;

    }

    /*Set all fields that are not images to have a margin left and right auto and width to 80%*/

    li:not([data-type='control_image']) {

        margin-left: auto !important;

        margin-right: auto !important;

        width: 70% !important;

    }

     

    The code blocks that I added are the ones at the last part, I added comments on them to guide you better.

    Let us know if that works. 

  • Profile Image

    Answered by kgavriel on January 11, 2017 at 08:27 AM

    Thank you so much Charlie, that is exactly what I'm trying to accomplish! I'll do this and let you know how it went :)

  • Profile Image

    Answered by kgavriel on January 11, 2017 at 09:05 AM

    It worked like a charm! Thanks again. I simply injected your code :)

    https://form.jotform.com/70065517912151