Make Your Marketo Forms More User-Friendly With This Tip

In:

I was registering for a webinar this week and when I went to select my Country from the drop-down, I was greeted with a search feature for the drop-down. I immediately started Googling what JavaScript plugin they were using to see if I could use it on Marketo forms. It turns out, you can and not only is it super easy to implement, but it also makes long drop-down in your Marketo forms more user-friendly. I’ll walk you through how I did this in 4 easy steps.

The Effect

I’ll be showing you how to do 2 different drop-down styles. The first one is a single select drop-down with search functionality and the second one is a multi-select drop-down with search functionality.

Single select demo

See the Pen Chosen.js Demo by Jenna Molby (@jennamolby) on CodePen.

Multi-select demo

See the Pen Chosen.js Demo (Muit-Select) by Jenna Molby (@jennamolby) on CodePen.

Adding this effect to your Marketo forms

Step 1: Download the CSS and JavaScript files

Go to the Chosen.js download page and download the latest ZIP file of the plugin. Alternatively you can link directly using the CDN files.

The plugin comes with many files, but for this tutorial we will only be using chosen.jquery.min.js and chosen.min.css. If you’re not using one of the CDN files you will need to upload the two files into the design studio in Marketo.

Step 2: Add the files to your Marketo landing page

Now that you have all the links to the plugin files, you need to add them to the Marketo landing page that contains your form.

Add this between the <HEAD> tags of your landing page template

Note: replace it with your Marketo URL if you uploaded your files through the Design Studio.

Add this right after the closing </BODY> tag of your landing page template

Note: replace it with your Marketo URL if you uploaded your files through the Design Studio. Don’t forget to include the jQuery plugin as well.

Step 3: Find your form field names

Next you need to add some code to tell the plugin which fields you want to add this effect to. To do this you will need the names of the field(s). For this example, I’ll be using Country.

Once you know the names of your fields go back to your Marketo landing page template and add this piece of code right after the JavaScript library code (right before the closing </body> tag).

If you want this effect for a multi-select picklist. The JavaScript is exactly the same. Just make sure you select multi-select in your Marketo for setup.

Step 4: Approve & test

Approve your landing page template and your landing pages and test the your new form effect.

More examples & options

I covered a very basic example of how to use the Chosen plugin. For more options and more examples check out their plugin documentation.

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

  • 23/07/2020
    How to Add an Opt-in Message & Privacy Policy Message to Pardot Forms

    GDPR and CASL compliance are just a few reasons to add an explicit opt-in message or a privacy policy to your Pardot forms. In this post, I’ll show you how to add a custom opt-in message to your form and a privacy consent message above the form submit button.

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

1 comment(s)
  • JD

    06/07/2017 at 9:12 am
    Reply

    Super easy! Nice descriptions! I was able to just drop an HTML snippet at the bottom of my landing page (after putting the .js on the template) and once I discovered my field name was different than I thought, it worked immediately. THANKS!!

Leave A Comment

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

About Me


Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts