Center Entire Form

Here is the form in question: https://form.jotform.com/60175042064143

I want to center the button, form fields (the hidden ones dont matter) and header image, so that it works for dektop and mobile. So far I've got it on my desktop where the image and button are centered, but not the fields. None are centered on my mobile device and seem to be skewed to the right. 

I added soem CSS to the bottom of the form, a few different versions of centering that I saw on here, which didnt work.

Please advise..

Thanks.

Jon N

Hello Jon,

Here's the CSS you need to add to center the fields.

.form-line label, .form-line div {

margin: auto !important;

text-align: center !important;

}

Part of the issue is that the fields are centered, but they have some extra space on the right. I'm working on finding out the right code to shrink them down a bit too so it looks centered.

Here's the doc on how to inject CSS to your form.

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

Click on the form designer, and then preview. This appears to cause the CSS to be processed correctly.

After that it looks like this:

Here's a clone of your form.

https://form.jotform.com/60186672292965

Ok. I injected the CSS and it looks good on the form, but when I preview it, it is still skewed to the left. The only thing that I dont want centered is the text box titles as well, as it looks goofy. How do I center everything, except for those, and have it work on mobile too? Thanks. 

I'm checking into this further. My example worked, but now I'm having trouble emulating it in your form. Will update this post when I have a solution.

Again, you might want to check the bottom of my CSS scripts as that is where I pasted all of my other coding, so there may be contradictory coding in it. Let me know and thanks..

I made a cloned of your form and applied a custom CSS that formats the fields according to what you want. https://form.jotform.com/60188389938979. I suggest to clone this form so you can use if you want.

Or with the help of my colleague Steve, you can apply the CSS codes here to your form on the Form Designer. This should center the fields and left aligned the label.

Example: Make sure to remove the existing CSS codes and paste it under CSS tab.

It should also look like this on mobile.

Hope this helps!

This form looks great. But I wanted to apply the same code to the form "Step 1" that leads into the previous one that we fixed. Here is URL: https://form.jotform.com/53545511750149

When I add the CSS, it looks fine and is aligned perfectly how I would like. I just dont want near as much vertical padding as it shows when I paste the script into my WP. On the jotform designer, it says it has 0 padding, but if you check out the actual site (http://69.195.124.214/~jonnyseo/lavishlimousineprovidence/), you can see it has tons of padding, and it stretches out both the button to fit the entire width, and it also stretches out the fields to the entire width of the form.

Wondering if it is something wrong with the form deisnger or something else I can do, or if It is just being super responsive now, and I should chnge that sidebar width on my wp. Let me know which on you think would be best...

I'm checking on the issue with the form embedded on your webpage. Please allow me sometime to check on this and get back to you with relevant information.

Thank you for your patience.