Make Simple Changes To The HTML On Your Form Templates In D365 Marketing

*** NOTE: ALL INFORMATION IS ACCURATE AT DATE OF PUBLISHING ***

Creating a new form in the Dynamics 365 Marketing App is pretty simple. You can start from one of the existing templates to get you going, then make adjustments as needed. There are some really simple changes you can make to the HTML of the form giving you a look and feel that’s more aligned with your own branding. Doing that on a form template means other users can then use that as their starting point rather than needing to edit every single time for each new form. Let’s look at how we can do this.

First, go to the templates section and then Form templates. I would suggest using one of the ones you like the look of to begin from. Open up the template, then from the Designer tab, click on the HTML pane. Select everything that is here and then copy it. Now go and create a new Form template.

Paste the HTML you copied from the initial template into the HTML section on the form. So in our example, it gives us this.

The first thing we can do is change the font, and set a new default font for the entire form. Many organisations use fonts that are available from Google fonts, which you can definitely do here too! Go to https://fonts.google.com and search for the font you want to add. Here we have the Blinker font. I can select different versions of the font too such as the bold, extra-light and so on.

When you click to select a style, this panel will open, providing you with the code you need. We can see below that it starts off with <link rel=”preconnect” href=”https://fonts.gstatic.com”> – then it references the font that was selected.

Once you have the code you need, you can go back to the HTML section of your new form template. Paste in all of the code. You can see I’ve added it in below. Now what we can do is set the font-family to Blinker. This means that the Blinker font will be used throughout the form.

After saving the HTML we can look back at the form and see that the font changed on each of the form fields. We didn’t have to edit each one individually. Bonus!

With this font, we can also change the weight (level of bold of the font) and update this to use 400 instead of 100.

Notice the form changes again and we now have bold on our form fields.

Next, I want to make some changes to the submit button. Looking through the code, you can see that the submit button is here. We could make changes there if we wanted.

However, on this form there is already a whole set of styling that is tied to the form button. We can add in some additional styling to this section. So here I am going to change the background colour, the font family (to Blinker), the size of the font, border radius and also use a slight gradient on the colours so it goes from purple to a grey.

Now we can see our updated form with a nice consistent font and a lovely submit button.

Once you get the hang of where you can make changes in the HTML, it’s a great idea to set up a series of templates that your team can use as a starting point, one that already has your organisations branding using fonts and colour schemes that match your marketing guidelines.

---

Check out the latest post:
Display Countdown Timer Using Nifty Images In Customer Insights - Journeys

---

This is just 1 of 478 articles. You can browse through all of them by going to the main blog page, or navigate through different categories to find more content you are interested in. You can also subscribe and get new blog posts emailed to you directly.

---