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.

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

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

  • 10/10/2018
    How To Use UTM Parameters to Capture Lead Source in Pardot Part 2

    In part 1, I covered how to use UTM parameters to capture lead source when you are embedding a Pardot form on a Pardot landing page. In this post, I will cover how to implement the same method using an iFramed form on a web page.

  • 25/07/2018
    2 Free Pardot Landing Page Templates You Can Use for Your Next Event

    Create beautiful, responsive landing pages in Pardot by using one of these 2 free Pardot layout templates. These landing page templates are designed specifically for events such as webinars or trade shows, but they will work well with any landing page that contains a form.

2 comment(s)
  • 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