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. Have you come accross a form recently and didn’t know to replicate the functionality in Pardot? Share it with me via email, a tweet @jennamolby, or in the comments.

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

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

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

16 comment(s)
  • Allie

    13/06/2019 at 7:00 am
    Reply

    Hi! When this form is used on a landing page it doesn't keep the format? Is this a me issue or Pardot issue?

    • Jenna Molby
      to Allie

      13/06/2019 at 9:44 am
      Reply

      Hi Allie, That's strange. Send an email to [email protected] with a link to your landing page and I can take a look. Cheers, Jenna

  • Heather

    23/05/2019 at 11:45 am
    Reply

    Hi Jenna, posted a comment earlier about running into an error message issue, but it seems like I just had some extra code. This works wonderfully. Thanks so much for this.

  • Ilya

    15/04/2019 at 11:44 pm
    Reply

    Thank you very much, Jenna, for sharing your experience and contributing to the SF community. Your blog is an amazing addition to the documentation and helps us a lot when building custom Pardot solutions for our clients. Really appreciate it!

  • Chris

    08/04/2019 at 11:13 am
    Reply

    Beautiful and simple polish to Pardot forms. Thank you so much for sharing. I am having one minor issue and wonder how you handle it. If a user has already been cookied by Pardot the form fields will pre-populate which doesn't play nice with the floating labels. The result is text on text once you click in the box the label floats up and everything is fine but the intial impression is that something broke. Any suggestions?

    • Jenna Molby
      to Chris

      09/04/2019 at 11:05 am
      Reply

      Hi Chris, You're welcome! Thanks for the heads up about the pre-populated values. I updated the Javascript slightly to handle this. Let me know if that fixes your issue. Cheers, Jenna

  • Alejandro Sañudo

    28/03/2019 at 7:12 am
    Reply

    Hi jenna!! thanks so much for your help. it's great! I have a problem, the chekbox field loses its look and feel with the text on the right side. I dont like de appareance. How can I put it on the same way of the others fields?? Thankssss

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