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

  • 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.






  • 23/08/2016
    How to Improve Pardot Form Conversions by Using Google Places

    It’s a fact that shorter forms have a higher conversion rate, but in B2B marketing longer forms are needed to capture essential information for lead scoring and lead routing. In this tutorial, I will show you how to use the Google Places API to auto-fill city, state/province, country and postal code/zip code within your Pardot forms. Don’t worry, you don’t need to know how to code to implement this, you just need to know how to copy & paste.






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

I’m a Marketing Operations Manager and Marketo Certified Expert who is passionate about front-end development, web design, data, and email marketing. LEARN MORE

Categories
Most Commented
Popular Posts