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:

  • 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

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

How to create a custom theme
How to use Liquid with NationBuilder
Liquid object reference guide
How to create a signup page

Did this answer your question?