Introducing the Form Style Generator for Pardot Forms


Easily style and customize your Pardot lead forms by using this Form Style Generator for Pardot Forms. With only a couple of clicks you can customize every aspect of your Pardot form including: button color, label positioning and text color, no coding required.

How it Works

1. Create a new form in Pardot

The form style generator will pull in the default styles.

2. Go to the Style Generator

Customize the look of your form using the fields on the left side. A preview of your form will show on the right side.


3. Copy the CSS

Copy the CSS that is generated and navigate to your Pardot form.


4. Paste the CSS into your Pardot form layout template

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.



Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 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.

  • 23/07/2020
    How to Add an Opt-in Message & Privacy Policy Message to Pardot Forms

    GDPR and CASL compliance are just a few reasons to add an explicit opt-in message or a privacy policy to your Pardot forms. In this post, I’ll show you how to add a custom opt-in message to your form and a privacy consent message above the form submit button.

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

27 comment(s)
  • Andrew Thompson

    02/08/2018 at 1:07 pm

    For us non code savy people, you may want to mention that the code you copy from here doesn't replace what already exists in the layout template. It goes right ABOVE the existing code. I know you mention it goes at the top, but maybe a screenshot that shows that the existing code is still there will be helpful.

    • Jenna Molby
      to Andrew Thompson

      02/08/2018 at 1:18 pm

      Hi Andrew, Thanks for the feedback! I've added some explanation to the post. Cheers, Jenna

  • Chad Cook

    27/06/2018 at 12:00 pm

    Nevermind, I placed it in the incorrect spot and then figured out where to put it after zooming in on my screen to see what you actually wrote.. Thanks again!!!

  • Chad Cook

    27/06/2018 at 11:55 am

    In this spot: form.form p.submit input { background-color:#001F5B; hover {background:#F1F1F1;} border:solid 2px #FFFFFF; font-size:12px; color:#FFFFFF; font-weight:normal; padding-top:7px; padding-bottom:7px; padding-right:50px; padding-left:50px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;

  • Chad Cook

    27/06/2018 at 9:42 am

    Love this! Any possible way to make the button have a roll over?

    • Jenna Molby
      to Chad Cook

      27/06/2018 at 10:30 am

      Thank you! Yes, you can add a roll over like this form.form p.submit input:hover {background:#000000;} Cheers, Jenna

  • Online Math Program

    07/09/2016 at 12:07 pm

    Has Pardot changed this feature? I don't see where to copy the CSS within the style generator. Thanks for the help!

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