I’m so excited to finally launch version 2.0 of the Pardot Form Style Generator. The original version was created back in 2016 and has been used by thousands of Pardot users. With the new version comes a new UI and some cool new features, including customized checkboxes and radio buttons, embedded Google Fonts, new submit button options and more.
What is the Pardot Form Style Generator?
The Pardot Form Style Generator is a free tool you can use to easily customize your Pardot forms with no coding required. With a couple of clicks, you can customize almost every form element, including fields, checkboxes, buttons, labels and more. When you’re done customizing your form, the generator will compile custom CSS that you can copy and paste into your Layout Template within Pardot.
What’s new?
New UI
The generator has a complete new look, making it easier to customize your form.
Starts from a template
The old version started with the default Pardot form CSS. This new version starts with a template I use frequently within projects, meaning there are less tweaks needed to create a beautiful form.
Customized checkboxes & radio buttons
Change the border color, background color for radio buttons and checkboxes.
Embedded Google Fonts
The most popular Google Fonts are loaded directly within the editor, including Roboto, Lato, Open Sans and more.
Set a border color for fields on focus
Select a border color that will be displayed when a prospect clicks into a form field.
Create a full-width submit button
Check the box to enable a full-width submit button or select one of the alignment options from the dropdown.
Select hover colors for the submit button
Change the border colour, font color, and background color for the submit button.
Try it yourself
Check out all the new features and send me any questions via Twitter (@jennamolby), or leave a comment below.
Awesome Jenna. Many thanks for sharing!
This is great, Jenna! It’s like you read my mind, as I was right in the middle of doing some forms. Is there any way to reduce the width of the input boxes? I don’t see an option for that.
Hi Erik, Awesome! The form is set up to be responsive, so the fields are 100% in width. The best way to change the size of the form fields, is to change to set a max-width for the whole form like this:
#pardot-form {
width:100%;
max-width:350px;
}
Otherwise, you can change the width of the text fields by changing the width from 100% to whatever percentage or pixel value you want.
/* The input fields */
#pardot-form input.text,
#pardot-form textarea.standard,
#pardot-form select,
#pardot-form input.date {
width:100%;
}
Great Job! any plan to incorporate columns?
Hi Jose, Thanks so much! No plans as of yet, but that’s a great idea!
Thank you very much Jenna for this new version. The previous one was already a great help but this one is really great.
Thank you very much
Help!!
I tried using your new form generator on my website ( I previously used the old one to create my form layout template on my website) and now the forms have completely disappeared from my website. They are predominantly used on our downloadable content page. Any ideas???
Hi Marc, Oh no! Send me an email ([email protected]) with the link to your page and I can take a look.