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 increase width of the form while maintaining the 2 columns?

    Asked by neoranking on April 06, 2016 at 11:49 PM

    How can I increase the width of the form with maintaining the 2 columns and centered?

    This is my form:

    Thanks.

    Best regards.

    Page URL:
    http://encemarketing.com/landing-page/

    increase how JotForm div thanks and
  • Profile Image
    JotForm Support

    Answered by mert on April 07, 2016 at 03:50 AM

    Hi there,

    By injecting custom CSS rules to your form, you can easily increase the width of the form. Adjusting the "max-width" value from the code below will give you the desired width.

     

    .form-all {

        width: 100%;

        max-width: 726px !important;

    }

     

    ul.form-section.page-section {

        width: 620px !important;

        margin: 0 auto;

    }

     

    Also, alignment in two columns will be protected. Please, try this one and let us know the results.

    Regards.

  • Profile Image

    Answered by neoranking on April 07, 2016 at 05:51 AM

    There's no difference Mert.

    http://encemarketing.com/landing-page/

  • Profile Image
    JotForm Support

    Answered by mert on April 07, 2016 at 07:41 AM

    Hi again,

    I noticed that there are some other custom CSS rules which have added before, that's why the code I gave doesn't affect correctly on your form. So, please delete the complete CSS code after "/* | *//*__INSPECT_SEPERATOR__*/" and paste the one from the below:

     

    .form-label-top {

    display : none;

    }.form-required {

    color : transparent;

    }.form-line-error {

    background : none repeat scroll 0 0;

    }.form-error-message,

    .form-button-error {

    display : none !important;

    }.form-validation-error {

    -moz-box-shadow : none;

    -webkit-box-shadow : none;

    box-shadow : none;

    }input {

    width : 100%;

    }.form-col-1 {

    width : 100% !important;

    max-width: 371px !important;

    }textarea#input_7 {

    width : 100%;

    height : 265px;

    position : absolute;

    }.form-captcha {

    position : absolute;

    }.jotform-form {

    padding : 0px 0;

    }#id_12 {

    margin-top : -70px;

    height : 100px!important;

    }#id_7 {

    margin-top : -240px;

    height : 265px!important;

    }.form-all {

    width : 100%;

    max-width : 800px !important;

    }ul.form-section.page-section {

    width : 747px !important;

    margin : 0 auto;

    }

     

    Please, don't worry this is only changing the size of the form and fields, all of the features apart from those will stay. Also, you can see its final look from the following image:

     

    I hope this one helps, please do let us know the results.

    Thanks.