The 3rd and final 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 part 2, I showed you how to create a conversational, paragraph-style form and how to create a form on a single line. In this post, I will show you how to add images to your checkbox and radio buttons.
Checkboxes with images
The concept is to hide the default checkboxes and replace them with images. When one of the images is selected, the border and background color of the box will change to let the prospect know the option was selected.
Step 1: Add the images and text to your form
The first step is to add the text and images to the checkboxes within your form. To do this, go to the fields tab of your form and edit or add the checkboxes field. Click on the values tab and add the values. The text in the first box is the text that will be stored in Pardot. The second box is the display text aka the text the prospect will see when completing the form. This is where you would add the images for each option.
The value should look like this:
|
<img src=“YOUR-IMAGE-URL” width=“70” /> <span>Checkbox 1</span>
|
Add your image URL, set the image width (optional) and add your text (wrapped in a SPAN tag).
Here’s what my form looks like once I added the images to the checkboxes.
Now, let’s add some CSS to make it look better…
Step 2: Add the CSS
Add this CSS to style the checkboxes.
|
/* — customize the checkboxes — */
/* Put the checkbox text on one line */
#pardot-form .pd-checkbox label span  {
    display:block;
    float:none;
    padding-top:10px;
/* align the new checkboxes */
#pardot-form .pd-checkbox span.value {
  display:flex;
  width:100%;
  gap: 10px;
#pardot-form .pd-checkbox span.value span {
  flex-grow: 1;
  flex-basis: 0;
/* style the new checkboxes */
#pardot-form .pd-checkbox label.inline  {
    margin-top:5px;
    background-color:#FFF;
    display:flex;
    flex-direction:column;
    border:solid 1px #e8e8e8;
    padding:20px;
    text-align:center;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    align-items:center;
    cursor:pointer;
/* hide the default checkbox */
#pardot-form .pd-checkbox input {
    display:none;
/* style the checkboxes when selected */
#pardot-form .pd-checkbox input:checked+label {
background-color:#e8e8e8;
border:solid 1px #539c18;
|
Note: I only have ONE checkbox in my form, but if you have MULTIPLE checkboxes in your form this will style all of them. To style only ONE checkbox, replace .pd-checkbox within the CSS to .YOURFIELDNAME
See it in action
Here’s what my example looks like in action.
See the Pen
Pardot Forms: Checkbox Customization by Jenna Molby (@jennamolby)
on CodePen.
Radio buttons with images
The concept is the same as the checkboxes example. We’re going to hide the default radio buttons and replace them with images. When one of the images is selected, the border and background color of the box will change to let the prospect know the option was selected.
Step 1: Add the images and text to your form
The first step is to add the text and images to the radio buttons within your form. To do this, go to the fields tab of your form and edit or add the radio field. Click on the values tab and add the values. The text in the first box is the text that will be stored in Pardot. The second box is the display text aka the text the prospect will see when completing the form. This is where you would add the images for each option. The value should look like this:
The value should look like this:
|
<img src=“YOUR-IMAGE-URL” width=“70” /> <span>Radio 1</span>
|
Add your image URL, set the image width (optional) and add your text (wrapped in a SPAN tag).
Here’s what my form looks like once I added the images to the radio buttons.
Step 2: Add the CSS
Add this CSS to style the radio buttons.
|
/* — customize the radio buttons — */
/* Put the radio button text on one line */
#pardot-form .pd-radio label span  {
    display:block;
    float:none;
    padding-top:10px;
/* align the new radio buttons */
#pardot-form .pd-radio span.value {
  display:flex;
  width:100%;
  gap: 10px;
#pardot-form .pd-radio span.value span {
  flex-grow: 1;
  flex-basis: 0;
/* style the new radio button */
#pardot-form .pd-radio label.inline  {
    margin-top:5px;
    background-color:#FFF;
    display:flex;
    flex-direction:column;
    border:solid 1px #e8e8e8;
    padding:20px;
    text-align:center;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    align-items:center;
    cursor:pointer;
/* hide the default radio button */
#pardot-form .pd-radio input {
    display:none;
