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.
Hi Jenna,
Does this only work on the Pardot lightning app? We will be updating but are using the legacy version currently.
Thanks for the help with the form builder it will be a huge help!
Hi Anne-Marie, It works with both Lightning and the legacy version.
Jenna,
I have used this tool for one of my landing pages. I have noticed that when I click in a field in the left column that it won’t let me in the field unless I click on it halfway across the field. None of the rest of my forms have this problem. Can you help me?
https://www.popio.com/partner-referral-submit/
Hi Mike, It’s the captcha that’s causing the issue. Add this CSS to fix it
#pardot-form .pd-captcha {
clear:both;
}
Jenna,
Thank you for this. I have used it for a number of forms. One question is how to create spacing around the reCaptcha. When I use the tool it put it underneath the fields with no spacing,
Thanks
Sorry I didn’t get notified that you replied to my comment – how can I contact you to share my form link? I’m still have issues with getting the form integrated to my landing pages.
Hi Jess, You can send an email to [email protected].
Hi Jenna, I seem to be having the same issue as David. When I copy the code and paste into the top of the ‘Form’ section, it still gives me a really basic preview. Am I missing something in the code?
Hi Jess, DM me the link to your form and I can take a look.