Collecting Net Promoter Score Feedback Using Realtime Marketing Forms

When creating your marketing forms in Customer Insights – Journeys, you have choices in terms of the types of fields you can add. You’ve got lookup fields you can add, choice fields you can display as drop downs, yes/no fields you can show as radio buttons and so on. If your organisation collects feedback to calculate your Net Promoter Score, perhaps you have wished you can collect it via your Realtime Marketing forms. Well, you can! It’s not obvious, but using CSS and some minor changes in the HTML, you can definitely do that. Let’s take a look at collecting Net Promoter Score feedback using Realtime marketing forms, and get this set up!

Although you can do custom fields that are not mapped, it’s better to add a fields specifically for gathering the NPS feedback from your Contacts. First thing I would suggest, add a global Choice field to set the NPS Type. This will allow you to show if the Contact is a Promoter, Passive or a Detractor. Although you don’t need to set colours for each option, or use the coloured circle emojis, it’s a nice visual for people reviewing the data in D365.

Now on the Contact table, you at least need an NPS field that is a whole number. This is the field we will add to the Realtime marketing form. In the Advanced Options when adding the field, set the minimum value as 0 and the max as 10. The other ones can be useful for tracking extra information, such as any feedback related to the NPS, the date it was submitted, and of course, the NPS Type using the choice field above.

However, the NPS Type field on the Contact is using the formula option rather than a Choice. This way we can set it correctly based on the NPS value for each Contact.

This is the formula used. If there is no NPS score given, we will leave the field blank. If it’s 6 or less, the person is considered a Detractor. Greater than or equal to 9 and they are a Promoter. A 7 or an 8 and they will be Passive.

If(
    IsBlank(NPS), 
        Blank(),
    NPS <= 6, 
        [@'NPS Type'].' Detractor',
    NPS >= 9, 
        [@'NPS Type'].' Promoter',
    (NPS = 7) Or (NPS = 8), 
        [@'NPS Type'].' Passive',
    Blank()
)

Now let’s look at a Realtime Marketing form. Add on your NPS field. You should see the min and max range you added to the field in the Advanced section. If not, make sure to add it here. If the sole purpose of the form is to capture the NPS input, make sure you make the field required. Also be sure to turn off the prefill button. You don’t want it to show the value the Contact selected the past time! Change the label to something like ‘How likely are you to recommend our company?’.

Now be brave and click on the HTML button from the top right of the form. Look for where you added the field (search for the question label you added to the question). Right below the label you should see the input id. We need to change that to nps_input. It doesn’t have to be that exactly, but it will need to match logic we add in to our CSS later. So unless you are really confident, go with what I am suggesting for now. Right below the input section, we need to add the values 0 to 10.

                       <div class="nps-labels">
                            <span class="nps-num detractor">0</span>
                            <span class="nps-num detractor">1</span>
                            <span class="nps-num detractor">2</span>
                            <span class="nps-num detractor">3</span>
                            <span class="nps-num detractor">4</span>
                            <span class="nps-num detractor">5</span>
                            <span class="nps-num detractor">6</span>
                            <span class="nps-num passive">7</span>
                            <span class="nps-num passive">8</span>
                            <span class="nps-num promoter">9</span>
                            <span class="nps-num promoter">10</span>
                        </div>

So that section of the HTML should end up looking like this instead. Don’t change the name part, that will be what ever you have called your field when you added it.

If you were to close the HTML now, it wouldn’t look so good. In fact, you would think you had done something wrong… but it’s because we haven’t added the magic of CSS. We need to hide the NPS input and make the numbers look pretty.

Here is everything you need to add which should go in the <style> section of the HTML. You can add it all to the top part if you are not sure where to put it. The first part below is hiding the field input. Then we are styling the number so it has a specific colour (green for Promoter, yellow for Passive, red for Detractor) and also setting it so the number selected changes style so it’s obvious which one was clicked on.

        input#nps_input {
            display: none;
        }

        .nps-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 550px;
            margin-top: 8px;
        }

        .nps-num {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 2px solid #ccc;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        /* NPS colors */
        .detractor {
            border-color: #d93025;
            color: #d93025;
        }

        .passive {
            border-color: #e67e22;
            color: #e67e22;
        }

        .promoter {
            border-color: #2e7d32;
            color: #2e7d32;
        }

        /* Selected state: no scaling */
        .nps-num.selected {
            background-color: currentColor;
            color: white;
        }

        /* Selected state: filled circle with white number */
        .nps-num.selected.detractor {
            background-color: #d93025;
            /* red */
            color: white;
        }

        .nps-num.selected.passive {
            background-color: #e67e22;
            /* orange */
            color: white;
        }

        .nps-num.selected.promoter {
            background-color: #2e7d32;
            /* green */
            color: white;
        }

We are getting somewhere! Now it LOOKS like a Net Promoter Score question right? Still a bit to do.

If you were to look at it on your mobile, the numbers would be a bit squished and not round, so we need to adjust that in the CSS too.

@media only screen and (max-width: 768px) {
.nps-num {
    width: 30px;
    height: 22px;
    margin-left: 2px;
}
}

Now the last part. What needs to happen when someone clicks on a number is two things. The style of the number changes from a colour border, colour number and white background to a coloured background white number, and the number clicked on needs to be added to the hidden input, which is what will be saved in to the field when the form is submitted. To do this, we can use the following script. It needs to go directly after the </head> tag in the HTML.

<script>
        const nums = document.querySelectorAll('.nps-num');
const numberInput = document.getElementById('nps-input');

nums.forEach(num => {
  num.addEventListener('click', () => {
    // Remove previous selection
    nums.forEach(n => n.classList.remove('selected'));

    // Add selection to clicked number
    num.classList.add('selected');

    // Update the visible number input
    numberInput.value = num.textContent;
  });
});


    </script>

Now you can see it working. The 9 has been clicked on so the styling changed AND it was populated in to the input for the field so it will be stored when the person submits the form.

One last thing you might want to do is add the NPS Submitted date field if you decided to add it earlier. Add this as a hidden field, then add the following script which will populate the field with the current date. The only thing you need to change below is the input name where you see mvw_npssubmitted and put the field name in your system.

<script>
        document.addEventListener("d365mkt-afterformload", function () {
    const dateInput = document.querySelector('input[name="mvw_npssubmitted"]');
    if (dateInput && !dateInput.value) {
      const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
      dateInput.value = today;
    }
  });
    </script>

If you want to review the data, you will need to add the new NPS related fields to your Contact record. This gives you an idea of how individual customers/subscribers are feeling, and can be used to calculate the Net Promoter Score for each Account and an overall score for your Organisation. More on that in a future blog post!

Oh and the colours we added to the global choice field at the beginning? Those can be seen when adding to a view of your Contacts. Nice!

Want to give it a go? You can fill out the form here. This is capturing feedback on the D365 Marketing Weekly newsletter and is a genuine form I am using to understand where things could be better and if people are happy. In other words, if you fill it out, please be genuine

Original Post http://meganvwalker.com/net-promoter-score-feedback-using-realtime-marketing/