Making the most of Marketo with UI extensions and Lambda functions

Marketo offers a suite of marketing automation tools that addresses the different subfields of marketing and hence, can be utilized extensively by the various arms of a full-blown marketing department. We at Contentful use Marketo as one of the solutions to handle duties performed by our marketing folks, such as forms on our landing pages.

Being such a comprehensive platform, Marketo has a bit of a steep learning curve and, at first glance, some of its features can seem tricky to implement. In our case of forms, handled by authors such as our demand generation team, the out-of-the-box process to embed the code of a Marketo form into a page is both tedious and time-consuming.

The process is an involved sequence of grabbing the embed code and pasting it into a HTML block or a markdown field on a page, and then repeating for every page where a form is desired. The stock appearance of the forms is also somewhat generic, so a degree of customization is needed to make them look more appealing.

We found a quick workaround to take manual repetition out of the equation and fill that in with easy-to-use selection dropdowns in our Contentful system using UI extensions (read more in our concept documentation). We also managed to style the forms to align more with Contentful’s own branding.

Prettifying Marketo forms

First and foremost, Marketo forms utilize inline styles on a form’s elements and have a plain default design. These forms are also decidedly proprietary with a very unique markup pattern, leading us to having to rethink our forms in order to work with Marketo.

To make sure we removed all potential conflicting styles from Marketo, we found an existing function, that we modified to be a little cleaner, which uses a div on the page to get the ID of the form (generated by our static site generator with Contentful data from the UI extension). From there, we load the form from Marketo and strip all styles and conflicting CSS added by the JavaScript from Marketo, leaving us with an unstyled HTML form.

With our new clean HTML form and the UI extension, we are able to style the Marketo form using SASS @extend with our own form design’s styles, configured to be Marketo-form-compatible.

.custom_mkto_form {
  // ...
  .mktoLabel {
    @extend .label;
    display: inline-flex;
  }

  .mktoButton {
    @extend .btn;
    @extend .btn--blue;
    @extend .btn--large;
  }

  .mktoErrorMsg {
    @extend .error-message;
  }
  // ...
}

Now, we have a form that is both easy for the author to use on a page and has nice brand-specific styles.

UI Extensions and Lambda save the day

Since it can also be a tedious and time-consuming process to embed forms manually on each page where a form is desired, we addressed this by building a UI extension in Contentful. This offers authors the ability to select the form they wanted to use on a landing page via a list of choices hosted in something like a dropdown menu.

There was a hurdle to leap over first, however. Contentful UI extensions only perform client-side API calls, but calls to the Marketo API had to be done server-side due to Marketo’s CORS and the server endpoint restrictions in place.

To do this, we built a Lambda function, hosted on Netlify to take advantage of their awesome new functions feature. The UI extension would perform a HTTP call to this function, which would return a payload of all of the forms in our Marketo instance, and subsequently parse through the payload and generate a dropdown selection of all the forms available for the editors to use on their landing pages.

You can use this very UI Extension by utilizing our new UI Extension example installer. Simply head to Settings from within the Contentful application, click on Extensions and then Add Extension. From there, click on Install an example, locate Marketo Forms from the list and Install.

The next step would be to fill the required Lambda Function URL installation parameter with the URL endpoint of your Lambda function. You can find the code for this Lambda function in the repository of our extensions.

It is best to create this Lambda function in either Netlify Functions, direct use of AWS Lambda, or any of the other serverless function platforms. Not all Lambda function services are created equal and the code might have to be modified to fit your platform of choice.

Setting it up is relatively easy; follow our tutorial on how you can get your Marketo credentials and the Environment Variables needed by the Lambda function. To use it, select the JSON object Field when you are creating your content model for a new landing page, and proceed to set the Appearance tab to be Marketo forms.

Now when your editors select a form to use on a landing page, your developers will have a nice JSON dump of the form data to work with and integrate with the Marketo Forms JavaScript API.

Try out UI extensions

UI extensions are a great way to customize and extend your editorial experience with Contentful; anyone with some JavaScript knowledge can create their own extension, leaving you with an incredibly accessible, powerful feature with endless possibilities. Start by creating a free Contentful account, if you don't already have one, and discover UI extensions... and also how great our content infrastructure works with your code and static site projects.