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>

Then, look for the country code field.

You’ll want to replace it with the correct liquid for the individualized address that you chose before (home, work, mailing, etc). Here’s an example of home_address:

{% collection_select "home_address.country_code", page.signup.countries, "code", "name", class:"select" %}

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 Publish theme:

If you would like to use the state dropdown 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.

Related HOWTOs

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?