Customizing Your Pardot Forms Like a Pro

 

This session, led by Marketing Operations Manager Jenna Mobley, provides a deep dive into using native settings, CSS, and JavaScript to transform standard Pardot forms into polished, branded, and highly functional assets.

User Experience Best Practices (No Code Needed)

 

Simple adjustments within the Pardot Form Editor can significantly improve the user experience and form accessibility.

• Label Placement: Always place form field labels above the input field. This improves responsive design, prevents layout issues in localized versions, and has been shown to potentially improve completion times compared to left-aligned labels. (Set this in Look and Feel > Styles).

• Required Field Character: Change the default required field character (a yellow image) to a plain asterisk (*). The image can be difficult to see on dark or colored backgrounds. (Set this in Look and Feel > Styles).

• Stored vs. Displayed Value: When using dropdowns, utilize the option to set a specific displayed value (what the prospect sees) that is different from the stored value (what is saved in Pardot).

• Radio vs. Checkbox: Use radio buttons when the prospect can select only one option (mutually exclusive choices). Use checkboxes when multiple selections are allowed, or for single opt-in choices.

Matching Your Brand with CSS

 

While the Pardot editor offers basic customization (font family, color, size), advanced branding requires custom CSS.

Where to Place Custom CSS

 

The CSS can be placed in one of three locations, depending on scope:

• Layout Template (Form or Layout Tab): Best for styles intended to be used on all forms embedded on pages using that template.

• Above Form / Below Form Section: Best for styles specific to a single, individual form.

Key CSS Customizations

 

• Unbolding Labels: By default, required field labels are bolded. CSS can be used to set the font weight to normal for a cleaner look, especially since the asterisk is already present.

• Customizing Fonts: You can easily embed non-standard fonts, such as Google Fonts, using the @import method in the CSS. Do not use the <link href=> method, as this can skew email tracking in some marketing platforms.

• Styling Elements: Use CSS to modify form labels (font family, color, padding), input fields (borders, padding, font size), and the submit button (background color, font, padding).

• Centering: Center the submit button by applying text-align: center to the container holding the button.

• Mobile Responsiveness: Ensure forms scale correctly on mobile devices by using percentages instead of pixels for width and field sizing.

• Advanced Styles: Custom CSS enables styles like two-column forms, horizontal opt-in forms, paragraph-style forms, and custom-styled error messages.

Helpful Resource: Users who are not CSS experts can use the Pardot Form Style Generator (created by Jenna Mobley) to generate the custom CSS code via a point-and-click interface. The Pardot Form CSS Framework provides the necessary CSS selectors for developers.

Extending Functionality with JavaScript

 

JavaScript (JS) added to the Below Form section of the Pardot form editor can enable powerful functions.

Key JavaScript Use Cases

 

• Capture URL/Page Data: Use a hidden field and a short JS snippet to automatically capture the page URL or the page name/title of the page where the form was submitted.

• Add Text Before Submit: Insert a privacy policy statement or legal disclaimer text directly before the submit button.

• Placeholder Text: Convert field labels into placeholder text that appears inside the input field, which is great for shorter forms. Note: Using labels above the field is generally preferred for accessibility, especially on longer forms.

• Pre-checking Checkboxes: JS can be used to default a checkbox to true, though this should be used with caution for regulatory compliance (e.g., GDPR/opt-in fields).

Forms vs. Form Handlers

 

The choice between using a standard Pardot Form and a Form Handler depends on your needs:

• Pardot Forms (Embedded): Recommended for general use because they natively support advanced Pardot features like Progressive Profiling, Bot Protection (CAPTCHA), and embedded styling options. They apply to both external pages and Pardot landing pages.

• Pardot Form Handlers: Best used when you have existing external forms you don’t want to recreate, or when you need to send form submission data to another database simultaneously. Form Handlers do not support Progressive Profiling or bot protection.