Like
Share
ReportIntroduction
Unlocking the power of data is crucial in today's business environment. If you're looking for a way to maximize the potential of your custom-built forms, generate leads, and truly understand your audience, you've come to the right place. This blog post will introduce you to a transformative feature of Customer Insights - Journeys, a tool that seamlessly integrates with any external form, allowing you to capture submissions and convert them into valuable leads or contacts.From easy JavaScript creation to the ability to embed capture scripts into multiple pages, the power to transform your business is right at your fingertips.
With the Wave 1 release of Customer Insights – Journey, we announced the form capture feature that allows marketing users to capture form submissions from basically any third-party system into CI-J. This has been a long-awaited feature for real-time marketing and is described here:
https://learn.microsoft.com/en-us/dynamics365/customer-insights/journeys/real-time-marketing-form-capture
In this guide, we want to illustrate how to utilize this feature using a practical example. We've chosen to use WordPress as our platform, coupled with the Contact Form 7 plugin, a popular tool for creating and managing forms on your website.
The process involves configuring the settings of our feature to integrate with Contact Form 7. This configuration allows any data submitted through your Contact Form 7 forms to be automatically captured and used to create new leads or contacts in Customer Insights - Journeys.
The configuration of the systems require a certain developer background in HTML and Javascript.
Prerequisites
Some prior conditions need to be met for this scenario and they are explained in the following sections.WordPress and Contact Form 7
The first thing we need for this scenario is an instance of WordPress. This very famous content management system is available on many platforms. In my setup, I used an Azure hosted instance of WordPress. Once installed, we could use any theme to make the site look nice. In my example, I used the “One Business Blocks” template.
There are many ways to provide form capabilities in WordPress and they differ in functionality and convenience. Again, one of the most famous form generators is Contact Form 7 which is available as a free plugin for WordPress. I created a simple form to capture some fields from a site visitor. This is how the configuration looks like in Contact Form 7:
Please note that I named the fields already corresponding to the contact fields in Dataverse. Although this is not required, it makes the mapping easier later.
The form must be included on a page in the site to appear. In the theme I used, there already is a “contact” menu item which can be used to create a new simple page and include the form in there. All we have to do is to paste the generated shortcode in the page, for example:
[contact-form-7 id="430c0c7" title="Contact form"]
The form integrated on the web page looks like this:
That’s it for the WordPress part for now. Let’s look at the things that we need to configure in CI-J to make this work.
Customer Insights – Journeys prerequisites
The first thing you might want to take care of is that CI-J allows the external system to receive form submissions. This must be accomplished by- adding a domain record for the external page (Authenticate your domains - Dynamics 365 Customer Insights | Microsoft Learn) and enable it for Form hosting.
- Form capture is disabled by default, the feature needs to be enabled first via a feature switch to make use of it. This will also be the behavior once this is general available.
- optionally add an ownership key to the DNS zone of the external system. For Azure hosted web apps, it is possible to create a DNS zone for the web app.
Please note that it is not required to add an ownership key to the DNS zone. It is sufficient to add the domain record in CI-J and leave the validation for the ownership open.
Now, we can just go ahead and create a form in the real-time form editor and configure form capture. The general process to use the form capture is described here: Preview: Capture forms in Customer Insights - Journeys - Dynamics 365 Customer Insights | Microsoft Learn
For the purpose of this implementation, I just created a very basic newsletter form in the form designer.
The form is published so that we can access the “Form Capture Script”.
The following step is to connect everything now.
Connecting the dots
Now that we have created the form in WordPress and also the corresponding script in CI-J, we can modify the generated script out of CI-J to fit to the WordPress form. You can use Visual Studio Code or any other editor to do this. This is the result:
Please note the following:
- The form capture script starts with a dedicated script tag that loads the required resources. This is required for the form capture feature to work properly and needs to be included later when copying this script into WordPress.
- At the beginning of the script, the waitForElement function is used to identify and select the form in WordPress. Here, I used the expression .wpcf7-form as a CSS selector to get a reference to the Contact Form 7 – form. Once this is done, the form fields can be accessed just by their corresponding name. This is the most crucial step because if the form cannot be identified by this CSS selector, the script doesn’t work. You can use the browser development tools to identify the form and look at the attributes to select the right value.
- Because the Contact Form 7 form already contained the field names corresponding to the Dataverse contact entity, the mapping is very easy.
The next thing we need to do is to paste this script on the page where the form resides. Following the documentation of Contact Form 7, we need to go to the page template to access the code editor and just paste the script in there.
You can access the code editor by clicking the three dots on the top left and choose “Code editor” in the menu. The screenshot above only shows the first lines of the script
When everything was done correctly and there a no script errors or typos, the submission of the form just works and submits the values to CI-J. You can review the submissions in the submissions tab in the real-time form editor.
Additional validation
In this example, we used only three simple attributes in our form. It is also possible to use more complex types like phone numbers or even lookups. Especially capturing the phone number is interesting these days to use SMS as an additional marketing channel.In such a case, you must make sure to use the right Dataverse phone number field for the entity (contact or lead). In CI-J, the SMS channel uses the “mobile phone” field out of the box. The real-time form editor makes some validations depending on the attribute to make sure that an email and an SMS can be sent out. This validation is done by regular expressions, and you can look at the expression by
- Put the “mobile phone” field on the form.
- Select the field and expand the “Properties” section on the right-hand side.
- “Phone Number” is selected in the validation drop down. Change this to “custom”.
- A dialog appears presenting you the regular expression that is used for the validation, so you can copy and use it later on.
Summary
Form capture allows you to create your own forms with your CMS and transfer the data to CI-J. This enables you to use the contacts or leads you obtain to launch marketing campaigns with CI-J. Additionally, you can leverage your existing resources and access all the marketing data you require in CI-J.Once all prerequisites are in place, it is very easy to integrate the form capture script in your system to start capturing.
*This post is locked for comments