Address Validation On Your Realtime Marketing Forms Using Data8

If you are collecting address information on your Realtime marketing forms in Customer Insights – Journeys, wouldn’t it be nice to get those addresses validated before adding them to your Dynamics 365 environment to make sure the data is accurate? Also, sometimes it’s a nice little helper for the person submitting your form so they don’t have to type out each line of their address. In addition, which field do I use for which part of the address, and adding the country is confusing especially for those in the UK. Do I put England, United Kingdom, Great Britain ? What about having a nice control that auto populates addresses as you type? Well using the address validation and the predictive address autocomplete functionality from Data8 can help. Check this out!

First, I am not getting any commission from Data8, I just think it’s a cool option for any organisation that wants to keep their data as clean as possible AND help validate information BEFORE it goes in to D365. However, mention my name and this blog when you contact them and they will offer you an extended trial or discount on their base pricing model.

So, what are we talking about? Well, something like this below. I start typing the first line of my address and bingo, I get a list to pick from so I can select the right one with all of the relevant fields.

Start by creating your form and adding the standard address fields to it. You will need the following:

• address1_line1
• address1_line2
• address1_line3
• address1_city
• address1_stateorprovince
• address1_postalcode
• address1_country

That’s not to say you can’t use custom fields but you would need to edit the script to take this in to consideration. You can also hide fields on the form, so if you don’t want the person changing the value that gets populated in to the Country field, just hide it so it’s not visible. The value will still get populated.

Now click on the HTML option at the top right of the form. You will need to add in a script that runs and loads the autocomplete control and ties it to your address1_line1 field on the form. The ajaxKey that I have covered below is something you would get from Data8 once you sign up for their predictive address autocomplete solution.

Here is the script you can just copy and paste (make sure to add your key in the appropriate place).

    <script>
        /* Data8 Predictive Address */
document.addEventListener('d365mkt-afterformload', function (event) {
    var data8JsScript = document.createElement('script');
    data8JsScript.onload = function () {
        // Use querySelector with the [name=...] attribute, since that's stable
        var txt = document.querySelector('input[name="address1_line1"]');
        if (!txt) return;

        new data8.predictiveaddressui(txt, {
            ajaxKey: 'YOUR-KEY-FROM-DATA-8',
            fields: [
                { element: document.querySelector('input[name="address1_line1"]'), field: 'line1' },
                { element: document.querySelector('input[name="address1_line2"]'), field: 'line2' },
                { element: document.querySelector('input[name="address1_line3"]'), field: 'line3' },
                { element: document.querySelector('input[name="address1_city"]'), field: 'town' },
                { element: document.querySelector('input[name="address1_stateorprovince"]'), field: 'county' },
                { element: document.querySelector('input[name="address1_postalcode"]'), field: 'postcode' },
                { element: document.querySelector('input[name="address1_country"]'), field: 'country' }
            ]
        });
    };

    data8JsScript.src = "https://webservices.data-8.co.uk/javascript/predictiveaddress.js";
    document.head.appendChild(data8JsScript);
});

    </script>

We also need to add a line near the top of the HTML of the form, just above all of the styles. This will pull in the stylesheet from Data8 to make sure it loads it in the right place and makes it look pretty.

 <link rel="stylesheet" href="https://webservices.data-8.co.uk/content/predictiveaddress.css">

You can also override some of the styles if you wanted to, perhaps updating the font family and font size to make it feel more seamless within your form. This isn’t needed but gives you an example. If you are not sure how to find the styles, check with someone more comfortable with CSS and who knows how to figure that out. that would be a whole other lesson for another day.

        .data8-pa-autocompleteitemtext {
            font-family: Arial;
            font-size: 13px;
        }

        .data8-pa-countryselector {
            font-size: 14px;
            font-family: Arial;
        }

        .data8-pa-countrylist ul li span {
            font-family: Arial;
            font-size: 14px;
        }

        .data8-pa-title {
            font-size: 15px;
            font-family: Arial;
        }

So this is what it looks like with a link to the Data8 stylesheet AND some adjustments to override a few of the CSS classes.

Now publish your form and you are ready to go. Here we can see that as soon as the line 1 address field is clicked in to, it pops up with a control where the person filling out the form can change their country. A search can be done and the country changed if needed.

Then typing out the address will start to show results. The correct address from the list can then be clicked on.

This will populate all of the fields that are mapped so that the correct values are captured. Again, any fields you don’t want them changing, you could hide them from the form.

If you want to get started and find out more information from Data8 (pricing etc), you can do that by filling out their contact form here. Mention my name and this blog when you contact them and they will offer you an extended trial or discount on their base pricing model.

Original Post http://meganvwalker.com/address-validation-on-your-realtime-marketing-forms/