In Pardot

Introducing the Updated Pardot Form Style Generator

2 Mins Read

I’m so excited to finally launch version 2.0 of the Pardot Form Style Generator. The original version was created back in 2016 and has been used by thousands of Pardot users. With the new version comes a new UI and some cool new features, including customized checkboxes and radio buttons, embedded Google Fonts, new submit button options and more.

What is the Pardot Form Style Generator?

The Pardot Form Style Generator is a free tool you can use to easily customize your Pardot forms with no coding required. With a couple of clicks, you can customize almost every form element, including fields, checkboxes, buttons, labels and more. When you’re done customizing your form, the generator will compile custom CSS that you can copy and paste into your Layout Template within Pardot.

Go to the generator

What’s new?

New UI

The generator has a complete new look, making it easier to customize your form.

Starts from a template

The old version started with the default Pardot form CSS. This new version starts with a template I use frequently within projects, meaning there are less tweaks needed to create a beautiful form.

Customized checkboxes & radio buttons

Change the border color, background color for radio buttons and checkboxes.

Embedded Google Fonts

The most popular Google Fonts are loaded directly within the editor, including Roboto, Lato, Open Sans and more.

Set a border color for fields on focus

Select a border color that will be displayed when a prospect clicks into a form field.

Create a full-width submit button

Check the box to enable a full-width submit button or select one of the alignment options from the dropdown.

Select hover colors for the submit button

Change the border colour, font color, and background color for the submit button.

Try it yourself

Check out all the new features and send me any questions via Twitter (@jennamolby), or leave a comment below.

Try it

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

60 Comments

  1. David Clarkson Reply

    Hey there, can I just ask if I copy the HTML and paste it into the Create Layout>Layout section? Do I also add it to form and site search? Not sure what I am doing wrong but can’t get it to work :/

    • Jenna Molby Post Author

      Hi David, Yes, you would copy the CSS and paste it within the FORM or the LAYOUT tab of your Pardot Layout template.

  2. Jenny Reply

    Amazing. This saved me hours of work! Thank you for bringing Pardot into the 21st century. (Seriously, why?!)

  3. James Wright Reply

    Hi Jenna

    Awesome tool. Awesome upgrade! I just have one conundrum which I can’t get my head round. When you change the labels from normal font-weight to bold, it changes ALL of the field labels AND all of the field values (e.g. for checkboxes and radio buttons) to bold. I think forms look much tidier if the labels are in bold and the values are normal font-weight. Is there an easy-ish workaround which can achieve this?

    Thanks in anticipation

    James

    • Jenna Molby Post Author

      Hi James, Thank you! This CSS should do the trick

      // bold regular labels
      #pardot-form p label {
      font-weight:bold !important;
      }
      // unbold inline labels.
      #pardot-form label.inline {
      font-weight:normal !important;
      }

  4. BRANDEN MAUE Reply

    How do you get your form to be centered on the web page instead of aligned left? Thanks for your help!

    • Jenna Molby Post Author

      Hi Branden, You would need to add a width to the form and then set the left and right margin to auto like this:

      #pardot-form {
      width:300px;
      margin-left:auto;
      margin-right:auto;
      }

  5. Gilberto Charpentier Reply

    Jenna, many thanks for sharing this awesome new version.

Write A Comment