Creative Ways to Spice Up Your Pardot Forms: Part 3

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.

pardot

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.

pardot

The value should look like this:

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.

pardot

Now, let’s add some CSS to make it look better…

Step 2: Add the CSS

Add this CSS to style the checkboxes.

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.

pardot

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:

pardot

The value should look like this:

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.

pardot

Step 2: Add the CSS

Add this CSS to style the radio buttons.

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

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/