What is JotForm?
JotForm is a freeonline 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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

Help with responsive form layout

Asked by
kauseway
on December 06, 2014 at 09:11 AM

Above is the look I am trying to achieve.

I have been messing with the form to get it to look good on PC and mobile. I have tried the responsive widget, the make responsive checkbox on the form preferences as well as make responsive/ two column layout in the form CSS editor.

I feel like it is close but here is my issue:

The /unit #/ form is responsive. I need it to be up with the address form. It does not need to take up alot of width as it just holds a apartment #. So I want make sure it stays with the address field. and they both are responsive together.

[ address ] [ unit # ]

[ city ] [ state ]

[ phone ]

Same for the City and State fields.

I would like to the phone number field to maintain the same width as the [ address ] field so it isnt stretched across the entire form, see above.

Under the credit card field:

1) The credit card label is shifted down and sitting on the security code box. I need to get it back up.

-

Credit Card

Needs to be: - Credit Card

Finally. Same issue with the expiration fields. They are going across the entire width. Would like them to be smaller. Ideally the security code, and expiration fields should be on the same line as well.

Now in regards to security code and expiration fields. I would suggest not to get them in the same row since they are in different table rows. That means that the security code would follow the Credit Card number on any change and since the expiration date is in different row, the CSS rules would need to be made that would follow the security code around as well, regardless of the table layout.

Do let us know if that is what you were after and if you need any further assistance.