The importance of form widths

Last Update: June 6, 2016

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 & 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 & tweaks, you'll be able to give your visitors a better experience with your forms & 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 forms knowing the data from step 1. If a large percentage of your visitors come from smartphones & use portrait view for using your website, use 320px for your forms.


Here's a list of common widths:

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

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

Desktop & Laptops: 960px horizontal


3. Change the Form Widths. We have to two (2) methods.

You can change the form width in the Preference section. Please follow the steps below:

a. Click the "Preferences" button



b. Click "Form Styles" tab and change the value in Form Width:



You can also change the form width in the Form Designer. While in the Form Designer, click "Form Layout" tab and change the form width value:





That's all it takes to change your form width & 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.


14 Comments...


   
born (October 22, 2010 at 08:17 AM)

and to change the height?


   
jotformSupport (October 25, 2010 at 05:33 AM)

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.


   
ebsconsulting (January 16, 2011 at 10:42 AM)

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


   
aytekin (January 17, 2011 at 03:08 AM)

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


   
jbellamy (January 20, 2011 at 10:09 PM)

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.


   
Alice (February 25, 2011 at 01:05 AM)

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


   
JotFormSupport (February 25, 2011 at 01:58 AM)

Please ask your questions to the forum.


   
zaoas (February 24, 2012 at 04:47 AM)

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

View Answer


   
savik39 (August 22, 2012 at 12:56 PM)

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

View Answer


   
DJporter (September 16, 2013 at 02:34 AM)

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

View Answer


   
neteffects (October 18, 2013 at 05:01 PM)

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.
Thanks.

View Answer


   
ProfMbHaneef (May 23, 2015 at 08:59 AM)

Thanks
I became able to change width of form


   
ProfMbHaneef (May 23, 2015 at 09:01 AM)

What kinds of "Text Box" we can make on Jot form ?

View Answer


   
3dliving (August 31, 2015 at 11:12 PM)

I don't understand this. If you make your form responsive cant you do away with different width changes???

Just like this post suggests...

https://www.jotform.com/answers/268428-is-there-a-way-to-make-them-dynamic-to-be-used-on-both-mobile-and-deskt

View Answer


Send Comment