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
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet">
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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
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).
<script>
MktoForms2.whenReady(function (form) {
// replace country with the field name of your drop-down
$("#Country").chosen({no_results_text: "Oops, nothing found!"});
});
</script>
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