Basic CSS for Forms

This entry is part 1 of 7 in the series CSS for Forms
Woah there! CSS can get complicated. We recommend getting your web team involved with CSS for your forms.

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

This article series shows the CSS styles and some common changes that you can make. 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 here 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

Next Article: Default Form Styling Classes >>