How to Customize the Address Field Layout

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, 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

If you need any assistance with how and where to add custom snippets to your site, please review this article.

/**
 * 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.

to begin, create a new form and add your fields

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

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.

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

now you can see our postal field is on the same line as the city field

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.

Reference Filter

wpforms_address_schemes

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 for specific assistance with this.