### [How to Customize the Address Field Layout](https://wpforms.com/developers/how-to-customize-the-address-field-layout/)

**Published:** February 2, 2023
**Author:** Editorial Team

**Excerpt:** This tutorial will help show you how to use PHP and CSS to customize the address field layout. 

**Content:**

Would you like to customize the **Address** field layout on your form? We have the perfect tutorial for you! Using a little PHP and some CSS, we’re going to create a custom address scheme that will omit the **State** field from our form, and using CSS we’ll place the **Zip/Postal** field right beside the **City** field on our form.

## Customizing the Address Field layout

In this tutorial, we’re going to begin by creating a custom address scheme as detailed in [this tutorial](https://wpforms.com/developers/create-additional-schemes-for-the-address-field/ "How to Create Additional Schemes for the Address Field"), that will have only the following fields.

- **Address Line 1**
- **Address Line 2**
- **City**
- **Code Postal** (for our zipcode field)

By default, the **Postal/Zip Code** form field will always appear as the last field inside the address section on the form.

![the zip code or postal code will always appear as its own line at the bottom of the address field by default](https://wpforms.com/wp-content/uploads/2023/02/customizing-address-layout-before-css.png)

If you need any assistance with how and where to add custom snippets to your site, [please review this article](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
 * WPForms Add new address field scheme (Custom)
 *
 * @link   https://wpforms.com/developers/create-additional-schemes-for-the-address-field/
 */
 
function wpf_dev_new_address_scheme( $schemes ) {
 
    $schemes[ 'custom' ] = array(
        'label' => 'Custom',
        'address1_label' => 'Address Line 1',
        'address2_label' => 'Address Line 2',
        'city_label' => 'City',
        'postal_label' => 'Code Postal',
    );
 
    return $schemes;
 
}
 
add_filter( 'wpforms_address_schemes', 'wpf_dev_new_address_scheme', 10, 1);
```

## Creating the form

Now that the custom address scheme has been created with our snippet, it’s time to create our form. If you need any help in creating your form, [please check out this help documentation.](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form")

![to begin, create a new form and add your fields](https://wpforms.com/wp-content/uploads/2023/02/customizing-address-layout-create-form.jpg)

Our form will only grab some basic information which will include an **Address** field.

## Selecting the address scheme

Once you’ve added your **Address**, select the new **Address Scheme** from the dropdown on the **General** tab that we created in the snippet.

![from the General tab, select the Address Scheme name you created in the snippet above](https://wpforms.com/wp-content/uploads/2023/02/customizing-address-select-shceme.jpg)

## Adding the CSS

Now it’s time to add the CSS to our site that will pull the **Postal** field to the same line as the **City** field.

For any assistance on how and where to add your CSS, [please review this article](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms").

```

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}
```

It’s important to note that we’re only targeting the form ID **2453** and the field ID **9**, you’ll need to update these IDs to match your own. For assistance in finding your IDs, [please check out our helpful documentation](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID").

![now you can see our postal field is on the same line as the city field](https://wpforms.com/wp-content/uploads/2023/02/customizing-address-layout-after-css.png)

Would you like to customize the style of the **Section Divider** field with CSS? Check out this article on [How to Customize WPForms Section Divider Using CSS](https://wpforms.com/developers/how-to-customize-wpforms-section-divider-using-css/ "How to Customize WPForms Section Divider Using CSS").

## Reference Filter

[wpforms\_address\_schemes](https://wpforms.com/developers/wpforms_address_schemes/ "Using the wpforms_address_schemes filter")

## FAQ

#### Q: How can I change the position of the City and Postal Code?

**A:**In order to place your **Postal** field before the **City** field, use this CSS instead.

```

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: right;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

```

#### Q: How would I only display the Zip Code field?

**A:** If you only want to have a zip code field, you could hide all other fields with CSS. However, if you would just like to capture the zip code, the easiest solution would be to add a **Numbers** field to your form to collect this information.

#### Q: Can I reorganize the other fields completely?

**A:** Absolutely, however since there can be so many different variations for an address field, we’re not going to cover every specific scenario. But please feel free to reach out to our [WPForms VIP Circle](https://www.facebook.com/groups/wpformsvip "WPForms VIP Circle") for specific assistance with this.

**Categories:** Fields

**Tags:** Address Field, CSS, PHP

---