Customize Dynamics 365 Customer Insights Form Success Messages

Oct 29, 2025

—

Customize Dynamics 365 Customer Insights Form Success Messages | Complete Guide

Introduction

When someone submits a form in Dynamics 365 Customer Insights, the system automatically displays a generic success or error message. While functional, these default messages often don’t match your brand’s look and feel, and they limit your ability to create engaging post-submission experiences.

In this comprehensive guide, you’ll learn how to take complete control of your form submission experience. We’ll cover:

Disabling default messages using a single data attribute
Building custom success and error UI that matches your brand
Implementing event listeners to handle form submission states
Adding CSS styling for professional-looking messages
Creating advanced features like redirects, loading spinners, and analytics tracking
Triggering Customer Insights journeys automatically after form submission
Setting up MSPI Analytics for journey orchestration

Whether you’re looking for a simple branded success message or a sophisticated workflow that triggers personalized customer journeys, this guide provides everything you need with ready-to-use code examples.

The Problem

When someone submits a form in Dynamics 365 Customer Insights, the system automatically shows a success or error message. But what if you want to show your own custom message instead?

The Solution

Add one simple attribute to your form code to disable the default messages.

Step-by-Step Instructions

1. Find Your Form Code

Your form code looks something like this:

<div
  data-form-id='{msdynmkt_marketingformid}'
  data-form-api-url='https://{server}.dynamics.com/api/v1.0/orgs/{organizationid}/landingpageforms/forms/{msdynmkt_marketingformid}'
  data-cached-form-url='https://{server}.dynamics.com/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}'
></div>

2. Add the Magic Attribute

Add data-preventsubmissionui="true" to the top of your form div:

<div
  data-preventsubmissionui="true"
  data-form-id='{msdynmkt_marketingformid}'
  data-form-api-url='https://{server}.dynamics.com/api/v1.0/orgs/{organizationid}/landingpageforms/forms/{msdynmkt_marketingformid}'
  data-cached-form-url='https://{server}.dynamics.com/{organizationid}/digitalassets/forms/{msdynmkt_marketingformid}'
></div>

3. That’s It!

Now the default success/error messages won’t appear, and you can show your own custom UI instead.

Real-World Example

Before (with default message):

<div
  data-form-id='abc123'
  data-form-api-url='https://example.dynamics.com/api/v1.0/orgs/org123/landingpageforms/forms/abc123'
  data-cached-form-url='https://example.dynamics.com/org123/digitalassets/forms/abc123'
></div>

→ Shows Microsoft’s default “Thank you for submitting” message

After (custom message):

<div
  data-preventsubmissionui="true"
  data-form-id='abc123'
  data-form-api-url='https://example.dynamics.com/api/v1.0/orgs/org123/landingpageforms/forms/abc123'
  data-cached-form-url='https://example.dynamics.com/org123/digitalassets/forms/abc123'
></div>

→ No default message – you can now show your own!

Why This Matters

Better branding: Show messages that match your website’s design
More control: Display different messages based on the form type
Enhanced UX: Add animations, redirects, or other custom behaviors

Quick Reference

Attribute	Value	Result
`data-preventsubmissionui`	`"true"`	Hides default messages
`data-preventsubmissionui`	`"false"` or omitted	Shows default messages

How to Add Your Custom UI

Now that you’ve disabled the default messages, here’s how to show your own custom success or error messages.

Step 1: Add Event Listeners

Dynamics 365 triggers events when the form is submitted. Listen for these events:

// Wait for the page to load
document.addEventListener('DOMContentLoaded', function() {

  // Listen for successful form submission
  document.addEventListener('d365mkt-afterformsubmit', function(event) {
    // Hide the form
    document.getElementById('my-form-container').style.display = 'none';

    // Show your custom success message
    document.getElementById('custom-success-message').style.display = 'block';
  });

  // Listen for form submission errors
  document.addEventListener('d365mkt-afterformsubmiterror', function(event) {
    // Show your custom error message
    document.getElementById('custom-error-message').style.display = 'block';

    // Optional: Log the error details
    console.error('Form submission failed:', event.detail);
  });

});

Step 2: Create Your Custom Messages

Add HTML for your custom success and error messages (hidden by default):

<!-- Your form container -->
<div id="my-form-container">
  <div
    data-preventsubmissionui="true"
    data-form-id='abc123'
    data-form-api-url='https://example.dynamics.com/api/v1.0/orgs/org123/landingpageforms/forms/abc123'
    data-cached-form-url='https://example.dynamics.com/org123/digitalassets/forms/abc123'
  ></div>
</div>

<!-- Custom success message (hidden by default) -->
<div id="custom-success-message" style="display: none;">

<h2>🎉 Thank You!</h2>

<p>Your submission was successful. We'll be in touch soon!</p>
  <button onclick="location.reload()">Submit Another Response</button>
</div>

<!-- Custom error message (hidden by default) -->
<div id="custom-error-message" style="display: none;">

<h2>⚠️ Oops!</h2>

<p>Something went wrong. Please try again.</p>
  <button onclick="location.reload()">Try Again</button>
</div>

Step 3: Style Your Messages

Add CSS to make your custom messages look good:

#custom-success-message,
#custom-error-message {
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  max-width: 500px;
  margin: 20px auto;
}

#custom-success-message {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

#custom-error-message {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

#custom-success-message h2,
#custom-error-message h2 {
  margin-top: 0;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

Advanced Options

Redirect After Success

Instead of showing a message, redirect to a thank you page:

