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. Here's an example of how this appears in the Publish theme:
Markup for the label and liquid tag elements associated with these elements looks like 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 someones Registered Address separate from their Mailing Address on a Vote Pledge page.
Available input elements:
address1address2address3citystatezipcountry_code(as a dropdown field)
Available address types:
home_addresswork_addressmailing_addressregistered_addressbilling_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
Individual field examples and markup
Here is example of the label and liquid tags for a US-formatted home_address, including a dropdown :
<label for="{{ page.type_slug }}_home_address_address1">Address Line 1</label>
{% text_field "home_address.address1", class:"text", placeholder:"Address Line 1" %}
<label for="{{ page.type_slug }}_home_address_address2">Address Line 2</label>
{% text_field "home_address.address2", class:"text", placeholder:"Address Line 2" %}
<label for="{{ page.type_slug }}_home_address_address2">Address Line 3</label>
{% text_field "home_address.address3", class:"text", placeholder:"Address Line 3" %}
<label for="{{ page.type_slug }}_home_address_city">City</label>
{% text_field "home_address.city", class:"text", placeholder:"City" %}
<label for="{{ page.type_slug }}_home_address_state">State</label>
{% text_field "home_address.state", class:"text", placeholder:"State" %}
<label for="{{ page.type_slug }}_home_address_zip">Zip</label>
{% text_field "home_address.zip", class:"text", placeholder:"Zip" %}
<label for="{{ page.type_slug }}_home_address_country_code">Country</label>
{% collection_select "home_address.country_code", page.countries, "code", "name", class:"select" %}
To change these elements to ask for a different address type, simply replace home_address with:
work_addressmailing_addressregistered_addressbilling_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's rendered.
One particularly nice aspect about the country_code dropdown in particular 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.
Note that 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 reference 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" %}