/* style the radio button when selected */
#pardot-form .pd-radio input:checked+label {
background-color:#e8e8e8;
border:solid 1px #539c18;
|
Note: I only have ONE radio field in my form, but if you have MULTIPLE radio fields in your form this will style all of them. To style only ONE radio field, replace .pd-radio within the CSS to .YOURFIELDNAME
See it in action
Here’s what my example looks like in action.
See the Pen
Pardot Forms: Radio Button Customization by Jenna Molby (@jennamolby)
on CodePen.
This Pardot article written by:Â
Jenna Molby
Jenna is a Salesforce Certified Pardot Specialist, Salesforce Certified Pardot Consultant and Salesforce Marketing Champion 2020. Jenna is a marketing operations leader with over ten years of B2B and B2C experience working on both the agency and client-side.
Original Pardot Article: https://jennamolby.com/creative-ways-to-spice-up-your-pardot-forms-part-3/
Find more great Pardot articles at https://jennamolby.com/
Pardot Experts Blog
We have categorized all the different Pardot articles by topics.
Pardot Topic Categories
- Account Based Marketing (ABM) (7)
- Business Units (14)
- ChatGPT / AI (3)
- Completion Actions (5)
- Connectors (10)
- Custom Redirects (4)
- Data Cloud (2)
- Demand Generation (8)
- Dynamic Content (6)
- Einstein Features (12)
- Email Delivery (17)
- Email Open Rates (3)
- Pardot A/B Testing (2)
- Email Mailability (16)
- Do Not Email (1)
- Double Opt-in (2)
- Opt Out / Unsubscribe (14)
- Email Preferences Page (6)
- Engagement Studio (16)
- Industries (1)
- Non Profit (1)
- Landing Pages (9)
- Lead Generation (1)
- Lead Management (13)
- Lead Routing (3)
- Lead Scoring (16)
- Leads (3)
- Marketing Analytics – B2BMA (9)
- Marketing Automation (1)
- Marketing Cloud (3)
- Marketing Cloud Account Engagement (4)
- Marketing Cloud Growth (2)
- New Pardot Features (6)
- Opportunities (2)
- Optimization (2)
- Pardot Admin (64)
- Duplicates (1)
- Marketing Ops (1)
- Pardot Alerts (1)
- Pardot API (2)
- Pardot Automations (3)
- Pardot Careers (12)
- Pardot Certifications (4)
- Pardot Consulting (1)
- Pardot Cookies (3)
- Pardot Custom Objects (3)
- Pardot Email Builder (8)
- Pardot Email Templates (9)
- HML (6)
- Pardot Events (16)
- Pardot External Actions (1)
- Pardot External Activities (4)
- Pardot Forms (29)
- Form Handlers (8)
- Pardot Integrations (20)
- Data Cloud (1)
- Slack (1)
- Pardot Lead Grading (5)
- Pardot Lead Source (2)
- Pardot Lightning (1)
- Pardot Migration (1)
- Pardot Nurture / Drip Campaigns (1)
- Pardot Personalization (3)
- Pardot Profiles (1)
- Pardot Releases (18)
- Pardot Sandboxes (2)
- Pardot Segmentation (5)
- Pardot Strategy (7)
- Pardot Sync (2)
- Pardot Sync Errors (1)
- Pardot Tracker Domains (5)
- Pardot Training (3)
- Pardot Vs Other MAPs (4)
- Pardot Website Tracking (2)
- Reporting (22)
- Salesforce and Pardot (31)
- Marketing Data Sharing (2)
- Pardot Users (3)
- Salesforce Automation (5)
- Salesforce Flows (2)
- Salesforce Campaigns (20)
- Salesforce CRM (3)
- Record Types (1)
- Salesforce Engage (3)
- Salesforce Queues (2)
- Security and Privacy (1)
- Tags (3)
- The Authors (504)
- Cheshire Impact (9)
- Greenkey Digital (51)
- Invado Solutions (37)
- Jenna Molby (9)
- Marcloud Consulting (6)
- Nebula Consulting (60)
- Pardot Geeks (44)
- Salesforce Ben | The Drip (235)
- SalesLabX (3)
- Slalom (4)
- Unfettered Marketing (46)
- Uncategorized (1)
- Website Tracking (2)
- Website Search (1)
More Pardot Articles
See all posts
This Pardot article written by:Â
Jenna Molby
Jenna is a Salesforce Certified Pardot Specialist, Salesforce Certified Pardot Consultant and Salesforce Marketing Champion 2020. Jenna is a marketing operations leader with over ten years of B2B and B2C experience working on both the agency and client-side.
Original Pardot Article: https://jennamolby.com/creative-ways-to-spice-up-your-pardot-forms-part-3/
Find more great Pardot articles at https://jennamolby.com/