How to Enhance the Presentation of Marketo Forms

Last week I was tasked with a project involving the setup of a Marketo.com form within a Marketo landing page. The wireframe I received of the form was very straight-forward except for a section that included thumbnail images next to a series of checkboxes. Marketo, because of it’s drag-and-drop interface, has very standardized HTML that it generates for a form. Here are a couple ways to enhance Marketo forms.

Use JavaScript, I recommend using this method sparingly. In my case, the fields I planned to manipulate were not required and the additional images and layout modification I planned to change with JavaScript was not critical to the form or the ability for a user to successfully submit the form.

Using jQuery in Marketo Forms

First, refer to the jQuery library in your landing page template like so:

1
2
3
4
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
if (typeof $jQ == 'undefined') { var $jQ = jQuery.noConflict(); }
</script>

Select Form Fields to Manipulate

Next, you’ll want to select the field(s) you need to enhance. The HTML Marketo generates for a form is an unordered list with each form field contained within an LI element. Each field LI contains a standard set of elements like SPAN and LABEL. In order to create a JavaScript object of the entire form field I recommend creating a selector with an INPUT or SELECT element’s id attribute value and then using the jQuery parents() method to grab the entire LI form field. Each Marketo form LI has a class of mktField. The following selector is ideal because the form fields may be be ordered differently in the Marketo form composer at a later time.

1
2
3
<script>
var modField = $jQ('#target-field').parents('.mktField');
</script>

Now that you have an easy way to access the markup for the target Marketo field, you could do any number of modifications by adding classes, appending or replacing elements. Custom CSS can then be included into your landing page template to update the style of your modified form field markup.

Form Field Modification Example

In my case, I used the object to toggle the checked status of the checkbox field if the user clicked on the associated thumbnail image or label.

1
2
3
4
5
6
7
modField.find('.thumb-img, label').css('cursor','pointer').click(function() {
    if ($jQ('#target-field').is(':checked')) {
        $jQ('#target-field').attr('checked','');
    } else {
        $jQ('#target-field').attr('checked','checked');
    }
});

Marketo also provides a form library (login required) that I recommend using to match the overall look of your landing page or to share with your web designer to give them some options that may speed up development.

This entry was posted in Technology and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>