Skip to main content

Create individual address fields on forms

Most NationBuilder page forms include a single field for submitting an entire address to reduce form fatigue. By default, addresses submitted on your website are stored as a profile's user-submitted address. On an event, petition, signup, or volunteer signup page, this can be changed by editing the liquid in the page template. 

Table of Contents

How to request individual address fields on a signup page

To allow people to input individual address fields separately, the first step is deciding which type of address to request. The options are: home, mailing, or billing. The user-submitted address cannot be requested by individual fields. We recommend requesting the home address for individuals. Physical address for an organization should be requested using the work address fields. 

On a signup page, the signup is the primary object. Therefore, within a liquid tag, address fields do not need a signup prefix. For example, to request home address line 1 on a signup page use "home_address.address1."

In the signup page template, look for the address field:


You want to replace the request for a full address with individual fields placed on separate rows.

<div class="row-fluid">
<div class="span12"><label for="signup_home_address_address1">Address Line 1*</label>{% text_field "home_address.address1", class:"text", placeholder:"address line 1", required:"required" %}</div>
<div class="row-fluid">
<div class="span12"><label for="signup_home_address_address2">Address Line 2</label>{% text_field "home_address.address2", class:"text", placeholder:"address line 2" %}</div>

The above example code makes address line 1 a required field using the browser-level, HTML5 based requirement that is not specific to NationBuilder. Placeholder text is not required--it can be removed or changed within the code.

If you expect most signups live in a single country, you can create a drop-down menu for the state field, which can help minimize misspellings.

For the U.S., you can download the Home address state partial file. Upload the _home_address_state_dropdown.html partial template to the Files section of your custom theme. Remember to publish the theme after uploading the file. The partial can be called using "{% include "home_address_state_dropdown" %}"

For example:

<div class="row-fluid">
<div class="span4"><label for="signup_home_address_city">City</label>{% text_field "", class:"text", placeholder:"city" %}</div>
{% include "home_address_state_dropdown" %}
<div class="span4"><label for="signup_home_address_zip">Zip Code*</label>{% text_field "", class:"text", placeholder:"zip code", required:"required" %}</div>


Example of the public-facing signup page using the above code with a custom theme based on the Aware theme:

how requesting inidividual address fields displays in a signup form

If you would like to use the state drop-down menu for a different address type, or if you would prefer to place the code directly in the page template, open _home_address_state_dropdown.html in a browser and view the source code. Or you can open the file in a text editor, such as Sublime Text. Opening the file in some applications, such as TextEdit, will convert the file to rich text format before opening it. Therefore, the HTML code will not be visible in all applications.

At this time, only event, petition, signup, and volunteer signup pages can request individual address fields for the home, mailing, or work address. Donation and invoice pages request the billing individual address fields by default, and the four page types listed above can also request them.

How to create a custom theme

How to use Liquid with NationBuilder

Liquid object reference guide

How to create a signup page

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.