One-line address field

Most stock NationBuilder themes utilize our one-line, submitted_address field by default, which asks for the entire address in a single field alongside a dropdown menu for the country.

The markup for the label and Liquid tag elements associated with these elements looks similar to this:

<label for="{{ page.type_slug }}_submitted_address">Address (Street, City, State, Postal code)</label>
{% text_field "submitted_address", class:"text" %}

<label for="{{ page.type_slug }}_country_code">Country</label>
{% collection_select "country_code", page.countries, "code", "name", class:"select" %}

Individual address fields and address types

It's possible to modify the template of a page such that individual fields for each part of an address can be requested, instead of the above one-line field. Requesting individual address fields also allows you to customize which particular address type is being asked for, and also allows the individual fields to be customized in order to match specific formatting requirements of a given locality.

It is also possible to ask for more than one address type on a single page. Say, for example, you wanted to ask for someone's Mailing Address alongside their Billing Address on a donation page. Or to ask for someone's registered address separate from their mailing address on a Vote Pledge page.

Available input elements:

address1
address2
address3
city
state
zip
country_code (as a dropdown field)

Available address types:

home_address
work_address
mailing_address
registered_address
billing_address

Supported page types:

Signup
Donation
Endorsement
Event
Feedback
Moneybomb
Suggestion Box
Petition Signature
Survey (on the first question's signup portion, not in subsequent questions)
Volunteer Signup
Vote Pledge

📌 Note: The line numbers listed in these instructions are for Signup page types. The instructions are the same with other page types, but the lines where you'll find the original code can vary. You can always search for 'Address' in the search bar to locate the correct lines of code to replace.

Individual field examples and markup by theme

Here are instructions for breaking out individual address fields on each stock theme, including Liquid tags for a US-formatted home_address or signup_submitted_address, including a dropdown for the Country field.

📌 Note: One particularly nice aspect about the country_code dropdown is that the country selected by default when the page loads will be the same country that the Nation has listed under the Contact details in the account menu.

Action:

On the page:

BEFORE

AFTER

And in the page/theme template:

To separate these fields on the Action theme, replace lines 71-73 with this:

 {% if page.signup.require_address? %}
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" required: "required" %}<label for="signup_submitted_address_address1">Address 1*</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" required: "required" %}<label for="signup_submitted_address_address2">Address 2</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" required: "required" %}<label for="signup_submitted_address_city">City*</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" required: "required" %}<label for="signup_submitted_address_state">State*</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" required: "required" %}<label for="signup_submitted_address_zip">Zip*</label></div></div>
          </div>
          <div class="row">
            <div class="col-md-12"><div class="form-group">{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" required: "required" %}<label for="signup_country_code">Country*</label></div></div>
      </div> 
        {% else %}
          <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" %}<label for="signup_submitted_address_address1">Address 1</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" %}<label for="signup_submitted_address_address2">Address 2</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" %}<label for="signup_submitted_address_city">City</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" %}<label for="signup_submitted_address_state">State</label></div></div>
          </div>
           <div class="row">
            <div class="col-md-12"><div class="form-group">{% text_field "submitted_address", class:"text form-control" %}<label for="signup_submitted_address_zip">Zip</label></div></div>
          </div>
          <div class="row">
            <div class="col-md-12"><div class="form-group">{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}<label for="signup_country_code">Country</label></div></div>
      </div> 
          {% endif %}

Click Save and publish to complete the change.

Aware:

