Working With Microsoft Dynamics Marketing Landing Pages

Last week, we started the process of implementing Microsoft Dynamics Marketing for Microsoft Dynamics CRM internally here at Encore.  One of the first steps we took was to begin the integration of landing pages into our website.  Here are some tips for embedding the landing pages and customizing them to suit your needs.

What is a Landing Page in Microsoft Dynamics Marketing?

When we think of landing pages, we usually think of an entire web page, which includes the site’s header, footer, design, copy, images, call to action, a form, and so on.  In Microsoft Dynamics Marketing however, a landing page refers only to a form.  When you create a landing page in Dynamics Marketing, you are really just creating a form that can then be embedded into a web page.

How Do I Embed Landing Pages?

First, you need to create the landing page.  Go to Marketing Execution > Lead Management > Landing Pages to customize your landing page’s behaviour, form fields, and copy.

Once this is done, embedding the landing page form into your website is fairly simple.  In your landing page’s HTML code, place an iFrame in the location you want the form to appear:

<iframe url=”example.marketing.dynamics.com/LeadManagement/MaintainLeadForm.aspx?xxxx”>

The URL you need to embed for any landing page is given to you by Dynamics Marketing when you set up that landing page.

This may be a complicated process if you don’t have a solid understanding of HTML or web development in general.  If this is the case, I recommend that you talk to us (or your web designer) about integrating Dynamics Marketing into your website’s Content Management System (CMS).

Customizing the Form’s Look and Feel

The look and feel of Dynamics Marketing landing page forms are very plain, which makes them suitable for many different websites.  However, as marketers, we like to customize the landing page’s look and feel  in an attempt to increase conversion rates. This must be done with CSS (Cascading Style Sheets).

Under layout, you have access to an area (Content > Layout > Header) that allows you to add custom styling to your form.  Here are some tips for styling.  These examples are taken from our own landing pages, so you’ll have to tweak them a bit to get them to fit in with your own website.

To give your form a background colour:

.mainContainerClass {background:rgb(234, 243, 251); padding:20px;}

To make your text fields look a little more friendly:

input[type=text]{border:1px solid #cccccc; border-radius:2px; display:block; font-size:16px; padding:6px; height:18px; width:100%;}

Also, if your form is going to be skinnier than two columns, it seems like there’s a big gap between the CAPTCHA and the field to enter the letters/numbers.  You can fix this by adding:

.rightColumnClass{margin-top:5px !important;}

To customize the label font:

.labelClass {position:relative;left:0; width:232px;top:4px;color:rgb(51, 51, 51); font-family:”Proxima N W15 Smbd”, Lucida Grande, Lucida, Verdana, sans-serif; font-size:12px; display:block;}

To colour your “submit” button:

input[type=submit]{width:250px !important; font-size:17px; padding:15px 30px 16px !important; min-height:40px !important; background:#ffad2a !important; border:1px solid #f27500 !important; color:white !important; display:inline-block; text-shadow:#a24c11 0 1px 0; outline:none; text-align:center; text-decoration:none; border-radius:6px; cursor:pointer !important;}

input[type=submit]:hover{border:1px solid #147600 !important;background:#82c73f  !important;}

Note that this example will make the button much larger than it is out of the box. We made up for this by hiding the “clear” button:

To hide unnecessary form elements:

You can do this by adding:

{display: none !important;}

To the element you want to make invisible.  These might include:

• input [title=clear] (the “Clear” button)
•  .requiredAsteriskClass (the required asterisk)
•  .rcCaptchaAudioLink (the link to have the CAPTCHA read aloud to the user)
•  .rcRefreshImage (the link to refresh the CAPTCHA image)

Here is an example of a form before styling:

And after:

The possibilities for customizing the look and feel of your forms are nearly endless if you have a good understanding of CSS.  One thing that can not be customized (yet, we hope) is the CAPTCHA spam prevention method, which is mandatory at this time.

Overall, I am impressed with Microsoft Dynamics Marketing landing pages, and the options for their customization. I love the ability they give us to immediately start working with the leads we collect.  If you have any questions about any of the steps in this article, don’t hesitate to contact us.