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

  • 28/02/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 1

    Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.

  • 05/02/2019
    How to Customize your Pardot Email Preference Page

    In this tutorial, I will show you how to turn the default Pardot email preference page into a preference page that matches your brand. You will learn how to customize everything including the header, footer, form, and text.

  • 11/12/2018
    Beautiful Pardot Forms: Styling Checkboxes and Radio Buttons

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

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

LEARN MORE

Categories
Most Commented
Popular Posts