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

    Can I change the size of the form on different pages?

    Asked by GuyPalinckxLS on January 27, 2017 at 10:30 AM

    On my first page, there is a little text but oin the second page, i work with colomns and I would like to make is larger.

    So first page smal, second pages larger.

     

    Is this possible?

     

    GP

  • Profile Image
    JotForm Support

    Answered by Boris on January 27, 2017 at 11:47 AM

    If you are asking about having your form wider when you navigate to page 2, yes, this is possible by using some custom CSS.

    However, I'm afraid this may conflict with themes you decide to use later on, or with the color options you try to use within the Designer, because the width of the form is declared on the element that contains all your individual pages - element .form-all.

    So, in order to have individual pages shown with a different width, we would first need to undo the width constraints on the .form-all element, and remove any background from it:

    .form-all {
        background: none;
        width: 100%;
    }

    Then, we would need to set the background, width, and centering on each individual page of your form:

    .form-all > .page-section {
        background: #D9CEB2;
        margin: 0 auto;
        width: 100%;
        max-width: 700px;
    }

    Finally, we would set up specific different widths for those other pages, such as page two of your form:

    .form-all > .page-section:nth-of-type(2) {
        max-width: 900px;
    }

    The number 2 marked in red denotes which page the code should apply to, and 900px tells it to be 900 pixels wide. You can add CSS codes into your form by following this guide:

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

    Please do keep in mind that as this is customizing your form in a non-default way, there could be some styling conflicts when you use the Designer for customizing the appearance of your form later on.

    Let us know should you need any further assistance, and we'll be glad to help.

     

  • Profile Image

    Answered by GuyPalinckxLS on January 29, 2017 at 07:14 AM

    Hi

    And thx for your answer.

    I’ve tried to enter it as you suggested but it doesn’t work.

    Could you please take a look?

    It only shows page 1, but doesn’t change the size of page 2

     

    Thanks

    GP

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 29, 2017 at 11:03 AM

    Please try to remove this part of the CSS code from page-section class:

    And then try to set some fixed width for the second page:


    Try to set some number, for example 600px or 700px.

    Do let us know how this worked for you.

    Thank you!

  • Profile Image

    Answered by GuyPalinckxLS on January 30, 2017 at 03:00 AM

    Hi

     

    i tried what you suggested but it didn't work. Other suggestion?

    I would like to have two colomns on the sexcond page, therefore, it needs to be bigger.

     

    Thanks again

     

    GP

  • Profile Image
    JotForm Support

    Answered by candy on January 30, 2017 at 04:01 AM

    Hello,

    I've checked your account in order to understand which form do you working on for the CSS issue. As I have understood, you have mentioned about the following form of yours: http://www.jotformeu.com/form/70253342773353. Tell me if I am wrong.

    If you set the page size as "1100px", the second page will be divided into 2 columns automatically as you can see the screenshot below:

     

    However, the first page has to be 1100px as well as the following screenshot below:

     

    Unfortunately, it is not possible to set different sizes for each page.

    I have also checked your CSS codes that you have already injected to your form. I would like to inform you about that you will have problems with injecting the following CSS code into your form on the Internet Explorer: ".page-section:nth-of-type(X)"

    Please consider setting whole form size as "1100px" as a solution on the form designer.

    Thanks.

  • Profile Image

    Answered by GuyPalinckxLS on January 30, 2017 at 04:09 AM

    Hi

    and thx again for the quick help.

    I removed all CSS code to be sure that nothing is left behind.

    I'm still learning with CSS :) but now, my first page doesn't look normal, but my second page is great .

    Wath do I need to enter so my first page will be centered and ok?

     

    Thanks again

     

    GP

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 30, 2017 at 04:54 AM

    Please copy and paste the below CSS so it will center all elements in the first page:

    #id_8{

    margin-left:300px;

    }

    #id_2{

    margin-left:300px;

    }

    #id_4{

    margin-left:300px;

    }

    #form-pagebreak-next_28{

    margin-left:300px;

    }

    It will look like this after applying the above CSS:

    Hope this is what you had in mind.

    If you need any further assistance please let us know.

    Thank you!

  • Profile Image

    Answered by GuyPalinckxLS on January 30, 2017 at 05:16 AM

    Great!

    thanks a lot!

    Last question :) at the bottom, I have a calculated field.

    Can I center only this field?

     

    Thanks

    GP

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 30, 2017 at 05:48 AM

    Hello GP,

    Please inject the following custom css code in form to center align the form calculation widget:

    li#id_17 {

        margin-left: 37%;

    }

    The following guide should help you how to inject custom css code:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you need any changes.

    Thank you!