General:
The general CSS sections in the layout template of your form will be used to apply across the entire form. When looking to edit general areas in CSS look for #pardot-form at the top of the sections. Editing general layout pieces are how you can customize the overall look for your organization.
Form Errors:
The errors area of the form will be the styling that pops up when something is wrong with the submission the prospect has made. Formatting this can be changing the weight of the font or adjusting padding for where the error is. When in the CSS look for .error to find how your errors in the form are displaying and what you want to change.
Required Fields:
Required will be the marker of the CSS block you will edit to change the appearance of required fields in a form. Required fields are the fields that you deem as the important part for the prospect to fill in such as Email, Name, Phone number, and Job Title.
Field Descriptions:
When searching for the area to edit for field descriptions, you will look for the .description tag in CSS. These descriptions are what is used to describe certain more complex form fields to your prospects.
Form Content Spacing:
Content spacing is possibly one of the most important elements of a form that can be incredibly frustrating to fix if you don’t know what you’re looking for. However, merely find the #pardot-form p on block and that allows you to adjust spacing.
Submit Button:
Customizing CTAs can be a game changer across the board (see our article 5 Things You Should Know About CTAs). So customizing the aesthetics of your submit button on a form is not different. When doing this through the CSS look for #pardot-form p.submit to find the correct section.
Dropdown Fields:
When dealing with a multifaceted question, dropdown fields are often turned to in forms. To edit this commonly used form field search select to find the correct box.
Checkbox and Dependant Fields:
When looking to edit checkbox fields search the term input[type="checkbox"] to make changes. Search .dependentFieldSlave for all dependant field styling. dependant field styling.
Text Area Fields & Text Fields:
For your Text Area Fields styling simply search textarea.standard. But with just Text Fields input for the look and feel, and input.text for the ability to change the width of the text field.
