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.
Responsive form fields not lining upAsked by kauseway on August 27, 2015 at 05:19 PM
Can you guys help me finish my form? It is super simple but it is not acting right:
1) In desktop view: I want the address field to extend out further and the zip code to be smaller (see the red boxes).
Also want the Zip Code, Your email and See your price fields to line up left justified, which it is, but also lined up on the right side too.
2. In phone landscape view: I want the address field to be wider and extend over and the zip code to be smaller (see red boxes.) The your email field drops to its own line and I dont want it to do that. I want all 3 rows to line up on the right side.
3.)In phone portrait view: The zip code is a number field and for some reason in this view its height is not the same as the enter your address. The your name and your email fields are on their own row which I want. But again, want the right side to line up on all 4 rows.
I cloned your form for testing purposes, I'll get back to you with a working custom CSS code with the changes you mentioned.
Here's the cloned form with the changes you mentioned: http://form.jotformpro.com/form/52389383128968?
You can clone my form to have a copy in your own account, you can then check how I set it up and the custom CSS code I used. Here's a guide on how to clone my form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
The changes I made:
1. Used the text box field to all of the fields, if you need validation, you can set it there.
2. I then made the form mobile responsive
3. Adjusted the width of the form using the Form Designer
4. Then use a custom CSS code to make the changes you requested, you can find the custom CSS code under the CSS tab area.
Do let us know if that works.
That was awesome. Thanks so much! I do have a few minor changes. In phone portrait view the zip code is slightly cut off. Can we make it slightly wider? And I want "Your name" to be 100% width in phone view and "You email" to be on its own line and 100% width.
Also, Can you move the hint example on each field over slightly to the right so it is not so close to the left side of the box?
here is the new copied form:
Thanks for all your help
Check this: http://www.jotformpro.com/form/52395522707963. If possible, please use an actual device for checking the changes.