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.


  • Profile Image

    Responsive form fields not lining up

    Asked 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.

     

    thanks!

    Page URL:
    http://form.jotformpro.com/form/52386829223966

    JotForm uploads name height
  • Profile Image
    JotForm Support

    Answered by Charlie on August 27, 2015 at 10:16 PM

    Hi,

    I cloned your form for testing purposes, I'll get back to you with a working custom CSS code with the changes you mentioned.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Charlie on August 27, 2015 at 10:29 PM

    Hi,

    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.

    Thanks.

  • Profile Image

    Answered by kauseway on August 28, 2015 at 12:07 PM

    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:

    http://form.jotformpro.com/form/52395223368964

     

    Thanks for all your help

  • Profile Image
    JotForm Support

    Answered by Welvin on August 28, 2015 at 03:05 PM

    Check this: http://www.jotformpro.com/form/52395522707963. If possible, please use an actual device for checking the changes.

    Thanks