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

    How do we set up 3 address fields to stay in a single line?

    Asked by Aiden123 on January 21, 2016 at 05:37 PM

    I have previously built a page that required that City, Sate and Zip be on one line.

     

    However, now they need the State to be a drop-down, not a text box.

     

    Once I added the drop down state field, I can no longer get it onto one line.

     

    Here is an example of how the form was: http://start.harrison.edu/info/ 

     

    But now I need the State as drop down in this page (which is not allowing me to put the City State Zip on the same line: http://explore.harrison.edu/

     

    want this set up layout... but with the drop down state

     

    with the drop down added, it looks like this...

    Please help.

    Thanks!

    Page URL:
    http://explore.harrison.edu/

    shrink same line align align fields
  • Profile Image
    JotForm Support

    Answered by jonathan on January 22, 2016 at 12:57 AM

    Please try adding this CSS codes on your jotform http://www.jotformpro.com/form/60136055369960

     

    #id_37 {

        float:right;

        margin-right:70px;

        margin-top:-50px !important;   

    }

     

    it works on my test form so far https://form.jotform.com/60210343699959

    Let us know if this did not work for you.

    Thanks.

     

     

  • Profile Image

    Answered by Aiden123 on January 22, 2016 at 01:59 PM

    I added the CSS - it looks correct in the preview mode... but overlaps in my actual page:

    http://explore.harrison.edu/

    So, it looks like we you are taking me in the correct direction, but I may need to adjust the drop down widths (however you do that)?

    Any other thoughts?

    Thanks!

  • Profile Image

    Answered by Ben on January 22, 2016 at 03:25 PM

    To rectify this, please do remove the code given by my colleague:

    #id_37 {
        float:right;
        margin-right:70px;
        margin-top:-50px !important;  
    }

    His code is correct, but it would not go together with the code that I would suggest:

    li#id_36, li#id_50, li#id_37 {
        width: 33%;
    }
    li#id_36 .form-error-message, li#id_50 .form-error-message, li#id_37 .form-error-message {
        white-space: pre-line;
        width: 70px;
    }
    #input_50 {
        min-width: 50px;
    }

    This code will align the 3 fields perfectly on the same line, increase the width of dropdown and in the same time make sure that the errors are properly shown and not cut out or cause fields to change their position.

    I have taken a quick screencap of how it should look for you:

    You can see how to add the code to your form by following the steps here: Inject Custom CSS Codes

    Please do only remember to remove the ones mentioned above first.

    Do let us know how it goes :)