For an update on this article and more Javascript in marketing forms, check out the Javascript library: Javascript library for real-time marketing form in Customer Insights
***Please be aware: The content is accurate at the time of creation. It may be that Microsoft has made changes in the meantime.***
What I like about the Real-time Marketing forms is their modern designer and the fact that you don’t have to create a Marketing form field any longer. All form fields on the contact or lead are automatically a marketing field that you can use in the form designer. Even when you add a new field to these tables, it appears within seconds in the Marketing form as well.
Use Case: Show or hide fields based on fields input in the Real-time Marketing forms
Sometimes we want to show or hide different fields based on what the customer is entering in another field. Example: We ask the contacts whether they are a customer already. And if yes, they should enter their customer number. Unfortunately there is no easy checkbox for that in the designer. So we need some adjustments and javascripts in the HTML.
Create Real-time Marketing form
First thing of course is the markting form. So in Real-time Marketing you create the form and add all necessay fields to the form, also the customer number field.
Find the correct fields
Fortunately, it is not necessary to add HTML or CSS with classes and IDs. It is enough to know the logical name of the field, because we add it to the script right away. You can find out the logical name either through the make portal or much, much easier, of course, directly in the real-time marketing form. Select the field you want to know the technical name of and in the button on the right side you will see the field you want to map and the technical name.
Ok, now let’s see how to add the javascript and display the customer number only under certain conditions.
Add the javascript
The script first defines which fields are used as triggers of our function, but also which field should then be shown and hidden. Before you insert the script, remember to change the logical name.
<script>
let customer = document.querySelector('input[name="cr6d5_areyoualreadyacustomer"]');
document.querySelector('input[name="cr6d5_customernumber"]').style.display = 'none';
customer.addEventListener('change', showCustomerNumber);
function showCustomerNumber() {
if (customer.checked === true) {
document.querySelector('input[name="cr6d5_customernumber"]').style.display = 'block';
}
else {
document.querySelector('input[name="cr6d5_customernumber"]').style.display = 'none';
}
}
</script>The script first defines the customer variable where we set the checkbox field. Then it first hides the “Customer Number” field, because it should only be displayed when the checkbox is checked. And then it “listens” for the change of the customer field and executes the function. There we first check a condition – is the customer field checked (true), or not. In our case we want to show the customer field only if the previous field is set to “yes”, but many other actions are possible, e.g. that the field should also become a mandatory field. We also add an else-condition, so that the field is hidden again if the checkbox is empty.
Now go to the HTML code of your form. You will find the button in the upper right corner of the designer. There we can insert the script. You can now place the javascript somewhere inside the <head> tag. I usually add it right to the end, so before the </head> tag. Don’t paste the code into the section, the form editor will remove the code automatically and without warning.
Important: When a form is live and you change something, like a field or the script, it can take up to 10 minutes until it is reflected on the form page!
Summary
- Use the script in the article and replace the field names with yours
- Add the <script> to your form in the <head> section
- Test your form
- You’re all set!
Unfortunately there is no Form Template functionality yet for Real-time Marketing. But for now, you can of course copy and paste the HTML code for future forms.
Check out the FAQ section of my blog as well: Short questions with quick answers! Go to FAQs
6 Responses
I added a script to my form’s HTML editor (using copy/paste and tweaking for field name changes) but every time I go back into the HTML editor, the script is gone.
You wrote above “Don’t paste the code into the section, the form editor will remove the code automatically and without warning”. What did you mean by “…into the section”?
What is the correct way to add a script?
Hi Michelle, I have made the experience that the script stays at the right playe when you add it between the and the tags. Hope this helps!
Hi!
Thank you for several great posts about this topic.
I’m trying to populate some hidden fields on a standalone event registration form with parameters from the URL (as described by Microsoft here https://learn.microsoft.com/en-us/dynamics365/customer-insights/journeys/real-time-marketing-manage-forms#example-2-populate-a-hidden-field-with-a-utm-parameter-value-from-a-url), but the script seems to be ignored. Are there limitations to add scripts for standalone pages and/or event registrations?
Hi Venke,
there is a new toggle in the features switches for custom javascript in forms. I think this has to be switched on otherwise the script will be deleted automatically.
Hope this helps you 🙂
Hi Pauline,
Can you please help us with the code for Onclick of a Link to open a popup window with the desired details. We have tried using the below code in the HTML section of Realtime marketing forms:
Test
const aTag = document.getElementById(“sampleid”)
aTag.addEventListener(“click”, openInNewWindow());
function openInNewWindow() { window.open(“https://www.google.com”, ‘_blank’, ‘width=400, height=250’);
}
Also used the below :
Visit Example.com
The Onclick function itself is getting removed when we are saving and publishing the Realtime marketing forms.
Any help on the below is truly appreciated.
Regards,
Sandeep
Hi Sandeep,
I have added a chapter to my Javascript library for redirects: https://paulinekolde.info/javascript-library-for-real-time-marketing-form-in-customer-insights/
When you use this as a basis for your pop-up code, this should help that the code is not automatically removed.
Hope it helps!