Beautiful Pardot Forms: Styling Checkboxes and Radio Buttons

In:

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.

Before we begin…

Let’s refresh on how to add custom CSS to your Pardot forms.

Navigate to Marketing > Forms > Layout Templates and select the layout to add the form styles to. Paste the CSS right above the existing code of the Form tab and save.

pardot-style-generator-edit-css

Styling Checkboxes

One of the downsides of using Pardot forms is the inability to modify the HTML structure of the form, so I will be leveraging the standard Pardot HTML to style the checkboxes.

The HTML

The standard HTML for a checkbox in a Pardot form looks like this:

Notice how the all the checkboxes are wrapped in a paragraph tag with the class pd-checkbox? This is how we will target the checkbox input and the checkbox label within the CSS.

The CSS

For the CSS, FontAwesome will be loaded to display the checkmark for the checkbox. The default checkbox will be hidden and the ::before selector will be used to style the new checkbox.

Add the font awesome library in your layout template between the HEAD tags.

The Result

The styled checkboxes will look like this once the CSS has been added to the Pardot form.

See the Pen Pardot Customized Checkboxes Using CSS (option 1) by Jenna Molby (@jennamolby) on CodePen.

Styling Radio Buttons

Styling radio buttons are pretty similar to the checkboxes, but with a bit of extra CSS to make them look like a radio button. Just like the checkboxes, we will leverage the HTML that Pardot provides, so all you have to do is add some CSS.

The HTML

All radio buttons in the Pardot form are wrapped in a paragraph tag with the class pd-radio. This is how we will target the radio input and the radio label within the CSS.

The CSS

Just like the CSS for the checkboxes, FontAwesome will be loaded to display the checkmark for the radio button and the default radio button will be hidden.

The Result

See the Pen Pardot Customized Radio Buttons Using CSS (option 1) by Jenna Molby (@jennamolby) on CodePen.

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.

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

9 comment(s)
  • Hanna

    09/09/2019 at 4:46 am
    Reply

    Hi Jenna, thanks for this - the checkboxes worked brilliantly but now the checks are appearing as missing characters (i.e. the empty rectangles). Any ideas why and how to fix this?

    • Jenna Molby
      to Hanna

      10/09/2019 at 10:19 am
      Reply

      Hi Hanna, Try loading font awesome a different way. Add this to your landing page between the HEAD tags. <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css"> Cheers, Jenna

    • Hanna
      to Jenna Molby

      11/09/2019 at 2:10 am
      Reply

      Hi Jenna, thanks for your response but it doesn't seem to have worked! Have dropped you an email with the link to our landing page if you don't mind having a closer looks. Thanks

  • Greg

    01/04/2019 at 10:23 am
    Reply

    Hello Jenna, Thank you for the helpful article! I am having a similar issue as Amanda listed in a previous comment. My checkboxes have an unusual amount of padding to the left and I can't see anywhere in the form layout template to make the checkboxes aligned left. Any suggestions?

    • Jenna Molby
      to Greg

      04/04/2019 at 10:37 am
      Reply

      Hi Greg, It's difficult for me to troubleshoot without taking a look at your form. Please email [email protected] with a link to your landing page and I will take a look. Cheers, Jenna

  • Amanda

    20/02/2019 at 10:20 am
    Reply

    Hi! I I'm working on a Pardot form with check boxes and am wondering do you have any suggestions for aligning the check boxes to the left? For reference my form can be viewed on https://www.boydcorp.com/sealing/adhesive-bonding-systems.html. I'm looking to align the check boxes with the labels of the fields above. Basically I'm looking to have the text after the check box be on one line.

  • Amanda

    19/02/2019 at 12:25 pm
    Reply

    Hi Jenna, The check boxes in my form do not have any labels and I am trying to align them with the rest of the form labels so the text is only on one line. Basically I need to move them left. Do you have any suggestions on how to do this? The form can be viewed https://www.boydcorp.com/sealing/adhesive-bonding-systems.html. Thank you!

  • Chad

    12/12/2018 at 9:21 am
    Reply

    Is there a way to style each specific checkbox separately? Looking to stylize an email preference center that has a bunch of checkboxes - this would make it look A LOT nicer.

    • Jenna Molby
      to Chad

      12/12/2018 at 9:32 am
      Reply

      Hi Chad, Yes, you could style each checkbox separately by using the :nth-child selector https://css-tricks.com/almanac/selectors/n/nth-child. Here's an example .pd-checkbox:nth-child(3) input + label:before { content: ''; background: #000; border: 2px solid #ddd; display: inline-block; vertical-align: middle; width: 18px; height:18px; padding: 5px; margin-right: 10px; text-align: center; font-size:15px; line-height:18px; } /* style the checked checkbox */ .pd-checkbox:nth-child(3) input:checked + label:before { content: "\f00c"; font-family: 'FontAwesome'; background: #cccccc; color: #fff; border-color:#3eb9bc; } Cheers, Jenna

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