We asked our NationBuilder Architect Brand Response to help with this issue! Their solution is below!

Many European addresses follow a different formatting order to the United States. For example in Belgium and Germany, people enter house number after street name, rather than before.

Belgium addresses look like this:

Avenue du Frioul 12-34
1234 Evere Belgium

Whereas U.S. addresses look like this:

1234 Bellmore Ave Point Lookout
NY 11569 USA

Using the standard NationBuilder address input (a single field) this creates a problem when addresses are saved; namely it results in address structure not being recognised and Geocoding not working.

The interim solution we have applied is to use JavaScript on the front-end to combine the values of multiple "fake" address input fields. When the user submits the form, we reorder and concatenate the individual parts into the U.S. format, before sending to the database via a hidden field.

Example form:

Example Code:

<!-- "Fake" address inputs -->
<divclass="row-fluid">
<divclass="span6">
<labelfor="custom_address_street">Straat</label>
<inputid="custom_address_street"type="text" class="text">
</div>
<divclass="span3">
<labelfor="custom_address_house">Nummer</label>
<inputid="custom_address_house"type="text" class="text">
</div>
<divclass="span3">
<labelfor="custom_address_mailbox">Bus</label>
<inputid="custom_address_mailbox"type="text" class="text">
</div>
</div>
 
<divclass="row-fluid">
<divclass="span6">
<labelfor="custom_address_postcode">Postcode</label>
<inputid="custom_address_postcode"type="text" class="text">
</div>
<divclass="span6">
<labelfor="custom_address_city">Gemeente</label>
<inputid="custom_address_city"type="text" class="text">
</div>
</div>
 
<!-- Hidden field -->
<inputid="signup_submitted_address"name="signup[submitted_address]"type="hidden">
 
<!-- Submit button with wrapper we'll use to attach an EventListener -->
<divid="submit-wrapper"class="row-fluid">
<divclass="span12">
{% submit_tag "Bewaar gegevens", class:"submit-button" %}
<divclass="form-submit"></div>
</div>
</div>
<!--JavaScript-->

<script>
$(function(){
function customAddressForm(){
var s = $("#custom_address_street").val(),
h = $("#custom_address_house").val(),
m = $("#custom_address_mailbox").val(),
p = $("#custom_address_postcode").val(),
c = $("#custom_address_city").val();
 
/*US ordered address*/
var address = h +" "+ s +(m!==""?" "+ m :"")+", "+ c +", "+ p;
$("#signup_submitted_address").val(address);
}

 document.getElementById("submit-wrapper").addEventListener("click", customAddressForm,true);
});
</script>

Note: You need apply the update to every place in the theme where an address form appears.

This interim solution makes it possible for address structure to be recognised in NationBuilder (i.e. address line 1, postcode and city are filled out correctly) and for Geocoding to succeed!

However, we are still left with a couple of unsolved issues:

1. When we output a user’s address on the front-end, they will see it in U.S. format, so may be confused.

2. Our “fake” address inputs cannot be reliably repopulated when a user whose address is known visits the page (because we cannot reliably split address line 1 back into Street name, House number and Mailbox at this time)

The long term suggestion therefore, is for NationBuilder address input methods to be updated, so that European address ordering can be handled without the need for custom code!