To separate these fields on the Aware theme, replace lines 68-73 with this:

 {% if page.signup.require_address? %}
      <div class="row-fluid">
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1*</label>{% text_field "home_address.address1", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "home_address.address2", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City*</label>{% text_field "home_address.city", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State*</label>{% text_field "home_address.state", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip*</label>{% text_field "home_address.zip", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1</label>{% text_field "home_address.address1", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "home_address.address2", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City</label>{% text_field "home_address.city", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State</label>{% text_field "home_address.state", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip</label>{% text_field "home_address.zip", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>
      </div>    


      {% endif %}

Click Save and publish to complete the change

CityZen:

To separate these fields on the CityZen theme, replace lines 61-66 with this:

  {% if page.signup.require_address? %}
<div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1*</label>{% text_field "home_address.address1", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "home_address.address2", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City*</label>{% text_field "home_address.city", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State*</label>{% text_field "home_address.state", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip*</label>{% text_field "home_address.zip", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1</label>{% text_field "home_address.address1", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "home_address.address2", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City</label>{% text_field "home_address.city", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State</label>{% text_field "home_address.state", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip</label>{% text_field "home_address.zip", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>
      </div>    


      {% endif %}

Click Save and publish to complete the change.

Collective:

To separate these fields on the Collective theme, replace lines 68-73 with this:

 {% if page.signup.require_address? %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1*</label>{% text_field "home_address.address1", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "home_address.address2", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City*</label>{% text_field "home_address.city", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State*</label>{% text_field "home_address.state", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip*</label>{% text_field "home_address.zip", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1</label>{% text_field "home_address.address1", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "home_address.address2", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City</label>{% text_field "home_address.city", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State</label>{% text_field "home_address.state", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip</label>{% text_field "home_address.zip", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>
      </div>    


      {% endif %}

Click Save and publish to complete the change.

Headliner:

To separate these fields on the Headliner theme, replace lines 69-74 with this:

 {% if page.signup.require_address? %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>
      </div>    


      {% endif %}

Click Save and publish to complete the change.

Momentum has separate address fields by default.

Presence:

To separate these fields on the Presence theme, replace lines 68-73 with this:

{% if page.signup.require_address? %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address1">Address 1</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_city">City</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_state">State</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_home_address_zip">Zip</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>
      </div>    


      {% endif %}

Click Save and publish to complete the change.

Publish:

To separate these fields on the Publish theme, replace lines 68-73 with this:

 {% if page.signup.require_address? %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address1">Address 1*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_city">City*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_state">State*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_zip">Zip*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address1">Address 1</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_city">City</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_state">State</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_zip">Zip</label>{% text_field "submitted_address", class:"tex" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>    
      {% endif %}

Click Save and Publish to complete the change.

Raise:

To separate these fields on the Raise theme, replace lines 76-92 with this:

 {% if page.volunteer_signup.require_address? %}
                   <div class="form-control-material">
    <label for="volunteer_signup_home_address_address1" class="floating-label floating-label--float-above">Address Line 1*</label>
    {% text_field "home_address.address1", class:"text form-control", required:"required" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_address2" class="floating-label floating-label--float-above">Address Line 2</label>
    {% text_field "home_address.address2", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_city" class="floating-label floating-label--float-above">City*</label>
    {% text_field "home_address.city", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_state" class="floating-label floating-label--float-above">Province*</label>
    {% text_field "home_address.state", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_zip" class="floating-label floating-label--float-above">Postal Code*</label>
    {% text_field "home_address.zip", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_country" class="floating-label floating-label--float-above">Country</label>
    {% select_field "home_address.country_code", page.countries, "code", "name", class:"custom-select address-inputs-toggle" %}
  </div>
                {% else %}
                 <div class="form-control-material">
    <label for="volunteer_signup_home_address_address1" class="floating-label floating-label--float-above">Address Line 1</label>
    {% text_field "home_address.address1", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_address2" class="floating-label floating-label--float-above">Address Line 2</label>
    {% text_field "home_address.address2", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_city" class="floating-label floating-label--float-above">City</label>
    {% text_field "home_address.city", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_state" class="floating-label floating-label--float-above">Province</label>
    {% text_field "home_address.state", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_zip" class="floating-label floating-label--float-above">Postal Code</label>
    {% text_field "home_address.zip", class:"text form-control" %}
  </div>
  <div class="form-control-material">
    <label for="volunteer_signup_home_address_country" class="floating-label floating-label--float-above">Country</label>
    {% select_field "home_address.country_code", page.countries, "code", "name", class:"custom-select address-inputs-toggle" %}
  </div>
            {% endif %}
          {% endif %}
              
          <div class="form-control-material">
            <label for="volunteer_signup_availability" class="floating-label floating-label--float-above">When are you available?</label>
            {% text_field "availability", class:"form-control" %}
          </div>

          <div class="form-control-material form-control-material-textarea">
            <label for="volunteer_signup_content" class="floating-label floating-label-textarea floating-label--float-above">Comments, other ideas, etc.</label>
            {% text_area "content", class:"form-control textarea autogrow" %}
          </div>
        </div><!--/.input-group-vertical -->

        {% if request.sorta_logged_in? == false %}
          {% unless page.show_consent_form? %}
            <div class="form-row">
              <div class="form-group col-12">
                <div class="custom-control custom-checkbox">
                  {% check_box "email_opt_in", class:"custom-control-input" %}
                  <label class="custom-control-label" for="volunteer_signup_email_opt_in">Send me email updates</label>
                </div>
              </div>

              {% if site.ask_for_mobiles? %}
                <div class="form-group col-12">
                  <div class="custom-control custom-checkbox">
                    {% check_box "mobile_opt_in", class:"custom-control-input" %}
                    <label class="custom-control-label" for="volunteer_signup_mobile_opt_in">Send me text messages</label>
                  </div>
                </div>
              {% endif %}
            </div>
      {% endUnless %}

Click Save and Publish to complete the change.

Verve:

To separate these fields on the Verve theme, replace lines 68-73 with this:

  <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>
      </div>
          {% if page.signup.require_address? %}
                <div class="form-control-material">
                  <label for="signup_home_address_address1" class="floating-label floating-label--float-above">Address 1*</label>
                  {% text_field "home_address.address1", class: "form-control text", required: "required" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_address2" class="floating-label floating-label--float-above">Address 2</label>
                  {% text_field "home_address.address2", class: "form-control text" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_city" class="floating-label floating-label--float-above">City*</label>
                  {% text_field "home_address.city", class: "form-control text", required: "required" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_state" class="floating-label floating-label--float-above">State*</label>
                  {% text_field "home_address.state", class: "form-control text", required: "required" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_zip" class="floating-label floating-label--float-above">Zip*</label>
                  {% text_field "home_address.zip", class: "form-control text", required: "required" %}
                </div>
      {% else %}
                <div class="form-control-material">
                  <label for="signup_home_address_address1" class="floating-label floating-label--float-above">Address 1</label>
                  {% text_field "home_address.address1", class: "form-control text" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_address2" class="floating-label floating-label--float-above">Address 2</label>
                  {% text_field "home_address.address2", class: "form-control text" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_city" class="floating-label floating-label--float-above">City</label>
                  {% text_field "home_address.city", class: "form-control text" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_state" class="floating-label floating-label--float-above">State</label>
                  {% text_field "home_address.state", class: "form-control text" %}
                </div>
                <div class="form-control-material">
                  <label for="signup_home_address_zip" class="floating-label floating-label--float-above">Zip</label>
                  {% text_field "home_address.zip", class: "form-control text" %}
                </div>
      {% endif %}

Click Save and Publish to complete the change.

Victory Again:

To separate these fields on the Victory Again theme, replace lines 68-73 with this:

{% if page.signup.require_address? %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address1">Address 1*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_city">City*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_state">State*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_zip">Zip*</label>{% text_field "submitted_address", class:"text", required: "required" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country*</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select", required: "required" %}</div>
{% else %}
     <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address1">Address 1</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_address2">Address 2</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_city">City</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_state">State</label>{% text_field "submitted_address", class:"text" %}</div>
      </div>
           <div class="row-fluid">
        <div class="span12"><label for="signup_submitted_address_zip">Zip</label>{% text_field "submitted_address", class:"tex" %}</div>
      </div>
      <div class="row-fluid">
        <div class="span12"><label for="signup_country_code">Country</label>{% collection_select "country_code", page.signup.countries, "code", "name", class:"select" %}</div>    
      {% endif %}

Click Save and publish to complete the change.

To change these elements to ask for a different address type, simply replace home_address or signup_submitted_address with:

work_address
mailing_address
registered_address
billing_address

Remember to replace this string in both the <label> and the {% liquid tag %} so that the <label> will be properly associated with the <input> element that will display.

📌 Note: The exact HTML markup for form fields will vary from theme to theme, and there are often formatting-based <div> tags that wrap the form field elements in order to control the width and relative spacing of each input field. You'll want to look at the HTML markup on other form elements in your theme, such as first_name and email, in order to format your new address fields consistently with the rest of the form.

Making Liquid form fields required

If you'd like to make one of the text_field elements required (to ensure that signups entire at least a ZIP code, for example), you can add , required:"required" to the Liquid tag element, like this.

Optional:

{% text_field "home_address.zip", class:"text", placeholder:"Zip" %}

Required:

 {% text_field "home_address.zip", class:"text", placeholder:"Zip", required:"required" %}

How to request custom people fields on event pages

How to request custom people fields on feedback pages

How to request custom people fields on invoice pages

How to request custom people fields on volunteer pages

How to request custom people fields on survey pages