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

    Can we re-style the address fields?

    Asked by rkelley on February 05, 2016 at 04:47 PM
    Is there a way to get city, state and zip on one line. Or don’t use state and have city and zip on one line?
    address field custom CSS restyle address
  • Profile Image

    Answered by Ben on February 05, 2016 at 05:03 PM

    I believe that this is still on the same form: https://form.jotform.com/52245191510143

    Now, I would first like to mention that you do not need to show all of the address fields. If you wish to hide some (like state), you can do that with ease through the toolbar Fields option shown after clicking on address field.

    Those that you leave checked, will be shown and those that you uncheck (and click OK) will be hidden.

    Checking your form I see that the state is no longer shown, so I do presume that you have already figured this out.

    Based on the currently available fields, this is the CSS to add to make City and ZIP go into the same row:

    input.form-address-city, input.form-address-city + label, .form-address-postal, .form-address-postal + label {
        max-width: 200px;
    }
    .form-address-table td[width="50%"] {
        display: block;
        height: 30px;
        max-width: 200px;
    }
    .form-address-table tr:nth-child(3), .form-address-table tr:nth-child(4) {
        display: block;
        float: left;
        width: 50%;
    }

    This code will impact all address fields on your form in the same time.

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

    Please do however add them after all the other CSS code in your form.

  • Profile Image

    Answered by rkelley on February 05, 2016 at 05:47 PM

    Thanks so very much!