In today’s dynamic marketing landscape, ensuring streamlined user experiences is paramount. One crucial aspect is the optimization of webforms within Dynamics Customer Insights – Journeys. While capturing essential data, cluttered forms can overwhelm users and hinder conversions. Therefore, integrating custom code to tailor field visibility based on specific values emerges as a best practice, empowering marketers to display only relevant fields in real-time.
As marketers strive for precision targeting and personalized interactions, harnessing the flexibility of Dynamics Customer Insights – Journeys becomes indispensable. By incorporating custom code into marketing forms, businesses can adeptly adapt to user inputs, offering a seamless journey while minimizing distractions.
Let’s delve into the significance of custom code in real-time marketing forms and explore how it revolutionizes user engagement strategies within Dynamics Customer Insights – Journeys.
Prepare the correct settings
First you need to enable the possibility to add custom code. Navigate to Settings. Under Feature Switches, locate the option to “Enable custom JavaScript in forms” and toggle the switch to enable this feature.
After enabling custom JavaScript, proceed to create your new form. You can now incorporate custom code within the form to enhance its functionality.
Creating your form
Start by creating a form in Real Time Marketing. Add all the necessary fields to your form, including a yes/no question, just above the elements you want to hide later.
In my form, I added one question: “Do you also want to receive our book in paper?” Below that question, there’s a text element and three extra questions related to the respondent’s address. These four elements are the ones I want to hide.
Step 1: Formatting the HTML
Open the HTML. If your HTML is not formatted yet, please click on “Format document” to improve readability. Remember that an HTML element consists of a start tag, content, and an end tag. For example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Between the HTML elements, we’ll place our custom code.
Adding Custom Styles (CSS)
In the style element (spot 1), add the following CSS rule:
.hidden {
display: none;
}
This class will hide elements later.
Incorporating Javascript
Add the script element (spot 2) with the following JavaScript code:
<script>
const twoOptionField = document.getElementById(“dp_events-1000000000000”);
const radio1 = document.getElementById(“dp_events-1000000000000-1”);
twoOptionField.addEventListener(‘change’, showConditionalFields);
function showConditionalFields() {
if (radio1.checked === true){
const element = document.getElementById(“conditionalFields”).classList.remove(‘hidden’);
}
}
</script>
Replace “dp_events-1000000000000” the unique ID for your specific form. You can find this field by searching for “twoOptionFormFieldBlock” and locating the ID. Note: Each form has it own unique ID.
Hiding the target elements
Search for the elements you want to hide and place a <div> around the elements you want to hide it. <div id=”conditionalFields” class=”hidden”> <!– Your hidden elements go here –>
</div>
