There’s no getting around Javascript in the real-time marketing form in Customer Insights. And I’ve already written a few articles with examples, but I still have to search for the right scripts every time. That costs time and nerves. That’s why I’m putting together a library of scripts and use cases for marketing forms in the hope that it will make everyday life a little easier for all of us.
If you have any other ideas or use cases that we can add, please get in touch with me 🙂
I added all scripts to a repository, feel free to contribute: Github Link
Content
Difference between marketing form and preference center
The preference center and the real-time marketing form in Customer Insights trigger javascript differently. What works in Preference Centers does not necessarily work in marketing forms!
To make the Javascript work in the Preference Center, you can see two ways to initiate the function in the code below.
For real-time marketing forms, we can use the Javascript as described in the Microsoft documentation: Documentation
Depending on when the Javascript should run, you can use different EventListeners:
- d365mkt-beforeformload
- d365mkt-afterformload
- d365mkt-formrender
- d365mkt-formsubmit
- d365mkt-afterformsubmit
Where does the Javascript belong?
From version 1.1.38813.80 or newer, you can insert the Javascript code into the <body> section of the HTML. If you insert the Javascript into the <head> section, it is automatically moved to the beginning of the <body> section.
The HTML form therefore has the following structure:
***meta tags***
Select All Checkboxes
I have already written a blog article about the Select all function. To have this library complete, I’ll also add this Javascript here.
First I build a Select All checkbox with HTML. This does not have to be a “real” field from the contact. When you check the Select All checkbox, the two purpose fields are checked as well.
Show and hide a field
As one of my first articles, I also had an example of how to show and hide a field. By default, the field is hidden and only shown when a checkbox is checked.
In this Javascript I define the variable customer, which I can find via the technical name of my custom yes/no field. And when the field is checked, the script searches for the customer number field, also using the technical name.
Show and hide multiple fields (topics)
In this example, I only want to display the topics when the user selects the corresponding purpose. I have several purposes, each with several topics.
In this Javascript, I first define the variables for the purpose and topic checkboxes. This makes the function clearer afterwards. Whenever one of the purpose checkboxes is checked, a forEach loop runs, which shows or hides the topics of the respective purpose.
Activate / deactivate button (gray out)
Instead of mandatory fields that prevent you from submitting a form, you can also gray out the submit button until the user fills in all required fields.
To do this, you must first give the button a suitable id and gray it out or deactivate it by default. The javascript then includes the conditions that reactivate the button.
Activate / deactivate fields (gray out)
The following Javascript defines how to gray out a field under certain conditions or make it writable again. In my example, only one of the purpose checkboxes may be ticked.
Option set in Javascript
Option sets occur more frequently than lookups in the marketing form. This Javascript shows fields when the user selects a certain value in the option set.
P.S. Thanks to Jean-Paul and his colleague Rob for the impulse and the basic framework for the script 🙂
Fill in option set value in Javascript
Instead of reacting to the change of an option set and showing and hiding fields, it may also be necessary to fill in an option set automatically. In my example, I want to automatically change the priority of the contact based on their feedback. If the feedback is negative, the priority should be high, whereas positive feedback does not require a quick action.
Redirect after form submission
We currently only need this script for Preference Center. Fortunately, there is a field in the marketing form where you can simply enter the URL. Megan Walker has written a better and more detailed article on redirect. You can find it here.
The most important thing is the timeframe when someone is redirected. In my code it is 1000 milliseconds. However, I have noticed that Iphone or Safari, for example, need a longer waiting time for the form to be submitted correctly. So it’s best to test well!
Validate field and display error message
This Javascript checks the input of a field. If it does not match, an error message is displayed.
There is of course also the custom validation for fields, which works in a similar way.
Please note: The JavaScript only indicates that there is an error. It does not prevent the user from actually submitting the form. For this, it is best to add the function that deactivates or reactivates the submit button.
Add somewhere to your HTML:
Bonus Code must be exactly 5 digits long.
Dynamically change country code for phone number
The default functionalitiy for the country code simplifies the entry of the phone number. But: The country code value is static. However, each country has its own country code. And for international customers in particular, it must be possible for the values to change depending on the customer’s country.
This Javascript changes the country code – depending on the country the customer selects. The country field in my example is an option set.
In the HTML of the Business Phones field you can see that there are two attributes that contain the country code. If I only change the class phoneCountryCodeLabel via the javascript, I run into the problem that the contact record that is created or updated still contains +49 in the phone field. So just changing the label is just a change in the frontend, it looks correct but it doesn’t transfer the value correctly. This is why the Javascript must also adapt the data-countrycode based on the country.
3 Option Set Dependencies
In a previous chapter we saw how to show different values based on one option set. Now this is a bit more complex. We have three option sets. And their values are dependend from each other. So when in option set 1 a value is chosen, we need to filter the values in option set 2. And depending on the chosen value in option set 2, we filter the values in option set 3.
In the javascript we need to specify the dependencies and how the option set values are related to each other. The script also includes the function to reset the values in the option set when e.g. option set 1 is changed.
***Please be aware: The content is accurate at the time of creation. It may be that Microsoft has made changes in the meantime.***
Check out the FAQ section of my blog as well: Short questions with quick answers! Go to FAQs
You think the post can also help others? Share it on LinkedIn:
5 Responses
Hi Pauline,
What a great resource! I’ve bookmarked the page.
I hoped the field relationships (show and hide a field) would get baked into RTM as in Outbound. Now I don’t have to wait.
Thanks.
Hi Byron, thanks for the great feedback, glad it helps! If you have any ideas or needs for further script, let me know 🙂
Thank you this is so helpful. I had another case recently where I was asked to add a text field that a user can use to submit comments through the form, like a notes field. Is this something that is possible with a JS as well?
Hi Yulya, thanks for your feedback! In case the contact would add notes, you can add a simple multiline text field to the form. In case the user needs comments, maybe a hidden, prefilled field on the form would help? You could use javascript to automatically populate the hiddenfield. But I am not sure if i 100% understand your requirement and i cannot think of a different solution how your user can add a comment in the marketing form on the website, while a contact is submitting the form.
Hi Pauline,
Thank you very much, the scripts helped a lot in making marketing forms. I have one question regarding the hide/show fields on the marketing form. I have the function working when a checkbox is filled to show a field, but I am wondering if it also possible to apply to whether a normal field or lookup is filled.
I have tried to create the javascript for this myself, but i got stuck on getting the change function to work. Do you know if this is possible?