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.
This is very helpful however, the fields default to spand the width of the page. How can we modify the width of the fields? Also, how can twe change the text on the “Submit” button to all caps “SUBMIT”? Thanks much.
Hi Marilyn, The form fields are set to 100% width to make the form responsive. You can change the width to any width (in pixels), but I recommend adding a width to the form instead #pardot-form {width:400px;}. You can change the submit button text within your form settings.
Thanks for the styling tool. Very useful since Pardot doesn’t supply its own.
I’ve styled my form to have 2 columns. I do this by creating a div for each column of content 2 form fields per row. The first div is one-half (width) and is first (first in the row – clear from the left) and the second div is one-half (width).
</form
When I use this structure in Pardot, the error message shows (if a form field has inaccurate or no content). The problem is that the error message shows after the 2 columns but I can’t put those error messages into divs. I guess they are being generated by Javascript or something. Do you know where that code is getting generated and where I can go to make those changes? i.e. where I can add the structural div wraps?
Hi Chris, Thank you! Yes, you can use the method outlined here: https://jennamolby.com/the-best-way-to-create-a-2-column-pardot-form/ to change the way the error messages are displayed for two-column forms.
Hi,
thanks for the tool – so useful for the Pardot novice.
I’m struggling with forms being submitted multiple times by impatient users.
Is there a simple way to change the colour of the clicked button?
Thanks
/Mette
Hi Mette, So happy you found it helpful 🙂 Yes, you can switch the background color on click using javascript like this:
const btn = document.querySelector(‘.submit input’);
btn.addEventListener(‘click’, function onClick() {
btn.style.backgroundColor = ‘#000’;
});
Hi Jenna,
This is great! Is there a way to control the reCAPTCH in the form? Currently the top of it is bumping up against the bottom of the last field in my form.
Thanks!
Hi Freddie, Thank you! Yes, you can add padding around the reCAPTCHA like this:
.g-recaptcha {
padding-bottom:20px;
padding-top:20px;
}
Hi Jenna – this is a truly great tool! Thanks!
I have a ‘description’ in Pardot form fields for my radio buttons, and that looks really odd when using the generator. The text comes out below and kind of aligned to the right and over two lines.
However, if I delete my description in the Pardot form field and just added the text in the ‘Label’ instead, but what I wrote in the label does not show in my Pardot forms on my website (where I use iframe code). It shows correctly in the form in the landing page builder….
Do I have to have two forms for the each purpose?
Thanks.
Hi Vivi, So happy you like the tool! The CSS probably needs to be tweaked a bit to accommodate the descriptions. DM me the link to your page and I can take a look.