This entry is part 1 of 7 in the series CSS for Forms

‹ Back to Knowledge Base home


When you create a Pardot form, the form will have its own CSS styling out of the box. Sometimes, you may need to change the look and feel of this styling to better fit your website/landing page.

This article series shows the CSS styles and some common changes that customers can make to their Forms’ CSS. We recommend using a plug-in called FireBug to help style these pages and test before making the change. We encourage you to dive in and have fun, but please know that some of the CSS concepts discussed in this series will take an experienced front-end developer resource to accomplish.

Setting Up Your Own Styling

Before you set up your own styling, prepare your layout template (Marketing > Forms or Landing Pages > Layout Templates) with the correct CSS style tag. You will want to place this after the <head> tag in your layout template.

Everything in the examples that follow in this series can be placed into this example where “…CSS styling rules go here…” is written:

<style type="text/css">

...CSS styling rules go here...

Series Navigation

Default Form Styling Classes >>