All Collections
Website
Theming
Template updates
Create individual address fields on forms by theme
Create individual address fields on forms by theme

Most NationBuilder forms include a single field for submitting an entire address. This can be changed by editing the Liquid in the template.

Updated over a week ago

Table of Contents:

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:

  <div class="form-control-material form-control-material-custom-select">
<label for="signup_country_code" class="floating-label floating-label-select floating-label--float-above">Country</label>
{% select_field "country_code", page.signup.countries, "code", "name", class:"custom-select" %}
</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 %}
{% endif %}
{% endif %}
</div><!--/.input-group-vertical -->

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" %}

Related HOWTOs

Did this answer your question?