Beautiful Marketo Forms: Styling Checkboxes and Radio Buttons


Your Marketo forms don’t have to be boring. With a little extra CSS you can create beautiful Marketo forms with customized checkboxes and radio buttons. In this tutorial, I’ll show you how you can style checkboxes and radio buttons within Marketo forms with minimal coding.

Before we begin…

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

Navigate to the form and open up the form editor. Click on Form Settings > Form Theme > Edit Custom CSS this is where you can paste in your own CSS.


Marketo requires that you select one of their themes to start. Changing themes will affect the CSS. For this tutorial, I will be using the “simple” theme which is the default theme when you create a new form.


Note: If you don’t select the “simple” theme for your form this tutorial won’t be copy & paste.

Styling Checkboxes

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


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

Notice how the all the checkboxes are wrapped in a DIV with the class mktoCheckboxList? 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.

The Result

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

See the Pen Marketo 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 Marketo provides, so all you have to do is add some CSS.


All radio buttons in the Marketo form are wrapped in a DIV with the class mktoRadioList. 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 Marketo Customized Radio Buttons Using CSS (option 1) by Jenna Molby (@jennamolby) on CodePen.

Special thanks to Karen Menezes who wrote a great tutorial on pure CSS checkboxes, which I referenced to make this Marketo tutorial.


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.

6 comment(s)
  • Douglas Welcome

    03/04/2018 at 3:32 pm

    Hello Jenna, Thanks for this great Tutorial. Wondering if you know how to get the required asterisk to drop down to the left of the check/radio box rather sit there floating above? Tried a bunch of different tactics and didn't have much success.

  • Charles

    28/08/2017 at 6:38 am

    Hello, Nice tutoria, however I do not manage to have the checkmark loaded. I have copy and paste but not sure that the import url command works. Could you help me to sort that out please?

    • Jenna Molby
      to Charles

      28/08/2017 at 8:53 am

      Hi Charles, Please share your landing page URL so I can help you troubleshoot. Thanks, Jenna

  • Bear F

    23/08/2017 at 8:56 am

    Great tutorial, copy pasted your code in and my Marketo checkboxes are much nicer now.

  • Brie

    15/08/2017 at 9:39 am

    hello!! I was curious if you knew how to make the radio buttons next to each other opposed to two lines- so I have a yes, no radio button and i want them on one line opposed to two?? Any guidance is greatly appreciated. Thank you!

    • Jenna Molby
      to Brie

      15/08/2017 at 11:17 am

      Hi Brie, You can add this CSS to your form to make the radio buttons side-by-side .mktoForm .mktoRadioList > label {float:left !important;clear:none !important;margin-left:5px !important; margin-right:10px !important;}

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