JotForm User Guide / Create Forms /

The Importance of Form Widths

The Importance of Form Widths

What's so important about form widths?

Imagine filling out a form that's too wide for your iPhone. It'd be frustrating, right? Well, think about your forms and your audience. Do you provide a positive user experience? Do you even know which devices your visitors use?

If you don't know or care, your conversion rates will probably be low or at least below the industry average. However, with some simple research and tweaks, you'll be able to give your visitors a better experience with your forms and increase your conversion rates.

1. Know Your Audience

Gather data about your audience with an analytics tool to better understand which devices your users use. If you don't have a clue and or don’t have a mobile page, design for all of them.

2. Know the Device Widths

Design your forms based on the data from step 1. If a large percentage of your visitors come are mobile users and use portrait view when viewing your website, use 320px for your forms.

Here's a list of common widths:

Mobile: 320px for portrait view 480px for landscape view

iPads: 768px for portrait view 1024px for landscape view

Desktop and Laptops: 960px horizontal

3. Change the Form Width. We have two methods:

Method 1: Using the FORM DESIGNER

Click the FORM DESIGNER button > go to the STYLES tab > then change the value of the FORM WIDTH.

Method 2: Using the ADVANCED DESIGNER page

On the DESIGN tab > expand the FORM LAYOUT section > then change the FORM WIDTH.

That's all it takes to change your form width and why it’s so important for your visitors and your conversion rates. How effective was the change for you? Please share your thoughts and experiences in the comments section below.

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support:

Send Comment


  • woodwardf

    Under your new system I am trying to set the width of a field in my form regardless of how many characters I set it to, the length (width) remains unchanged. Am I missing something? I have used your system for years and never had this problem before.

  • SCFootball

    Re jotform -
    I am trying to place 3 fields on a line - U13(1), U13(2) and U13(3) to mirror the U12(1), U12(2) and U12(3) fields below them. I have turned on the "Shrink" and "Move to a New Line" options but I still can't move them. Can you please help me

  • marketingmog

    Hello, I can´t center the form in the mobile view. How can I centre align the form?

  • ThierryJohn001

    How can I get a form to display in "Desktop View" by default on all devices?
    And how do I centre align the form itself using CSS?

  • joelrtaub3939

    I cannot locate the design tab or the Form designer button. I have one form I have not had a problem, but the next form which is going to be basically the same it won't let me get the third short text field in. April challenge worked fine, but Pomeranian rescue does not

  • Gracieroo

    I'm trying to get my form to fit on a mobile screen. The form width setting seems to have no effect...

  • mschuurmans

    Hi - struggling with my form found at
    One of our customers pointed out that the right side of the form (after you expand "year 1" and "year 2") gets cut off...there should be a total of six units. I expanded the width of our form from 690 to 960, but the right-most columns still get cut off...and there is not way to scroll farther to the right. How do I make the columns narrower to fit this form? Thanks!

  • samanthaCC


    I cannot find the "STYLES" or "CSS" tabs on my form, only "THEMES" and "CUSTOM" appear. Is there a reason these would be missing?

  • MDLtd

    BIG PROBLEM - get one form that is satisfactory for BOTH mobile and laptop.

  • martinaV

    Hi, I made the change but the for doesn't "take" it. If I put 1000px, the frame remain 500px.
    What happen?
    This is the link:

    thank you,

  • ProfMbHaneef

    I became able to change width of form

  • neteffects

    How to reduce the width of the space/field made for emails/names and other?
    The outline of the form seems to reduce by changing "form width" but not these fields.
    Any help would be appreciated.

  • DJporter

    is there a way to make them dynamic to be used on both mobile and desktop?

  • savik39

    what about telephone number - there are two columns. I need more width in area field. Please describe

  • zaoas

    how can I get away the two white side bars and the background transparent?

  • JotFormSupport

    Please ask your questions to the forum.

  • Alice

    How do you change the form height?i.e on my sub heading once I copy on my facebook page some texts are cut

  • jbellamy

    How can you increase the spacing between the check box responses. I have it set up for 3 columns and the page width is definitely wide enough to accommodate the text but the check box responses are extremely close to each other.

  • aytekin

    ebsconsulting: Yes, you can change the spacing between fields from "Preferences".

  • ebsconsulting

    Is there a way to decrease the top and bottom padding between fields? so that height of the form also decreases?

  • jotformSupport

    Get the html source code and put as many new line character codes (html - br ) as you want in the code. Height is automatically resized according to the space form elements occupy.

  • born

    and to change the height?