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.

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.


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


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.


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.


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.


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

Related Posts

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

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

12 comment(s)
  • Hanna

    09/09/2019 at 4:46 am

    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

      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="//"> Cheers, Jenna

    • Hanna
      to Jenna Molby

      11/09/2019 at 2:10 am

      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

    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

      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

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

    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 Thank you!

  • Chad

    12/12/2018 at 9:21 am

    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

      Hi Chad, Yes, you could style each checkbox separately by using the :nth-child selector 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 Marketing Operations leader.

Most Commented
Popular Posts