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

  • 15/10/2020
    How to Use Flex Fields in Pardot

    Flex fields are custom fields that can be used over and over again to limit the number of one-time-only fields within Pardot and Salesforce. They contain data that is required temporarily to execute a specific event or campaign. Once the data is no longer needed, the fields can be reset to blank using an Engagement Program or Automation Rule

  • 04/10/2020
    How To Embed a Pardot Form on Your Website The Right Way

    Pardot offers 2 methods for embedding forms on your website; embedding using an iframe, and form handlers. While the embedded iFrame forms allow marketers to have control over updating and configuring the forms, using an iFrame isn’t always ideal for website usability. In this tutorial, I will show you how to take advantage of the Pardot iFrame forms and make it look great embedded on your website.

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

16 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

    • Chelsea
      to Jenna Molby

      10/08/2020 at 2:00 pm

      Hi Jenna - I'm having the same issue Hanna described "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?" Did you figure out a fix for her that I could try? TY in advance!

    • Jenna Molby
      to Chelsea

      11/08/2020 at 9:04 am

      Hi Chelsea, The icons are displayed using the FontAwesome library ( it might be that the library is no longer linked properly on the page. Double-check that it's loading on the page and if not, you might have to re-link it. Hope that helps! Cheers, Jenna

  • 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