JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Form field squeezed on the left side?Asked by andrewecalvert on December 18, 2015 at 12:45 PM
Okay, I did all that and the form got jumbled up in the middle. So, I took the CSS code out. Since it looks better without it. Now the "Item Number" is pushed too far over to the left.
Here's the link-
Sorry, I wish I was better at this but I am trying. Could you help me a little more?
There are two issues on your form that we'll try to resolve in this case.
Problem 1: The first is that the width to where the form is embedded is only 60% which causes the form being cut off at the right side.
Noticed below that the <td> element with ID "dc_get_a_button_quote_block11" has a 60% width. It is cut off because 60% of the width is 561px. If you checked your form, the width of it is 640px. The <td> element has a smaller width that is why the form is cut off.
Try changing it to a higher value like 80% or 100% to match the width of the form, or make the form smaller.
Problem 2: The position of the form fields are not properly aligned. Please check this guide to learn more about position fields: https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm
Example is the form below, we want to have two form fields in one line side by side. However, there are form fields that are merged above on a different line. Below is an example, noticed that form field "5: Quantity of Buttons" has "Move to a new line", this means it is merged at the line of "3. Company Name" and "Zip Code" which will eventually ruin your layout. You need to move it to its own line.
Now after fixing the positioning of your form fields, we will enable the "Enable Form Columns" in your Form Designer Tool. This will adjust the widths and position of the form fields which will give you a 2 column layout.
Now make sure to save the changes and re-embed your form. I tried recreating your website and cloned your form, you can see how it looks like in this test site I made: https://shots.jotform.com/charlie/test%20website%20thread728706/test.html.
In summary, these are the changes that I made in my end:
- Change the width of your parent element from 60% to 100%
- Position the form fields by correctly moving and shrinking them to a new line
- Tick the "Enable Form Columns" in the Form Designer Tool.
I hope that helps.
I forgot to mention, here's my cloned form with the changes I made: https://form.jotform.com/53514788010958. You can clone it and have a copy of it in your account by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
Thank you so much for your help!
On behalf of my colleague, you are very welcome. If you have any other question or issue, please do not hesitate contacting us. We will be glad to help.