Refreshed and republished on April 3, 2021
This post was originally published on December 11, 2018 and has been revamped and updated for accuracy and comprehensiveness.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 HTML
The standard HTML for a checkbox in a Pardot form looks like this:
|
1 2 3 4 |
<p class="form-field checkbox1 pd-checkbox required no-label"> <input id="checkbox1" name="checkbox1" onchange="" type="checkbox" value=""> <label class="inline" for="checkbox1">Checkbox 1</label> </p> |
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, the default checkbox will be hidden and the ::before selector will be used to style the new checkbox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- Style the checkboxes --> <style type="text/css"> /* hide the regular checkbox */ #pardot-form .pd-checkbox input { opacity: 0; position: absolute; } /* position the label */ #pardot-form .pd-checkbox input, #pardot-form .pd-checkbox label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } #pardot-form .pd-checkbox label { position: relative; } /* style the unchecked checkbox */ #pardot-form .pd-checkbox input+label:before { content: ''; background: #fff; border: 2px solid #ddd; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 0px; margin-right: 10px; text-align: center; font-size: 15px; line-height: 24px; } /* style the checked checkbox */ #pardot-form .pd-checkbox input:checked+label:before { content: "\2713"; background: #2CA4BF; color: #fff; border-color: #2CA4BF } </style> |
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.
|
1 2 3 4 |
<p class="form-field radio1 pd-radio required no-label "> <span class="value"><span class="" style=""><input type="radio" name="93172_68805pi_93172_68805[]" id="93172_68805pi_93172_68805_722529_722529" value="722529" onchange=""><label class="inline" for="93172_68805pi_93172_68805_722529_722529">radio 1</label></span><span class="" style=""><input type="radio" name="93172_68805pi_93172_68805[]" id="93172_68805pi_93172_68805_773281_773281" value="773281" onchange=""><label class="inline" for="93172_68805pi_93172_68805_773281_773281">radio 2</label></span><span class="" style=""><input type="radio" name="93172_68805pi_93172_68805[]" id="93172_68805pi_93172_68805_773283_773283" value="773283" onchange=""><label class="inline" for="93172_68805pi_93172_68805_773283_773283">radio 3</label></span><span class="" style=""><input type="radio" name="93172_68805pi_93172_68805[]" id="93172_68805pi_93172_68805_773285_773285" value="773285" onchange=""><label class="inline" for="93172_68805pi_93172_68805_773285_773285">radio 4</label></span></span> </p> |
The CSS
Just like the CSS for the checkboxes, the default radio button will be hidden.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!-- Style the radio buttons --> <style type="text/css"> /* hide the regular radio button */ #pardot-form .pd-radio input { opacity: 0; position: absolute; } /* position the label */ #pardot-form .pd-radio input, .pd-radio label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } #pardot-form .pd-radio label { position: relative; } /* style the unchecked radio button */ #pardot-form .pd-radio input+label:before { content: ""; background: #fff; border: 2px solid #ddd; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 0px; line-height: 20px; margin-right: 10px; text-align: center; font-size: 20px; } #pardot-form .pd-radio input+label:before { border-radius: 50%; } /* style the selected radio button */ #pardot-form .pd-radio input:checked+label:before { content: "\25CF"; color: #2CA4BF; border: solid 1px #2CA4BF; } </style> |
The Result
See the Pen Pardot Customized Radio Buttons Using CSS (option 1) by Jenna Molby (@jennamolby) on CodePen.
Questions?
Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.
Hi Jenna,
Thank you so much for your advices, it’s amazing !
I have just one question : I copied the css styles but my form isn’t responsive. ( it appears very small) . How do we do ?
Thank you
Hi Manuella, You’re welcome! What do you mean it’s appearing small? Are you referring to the text or the checkboxes?
Hey Jenna, is there any way to make check boxes in preference center as Toggle Switches?
Hi Simon, I’m sure it’s possible, but I haven’t tried it myself. Seems like a great idea for a follow-up blog post!
Jenna, is there a way to make a checkbox be prechecked?
Hi Beckley,
You can precheck a checkbox by using Javascript like this:
document.querySelector(“.YOURFIELDNAME input”).checked = true;.
This works great! Thank you so much. The only thing is that i can´t seem to allign the checkboxes without labels to the left. I tried everuthing for the last 2 hours. And I´m sure it´s just a tiny adjustment to the css styling, but I can´t seem to figure it out.
I tried to change the styling within the >> /* Checkbox fields */ #pardot-form input[type=”checkbox”] { }<< I've added, but that didn't work either. I'm a bit frustrated that I can't figure it out by myself haha. Any tips?
Hi Daisy, So happy you like it! It’s difficult to figure out your issue without seeing the form. Please send the link to [email protected] and I can take a look for you. Cheers, Jenna
FYI – if anyone is having problems with the checkbox not centering in the box, I made a tiny adjustment to the “style the unchecked checkbox” section. I removed the “display: inline-block;” and add a transparent check to the box (the square shape collapsed when the display setting was removed). The form does not recognize this transparent check as a check and still forces the user to check the box if the field is required.
.pd-checkbox input + label:before {
content: “f00c”;
font-family: ‘FontAwesome’;
background: transparent;
color: transparent !important;
border: 2px solid #ddd;
vertical-align: middle;
width: 10px !important;
height:10px !important;
padding: 2px;
margin-right: 10px;
text-align: center;
font-size:15px;
line-height:18px;
}