How do we add custom CSS to our forms?
We go to the left side menu: MARKETING / FORMS / LAYOUT TEMPLATES and select the design to add the form styles. Once selected, we click EDIT LAYOUT TEMPLATE , and paste the CSS over the existing code in the Form tab, and save.
Form CSS, Pardot
With this in mind, we start with the styles japan phone number library for the checkboxes.
How to style checkboxes?
One of the disadvantages of using Pardot forms is the inability to modify the HTML structure of the form, so we have to leverage standard Pardot HTML to style the checkboxes.
STANDARD HTML
As we see in the HTML code, all the checkboxes are wrapped in a paragraph tag , with the class pd-checkbox. This is how we will name it in the CSS.
CSS STYLES
The default checkbox will be hidden and the :before selector will be used to style the new checkbox, with the desired styles.
The checkbox icons will be loaded from FontAwesome, so you need to insert the library link to display the icons. The link is inserted inside the head in the HTML structure.
THE RESULT
The checkboxes will look like this once the CSS is added to the form in Pardot.
As you can see, we have also called the FontAwesome library within the CSS. @import url('https://maxcdn.bootstrapcdn.com/font-aw ... me.min.css') By adding the library, the verification icons are loaded. In the CSS styles, in 'content', the fontAwesome class of the desired icon is set.
Radio Buttons How do we style them?
Radio buttons are pretty similar to checkboxes, but with a bit of extra CSS to make them look like a radio button. Like checkboxes, we'll be taking advantage of the HTML that Pardot provides, so all we need to do to customize them is add some CSS.
STANDARD HTML
As we can see, all the radio buttons in Pardot are wrapped in a paragraph tag, with the class pd-radio . This is how we will name it in the CSS.
CSS STYLES
Just like the CSS for checkboxes, the FontAwesome library will be loaded to display the radio button's check icon, while the default radio button will be hidden.
