Step-by-Step: Build an Update Profile Form in Customer Insights Journeys

I was recently asked how we can give customers the ability to update their email via a form. I advised against it. If you are using Customer Insights – Journeys, you know that a Contact Point Consent record exists for an email address showing if it is Opted In or Opted Out of a Purpose or Topic. Instead, I suggested that there is clear direction for those you are sending emails to that shows how they can Unsubscribe or fill in an Update Profile form. From there you can direct someone to Opt Out with their original email and Opt In with their new one. This is common if someone is changing jobs, or has decided they want to switch from their personal email to their work email (or vice versa). In this post I will show how you can create a nice Update Profile form to let someone update their information, but clearly states what to do if they want to change their email.

First, this process takes advantage of the Prefill forms functionality on a form. So make sure your form has this turned on to start with.

All fields on your form should then inherit this setting, but just double check to make sure that all fields on your form include this little icon. That means if the value contains data, it will be populated when the customer lands on the form. I would also suggest making First Name and Last Name required fields so that someone cannot leave those blank which could mess up your nice clean data.

Most important is the email field. Use the feature on the field for Read only and turn this on.

For some styling of this field, add this to your CSS in the <style></style> section in the HTML of the form. Obviously change the colours to make sense for your branding. The cursor not allowed makes a red sign when someone hovers their mouse over the field.

.marketingForm input[readonly] {
  background-color: #00c4f61a;
  color: #225ea2;
  cursor: not-allowed;
}

What you can also do is include a tool tip so they see more about not being able to change their email address and that they should opt out and resubscribe with their new email if applicable.

To do this, go in to the HTML of your form and find the input for the email address. The value between the quotes for title can then be changed to show whatever message you wish.

Once you have your form all set up, publish it and add to a page on your website. Then make sure you include a link in your email footer that goes to the page you created. Make sure you differentiate the link from the Unsubscribe link so it is clear what each one is for.

Now when you send out an email and someone clicks on the Update Profile link, context of the person will be passed through in the URL and the relevant values will be populated in each field. The email address field will be read only. It’s up to you what you add on the page, but I am clearly stating at the top that they cannot change their email from here and that they can opt out from here if they wish, and can then subscribe with their new email.

To allow them to Opt Out by ticking a box rather than unticking it, add your Purpose (or Topic) tick box at the bottom of the form, then make sure the when checked option is ‘Opt user out of the purpose’. That way, the person has to actively tick it to Opt Out.

Finally, what happens if your page is indexed by Google, or someone manages to get back to the page without clicking on a link to it from one of your emails? Well, there will be no prefill due to the lack of context of the person when this happens, meaning none of the fields will be filled out. For this, we can add a simple script to the HTML of the form. Add it directly below the end of your CSS so right after </style>. Update the msg.innterHTML block to include what ever message you want to show.

<script>
document.addEventListener('d365mkt-afterformload', function () {
    if (window._emailCheckHandled) return;
    window._emailCheckHandled = true;

    // Wait briefly to let Dynamics prefill the email
    setTimeout(() => {
        const form = document.querySelector('.marketingForm');
        if (!form) return;

        const emailInput = form.querySelector('input[name="emailaddress1"]');
        if (!emailInput) return;

        if (!emailInput.value.trim()) {
            // Hide the form
            form.style.display = 'none';

            // Show message
            const msg = document.createElement('div');
            msg.className="email-warning-message";
             msg.innerHTML = 'You seem to have landed on this page directly, rather than clicking the Update Profile link from an email.<br>It is also possible you have a cookie blocker preventing this form from working correctly.<br>Please check and try accessing this page from an email you have received, or use the Contact form if you are still having issues.';
            form.parentNode.insertBefore(msg, form);
        }
    }, 300); // small delay to let prefill populate
});
</script>

Now when the email address field is empty, it will look like this and the form cannot be used.

To style the message block, you can add this to the CSS of the form and adjust as per your own brand requirements.

.email-warning-message {
    color: #225ea2;
    font-weight: bold;
    text-align: center;
    padding: 50px 10px;
    background-color: aliceblue;
    margin: 3em;
    border: 1px dotted #00c6f7;
    font-family: "Exo 2", sans-serif;
}

Hope this is useful! It could be a great way to gather more information about your customers and leads by asking them for more information, even potentially a different form for different journeys to get a richer and well rounded profile for each person.

Original Post http://meganvwalker.com/build-an-update-profile-form-in-customer-insights/