In Pardot

Introducing the Form Style Generator for Pardot Forms

1 Min Read

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.

Go to the generator

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.

pardot-form-style-generator

3. Copy the CSS

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

pardot-form-style-generator-copy-css

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.

pardot-style-generator-edit-css

Go to the generator

Questions?

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

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.

41 Comments

  1. Andrew Thompson Reply

    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 Post Author

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

  2. Chad Cook Reply

    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!!!

  3. Chad Cook Reply

    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;

    • Jenna Molby Post Author

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

Write A Comment