Basic CSS for Forms

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

This entry is part 1 of 7 in the series CSS for FormsWhen 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…

Default Form Styling Classes

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

This entry is part 2 of 7 in the series CSS for FormsUpdating Styles Prepare your form’s layout template with the correct <style> tag by navigating to Marketing > Forms or Landing Pages > Layout Templates, and editing your layout template. You will want to place the <style> tag after the <head> tag in your…

Changing the Styling of Form Text

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

This entry is part 3 of 7 in the series CSS for FormsTo change the style of text for the entire form, insert the following in the <head> tag of the Layout Content tab of the form’s Layout Template (making appropriate changes to color, font-family, and font-size); if this form resides on a Pardot landing…

Changing the Submit Button to an Image

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

This entry is part 4 of 7 in the series CSS for FormsFor Forms and Landing Pages built using Layout Templates Navigate to your form and edit it. In the Look and Feel step of the form wizard, remove all text in the Submit Button field unless you want the text to appear over the…

Changing the Size of Form Text and Textarea Input Field Areas

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

This entry is part 5 of 7 in the series CSS for FormsTo change the size of all text areas of a form, insert the following in the <head> tag of the Layout Content tab of the layout template; if this form resides on a Pardot landing page, insert the following into the Layout Template…

Removing Form Auto-Focus

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

This entry is part 6 of 7 in the series CSS for FormsPardot Layout Templates are designed to auto-focus on the first form field in a Pardot form.  This allows for easy form completions, as the prospect’s cursor is already positioned to begin filling out the form as soon as they are on the page….

Advanced Form Field Option: CSS Classes

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

This entry is part 7 of 7 in the series CSS for FormsThe CSS Classes option can be found under any form field by editing the field and then clicking the “Advanced Tab”. So, if we add the CSS Class of “customclass” below, it allows you to target a specific element on the page with that class: The…