document.addEventListener('d365mkt-afterformsubmit', function(event) {
  // Redirect to thank you page after 1 second
  setTimeout(function() {
    window.location.href = '/thank-you';
  }, 1000);
});

Show Loading Spinner

Show a loading state while the form submits:

document.addEventListener('d365mkt-beforeformsubmit', function(event) {
  document.getElementById('loading-spinner').style.display = 'block';
});

document.addEventListener('d365mkt-afterformsubmit', function(event) {
  document.getElementById('loading-spinner').style.display = 'none';
  // Show success message
});

Track with Analytics

Send form submission data to Google Analytics:

document.addEventListener('d365mkt-afterformsubmit', function(event) {
  // Google Analytics 4
  gtag('event', 'form_submit', {
    'form_id': 'contact_form',
    'form_name': 'Contact Us'
  });

  // Show success message
  document.getElementById('custom-success-message').style.display = 'block';
});

Trigger Customer Insights Journey (Optional)

To automatically start a Customer Insights journey after form submission, follow these steps:

Step 1: Add MSPI Analytics Tag

Add this script near the top of your page’s head section, before any other scripts or CSS:

(function (a, t, i) { 
  var e = "MSEI"; 
  var s = "Analytics"; 
  var o = e + "queue"; 
  a[o] = a[o] || []; 
  var r = a[e] || function (n) { 
    var t = {}; 
    t[s] = {}; 
    function e(e) { 
      while (e.length) { 
        var r = e.pop(); 
        t[s][r] = function (e) { 
          return function () { 
            a[o].push([e, n, arguments]) 
          } 
        }(r) 
      } 
    } 
    var r = "track"; 
    var i = "set"; 
    e([r + "Event", r + "View", r + "Action", i + "Property", i + "User", "initialize", "teardown"]); 
    return t 
  }(i.name); 
  var n = i.name; 
  if (!a[e]) { 
    a[n] = r[s]; 
    a[o].push(["new", n]); 
    setTimeout(function () { 
      var e = "script"; 
      var r = t.createElement(e); 
      r.async = 1; 
      r.src = i.src; 
      var n = t.getElementsByTagName(e)[0]; 
      n.parentNode.insertBefore(r, n) 
    }, 1) 
  } else { 
    a[n] = new r[s] 
  } 
  if (i.user) { 
    a[n].setUser(i.user) 
  } 
  if (i.props) { 
    for (var c in i.props) { 
      a[n].setProperty(c, i.props[c]) 
    } 
  } 
  a[n].initialize(i.cfg) 
})(window, document, {
  src: "https://download.pi.dynamics.com/sdk/web/msei-0.js",
  name: "msdynmkt",
  cfg: {
    ingestionKey: "YOUR-INGESTION-KEY-HERE"
  }
});

Replace YOUR-INGESTION-KEY-HERE with your actual ingestion key from Customer Insights.

Step 2: Create Trigger Function

Add this function to track successful form submissions:

function track_formsubmission_success(customerIdentifier) {
  // Set the customer ID (can be: unique ID, email, or phone number)
  window["msdynmkt"].setUser({ 
    authId: customerIdentifier 
  });

  // Track the form submission event
  window["msdynmkt"].trackEvent({
    name: "msdynmkt_formsubmissionsuccess_085518306", // Your trigger name
    ingestionKey: "YOUR-INGESTION-KEY-HERE",
    version: "1.0.0",
    properties: {
      "bindingid": "emailaddress1"
    }
  });
}

Step 3: Call Trigger After Form Submission

Update your success event listener to call the trigger:

document.addEventListener('d365mkt-afterformsubmit', function(event) {
  // Get the submitted email address (adjust selector based on your form)
  var emailInput = document.querySelector('input[type="email"]');
  var customerEmail = emailInput ? emailInput.value : '';

  // Trigger Customer Insights journey
  if (customerEmail) {
    track_formsubmission_success(customerEmail);
  }

  // Hide form and show success message
  document.getElementById('my-form-container').style.display = 'none';
  document.getElementById('custom-success-message').style.display = 'block';
});

Customer Identifier Options

The customerIdentifier can be any of the following:

Identifier Type	Example	Notes
Unique Lead ID	`"LEAD-12345"`	Best option – guarantees unique match
Email Address	`"user@example.com"`	May return multiple results if duplicates exist
Phone Number	`"+1-555-123-4567"`	Must exactly match format in customer record

⚠️ Important: If using email or phone, multiple matching records will cause the trigger to be dropped and not processed in journeys.

Supported Property Types

You can add custom properties to track additional data:

window["msdynmkt"].trackEvent({
  name: "msdynmkt_formsubmissionsuccess_085518306",
  ingestionKey: "YOUR-INGESTION-KEY-HERE",
  version: "1.0.0",
  properties: {
    "bindingid": "emailaddress1",
    "formName": "Contact Form",           // Text
    "submissionCount": 1,                 // Number
    "isNewsletter": true,                 // Boolean
    "submittedAt": new Date().toISOString() // Date/Time
  }
});

Supported types:

Text
Number
True/False (Boolean)
Date/Time
Entity reference

Available Events

Event Name	When It Fires	Use Case
`d365mkt-beforeformsubmit`	Before form submission starts	Show loading spinner
`d365mkt-afterformsubmit`	After successful submission	Show success message
`d365mkt-afterformsubmiterror`	After submission fails	Show error message

Pro Tip: Always test your form submission in a staging environment first to ensure your custom UI and triggers work correctly before deploying to production!