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.
Make form width and columns expand in full widthAsked by LeonardDoctor on February 12, 2016 at 02:28 PM
need to create a form that will be almost as wide [or as wide] as a standard web page.
i realize there are settings for width, but what should i set for that?
Also, is there a divider i can put vertically in that form? i want 2 columns in desktop view, but when viewing with a mobile, the second column [that is in the desktop view] appears below the entire first column. thanks.
To make your form expand in full - 100% width, simply inject this CSS code to your form.
To create 2 columns, just shrink the fields (right click the field > shrink) and make sure to move every field on the first column to a new line.
After that, go to Form Designer and check responsive and enable form columns checkboxes under Form Layout.
If you see any problems on mobiles after that, please let us know the form URL you're working on so we can assist you further.
confused. why do the custom code? whey not just [below 'form layout' ] set maximum width to... [not sure what it should be set to]
Re: To make your form expand in full - 100% width,
1. I see u say to enter code, but before I sent this I saw the section where I put the green arrow
2. Would it accomplish the same thing just to set that at ? pixels? If so, how many
Leonard Slates & Associates 800-768-7194 816-587-3333
Yes, there's also another way. You can set a 100% width on your form preference without injecting a custom CSS code.
Just click on Preferences while on edit mode, go to Form Styles tab and set the Form Width to 100%. You can also set a pixel value e.g. 900px
However, if you are working on Form Designer, I would prefer injecting that CSS code so the pixel value under Form Layout will be overpowered with the injected % width value.
Thanks. i had already put the code in. i had no idea it would be so easy. howerver, now i looked at the 'form width' and it is set to 690. [i know i did not set that]. i will change it to 100%, but is there anything else that i need to check, to make sure something is not incorrect that i have.
The 690 in the Form Preferences will be overridden by the custom CSS codes with 100% width value so changing it will do nothing in the form. The CSS inject is recommended if you want to style your form. Other than this width, I think you are all set already. But if something will went wrong, let us know so we can help you with that.