Creative Ways to Spice Up Your Pardot Forms: Part 1

In:

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.

This is part 1 of the 3 part series. Check out part 2 here.

1. Floating labels

You have probably seen this technique before. The label appears as placeholder text and when you click on the field the text moves out of the way and allows you to type. This technique can be applied to your Pardot forms in three steps.

Here’s an example of what it looks like. Click on the field to see the effect.

See the Pen Pardot form floated labels (Styled) by Jenna Molby (@jennamolby) on CodePen.



Adding this effect to your Pardot forms

Step 1: Edit your layout template

In order for this to work the labels within your forms must be placed below the fields. By default, the labels are above the form fields. To modify this, you will need to edit the layout template, click on the form tab and replace everything within the editor with the code below.





Step 2: Add the CSS

Add the CSS below to your layout template. This will create the effect of the floating labels for all form field other than radio buttons and checkboxes.



Step 3: Add the Javascript

In addition to the CSS, this method uses some Javascript. Place the code below within your layout template as well.



The result

Here’s what the floating labels look like after implementing all the code within the layout template.

See the Pen Pardot form floated labels (Simple) by Jenna Molby (@jennamolby) on CodePen.



2. Searchable dropdowns

I came across this technique when I was registering for a webinar recently. 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 Pardot forms. It turns out, you can and not only is it super easy to implement, but it also makes long drop-down in your Pardot forms more user-friendly.

Demo

Here is what a searchable drop down looks like in action.

See the Pen Chosen.js Demo (Single Select) with Pardot Forms by Jenna Molby (@jennamolby) on CodePen.



Adding this effect to your Pardot forms

Navigate to your form and click edit form. Go to step 3: Look and Feel, click on the below form tab, click on the HTML icon and paste this code:

Update country with the name of your drop down field. Optionally, you can update the no_results_text to what ever you want to display when the no results are found for the searched term.

Questions?

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

Related Posts

  • 05/03/2020
    How to Create a Better Date Picker Within Pardot Forms

    Want to be able to restrict the date range of a date picker within your Pardot forms? The default date picker with Pardot does not provide this option, but with a couple of lines of JavaScript, you can enhance the functionality of the date picker. In this tutorial, I’ll show you how to use the jQuery UI date picker within your Pardot form.

  • 09/10/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 2

    The 2nd part of the form customization series is finally here! In part 1, I showed you how to implement the popular floating label technique and how to create searchable, user-friendly dropdowns. In this post, I will show you how to create a conversational, paragraph-style form and how to create a form on a single line.

  • 17/06/2019
    How to Integrate Gravity Forms With Pardot

    Gravity Forms is one of the easiest tools to create advanced forms for your Wordpress website and with some customization they can be integrated with Pardot. In this post, I will show you how to integrate Gravity Forms using Pardot Form Handlers.

34 comment(s)
  • Kyle

    21/01/2020 at 11:44 am
    Reply

    This is a neat trick! Is there any way this could be done for a multi-select? Can't seem to get it to work for that field type.

    • Jenna Molby
      to Kyle

      23/01/2020 at 11:42 am
      Reply

      Hi Kyle, thank you! Yes, you can apply this to multi-select dropdowns as well. The documentation for that can be found here: https://davidwalsh.name/demo/jquery-chosen.php. Cheers, Jenna

  • Ali

    18/12/2019 at 11:18 pm
    Reply

    Hello, Thank you for sharing this trick about forms, In the Pardot form can we add mobile number with country code in Dropdown, Please share your view or it will be great if you share blog on it.

    • Jenna Molby
      to Ali

      19/12/2019 at 11:37 am
      Reply

      Hi Ali, I haven't tried it myself, yet, but I don't see why you wouldn't be able to do that. Thanks for the suggestion! Cheers, Jenna

  • Lori

    05/12/2019 at 1:08 pm
    Reply

    Hi Jenny, love your site! I am using a Pardot form handler: First Name Last Name Email Address Company Job Title Country But the form all shows up as a paragraph. I want to borrow your Floating Labels styling above. But I don't know how to add the CSS to the code that I copied above. I'm not a coder! I'm good with copying and pasting and then can figure out how to make small modifications. Can you please assist me?

    • Jenna Molby
      to Lori

      09/12/2019 at 9:42 am
      Reply

      Hi Lori, This CSS is for embedded Pardot forms only since the HTML structure is always the same. It's possible to modify the CSS to match the HTML for your form handler, but it would require quite a bit of tweaking. Cheers, Jenna

  • Maxime

    03/10/2019 at 2:50 pm
    Reply

    Great tips Jenna Thank you! And when do you think the 3 other parts will be published? Thank You!

    • Jenna Molby
      to Maxime

      04/10/2019 at 2:20 pm
      Reply

      You're welcome! Part 2 is coming soon :)

  • Martin Gabriel

    05/07/2019 at 6:56 am
    Reply

    Great Blog Post But you can also use it (floating labels) with the labels before the inputs simply change the js code to $('input[type=text], select, textarea').addClass('floatLabel'); (function($){ function floatLabel(inputType){ $(inputType).each(function(){ var $this = $(this); // on focus add classs active to label $this.focus(function(){ $this.prev().addClass("active"); }); //on blur check field and remove class if needed $this.blur(function(){ if($this.val() === '' || $this.val() === 'blank'){ $this.prev().removeClass(); } }); //manage the pre-populated values if($this.val() != '' ){ $this.closest('.form-field').find('label').addClass('active'); } }); } floatLabel(".floatLabel"); })(jQuery);

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