Make Your Marketo Forms More User-Friendly With This Tip


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.


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

Related Posts

  • 08/09/2017
    How to Create Responsive Marketo Forms

    Marketo forms, by default, have set widths for many elements including all the form fields, labels and even the form itself. If you’re embedding your form in a responsive landing page, you might want to make the form fully responsive as well. With a bit of CSS, you can make your one-column and two-column Marketo forms look great on every device.

  • 04/01/2017
    Beautiful Marketo Forms: Styling Checkboxes and Radio Buttons

    Your Marketo forms don’t have to be boring. With a little extra CSS you can create beautiful Marketo forms with customized checkboxes and radio buttons. In this tutorial, I’ll show you how you can style checkboxes and radio buttons within Marketo forms with minimal coding.

  • 27/10/2016
    How to Create a 2 Column Pardot Form

    After launching my Form Style Generator for Pardot Forms, the number one question I receive is ‘how do I create a 2 column form in Pardot?’ I might update the style generator to include this in the future, but in the meantime, here’s how to create a 2 column Pardot form with minimal coding.

1 comment(s)
  • JD

    06/07/2017 at 9:12 am

    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 sales and marketing professional.


Most Commented
Popular Posts