Important Note: This solution leverages Third Party Services. In using this solution, you acknowledge and agree to the Formstack Terms of Service, THIRD PARTY SERVICES disclaimers outlined at: https://www.formstack.com/terms
Overview
AddressComplete is a great tool used to auto-complete your address fields on your form. It will search and populate your fields once you start typing. Below are the steps on how to set it up for the Formstack for Salesforce Application.
1. Go to https://www.canadapost.ca/pca/ and click ‘Start Your Free Trial’.
2. Fill out your email and password then click ‘Register’.
3. Once you are at your dashboard click ‘Create New Installation.
4. Enter the URL of your form and continue.
5. Copy and open up the link for the CSS URL that can be found here. In addition to copying the CSS URL, make a copy of the unique key that will be required for entering the javascript code on step 7. (It’s important to note that you will only have 14 days to use this code if you’re on a free trial with AddressComplete)
6. Once you have copied the CSS code, place it in your form on the Advanced CSS Editor on the Edit Style Tab.
7. Navigating to the javascript section under your Form Settings, you’ll want to copy and paste the snippet that we’ve included below, but make sure to replace the unique key with the ones you would see on your account from step 5(the current keys are just placeholders).
Javascript Snippet:
function FF_OnAfterRender () {
const addressJS = document.createElement('script');
addressJS.setAttribute('type','text/javascript');
addressJS.setAttribute('src','https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.min.js?key=jx44-he61-hk64-rc86');
document.head.appendChild(addressJS);
const addressStyle = document.createElement('style');
addressStyle.setAttribute('rel','stylesheet');
addressStyle.setAttribute('href','https://ws1.postescanada-canadapost.ca/css/addresscomplete-2.30.min.css?key=jx44-he61-hk64-rc86');
document.head.appendChild(addressStyle);
return true;
}
Notes
The JavaScript will run after the page is loaded, make sure to re-publish the form after this has been done.
8. Go back to AddressComplete and check the code on your page. It should say that the code cannot be found on your page. Copy the verification code then click ‘Finish setup on your web page’.
9. Paste in the verification code and press Enter.
10. Test your form and make sure the address fields are auto-populating. Once they are, you’re done!