Touch up forms in Dynamics 365 Marketing

Working with control properties on your Dynamics 365 Marketing marketing forms can be a bit cumbersome, e.g. if you want to change the font color of all textbox labels etc.

Some edits aren’t supported from the toolbar or toolbox, e.g. changing most formatting properties of controls like text boxes, buttons etc.

Today I’m sharing a little trick I use a lot. Within the <style> tag of the forms HTML, you will find the key to edits like the above.

To demonstrate I create a new form from a template

In the default form, the text labels and borders all black.

What if I wanted them to be blue like the button? To make that happen I open the HTML editor (1)

I look inside the <style> tag, and notice there is a style for form labels. Currently only two properties are set – margin and font-size.

How to set the color? I know next to nothing about CSS and HTML. But I do know a little trick.

I save and publish the form, and add it to a marketing page

I save the page, go live, and navigate to the pages Summary tab (3) …

… to open the live page in a my Edge browser (1)

With the live page open in Edge, I click F12 on the keyboard to open the Edge Developer Tools

And here comes the trick:

In the Edge Developer Tools pane I click the element inspector (1)

Now I can point to elements of my marketing page in the left pane, and inspect the selected element in the right pane. I can even ‘experiment’ with changing property values, and experiment with adding new properties and their values.

Note: none of the edits persist – I will have to make a note of edits I want to implement when done.

As mentioned above, I’d like the color of all textbox labels to be blue. I suspect the property for that is named “color”, so I add a new line after font-size and start typing “co..”

Via intellisence all properties available to me are listed and I can select color, as well as learn about other options for properties for this element. Really helpful for a novice like me.

When it comes to the value of the property (color), I can simply finish typing “color:” and the system suggest possible values of to property color for me. Not knowing any better I pick “azure”

It turns out that isn’t what I want (the labels are barely visible), so I click the color picker (1) and point it to the button (2) in the left pane, which is exactly the color I’m looking for

Content with the resulting value for the property color, I make a note of the value (1)…

… and return to the form, opened in edit mode, and the HTML editor. I add a new line after font-size (1) and add the learnings from above (2)

Same principles can be applied when setting the border color of text boxes.

As well as with buttons

In this example I changed the color of the form’s textboxes labels and borders from black to blue

Enjoy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s