A little collection of tips and HTML/CSS tweaks you can easily do on a Form in Customer Insights Journeys to make it look a little bit more dapper and professional. It’s all easy CopyPasta™ so no coding knowledge is required!

Check your updates look great (without waiting 10 minutes and refreshing a million times)

As you work your way through these changes, you will want to check and see how things look. The message you see when editing a live form says ’You are editing a live form. All changes will be published once the form is saved. It may take up to 10 minutes before the changes are reflected in the live form’ and this is a monstrous understatement, these forms love to cache which makes the form editing and refining experience so painful. But not anymore with the power of #d365mkt-nocache simply append this to the form URL and refresh the page to get the latest version of the form instantly.

Check the Theme first

In the name of ‘Anything But Code’, before you dive in with sledgehammer HTML/CSS bashing take a look at what’s available in the ‘Theme’ section of the form. There is a lot of form elements you can style using a lovely interaction WYSWIG user interface such as field labels, input fields, buttons, links and text styles. You might find what you are looking for here.

If you find that you have updated the styles but the elements on the form are not updating to match your changes, it’s because after putting the item on the form, you have made changes which have been captured as ‘inline’ styling for that specific element e.g. a button, which the theme will not override. To fix this just remove the element from the form and add it back on, then it will pick up the theme settings instead.

Navigating & Searching in the Form HTML

First, how to get to the form HTML of a form. Make sure form is in Draft or Edit mode. Select the ‘</> HTML’ button to open the HTML window and select 'Format document' to make the HTML/CSS a bit easier to navigate.

Once you have opened the html window, click somewhere inside the html, then on your keyboard use CTRL+F to launch the Find control. And also use the > icon to expand to Find & Replace too.

Post submit icon

If you are not redirecting to a thankyou page after form submission, then you are faced with the garish out of the box icon which looks better suited on a children’s encyclopaedia program from the 1990s. Add this little snippet of CSS into your form, replacing the URL with your logo or desired icon. The height or size can also be updated to a specific measurement (e.g. replace auto with 200px) if your image is too big.

Checkbox and radio button colours

The default blue of a checked checkbox or selected radio button is icky. Update the CSS to use your brand colours. You need to find the CSS section for fieldset>div>input[type="checkbox"] which should already contain the CSS property for accent-color update this to be a HEX code that aligns to your brand.

Update the title from ‘Marketing Form’

The default title of the form page is ‘Marketing Form’ which is just a bit unclassy. Update the title to something more meaningful and professional.

Make fields read-only

Now that the form prefill feature is on its way, you might way to prevent some fields from being updated. For example, you may want to restrict customers from changing their email address on a form that is prefilled. You need to first ‘disable’ the field in the HTML, and then add some CSS to style the disabled field so that they clearly looks like it cannot be edited.

Add the CSS to style the background colour of the disabled fields just before the closing </style> tag in your form

And then add disabled=”” to the end of each <input> tag of the field you want to disable, a few examples below to help!

Field & Label Spacing

The default form template has a very erm generous amount of spacing between the form labels and fields which can’t be configured in the themes. In the CSS you need to find the sections that mention ‘Block’ and adjust the padding to suit the visual look you prefer, this will adjust the spacing around the combined label and field section.

.textFormFieldBlock, .dateTimeFormFieldBlock, .twoOptionFormFieldBlock, .optionSetFormFieldBlock, .multiOptionSetFormFieldBlock, .lookupFormFieldBlock {}

table.multi .textFormFieldBlock, table.multi .dateTimeFormFieldBlock, table.multi .twoOptionFormFieldBlock, table.multi .optionSetFormFieldBlock, table.multi .multiOptionSetFormFieldBlock, table.multi .lookupFormFieldBlock {}

.consentBlock {}

You can also control the size of the space between the label and the field too within the same CSS section from above, by adjusting the gap highlighted in CSS above in purple, it’s inside the definition for:

table.multi .textFormFieldBlock, table.multi .dateTimeFormFieldBlock, table.multi .twoOptionFormFieldBlock, table.multi .optionSetFormFieldBlock, table.multi .multiOptionSetFormFieldBlock, table.multi .lookupFormFieldBlock {}

Add the Account/Company name lookup

In case you missed it, this little post will help show you how to add this pesky ‘Customer’ lookup on to a contact based marketing form.

The end

I hope this helps, and if you have any other little niggles/tweaks you are struggling let me know in the comments and I will see if I have some ideas or tips!