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 can I get the City and Postcode fields next to each other instead of one on top of the other?

    Asked by goquote on November 17, 2014 at 12:19 PM
    (also I was trying to get the city and postcode fields next to each other on the same line instead of on top of eachother)
    If you are able to teach me some of this stuff, through a tutorial I would love to learn it for future to build new charts. Are there video tutorials other than your youtube channel?
  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 17, 2014 at 12:57 PM

    Hello goquote,

    Yes it is possible to adjust the city & postcode fields next to each other by injecting custom css code in your form.

    Here are the steps you should follow:

    1. Find the field id of the city and postcode fields. The following guide should help you:  http://www.jotform.com/help/146-How-to-find-Field-IDs-Names 

    2. Add the following custom css code in your form:

    label#sublabel_16_state {

    position: absolute;

    left: 30px;

    top: 204px;


    input#input_16_state {

    position: absolute;

    top: 176px;

    left: 31px;


    input#input_16_postal {

    position: absolute;

    top: 130px;

    left: 196px;


    label#sublabel_16_postal {

    position: absolute;

    left: 196px;

    top: 160px;


    The field name and the value of left/top needs to be be updated based on the location you need to move. You may like to use firebug for chrome or firefox to find field ids and test css.

    Please take a look at the following cloned form and see if this is what you wanted to achieve:  http://form.jotformpro.com/form/43204956579970? Feel free to clone this form for a closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!