It’s been awhile since I wrote about how to build multicolumn forms in Pardot using Bootstrap v4, and since then Bootstrap has moved onto v5. So I figured it was about time for a refresh.
Simply replacing the Bootstrap stylesheet with the v5 version immediately breaks the layout of the form. There are not a lot of changes to make, but they are essential.
Additionally, I used jQuery to add the bootstrap classes to the input, so I was able to strip out much of the styling.
In the interest of not being like a food blog, I am going to give you the full code snippets first, and then if you care to learn, I will have some details below.
The following two snippets of code will go in a Layout Template under Content in Pardot.
Before you do anything else, uncheck “Include default CSS stylesheet (recommended)” on the layout tab. Forgetting to uncheck this will frequently cause issues that you will spend too much time trying to resolve.
This code gets placed in the Layout tab:
This code gets placed in the Form tab:
The above form uses bin-danger to give me a red button. Other button colors can be found here.
Now that the layout is created, you can create forms. Forms can have as many columns as you want, as long as the width of the columns add up to 12. Here is an example that has 1, 2, and 3 fields across. Just keep in mind that if a field is going to be less than the entire width of the form, you should choose to always display even if previously completed, or you risk breaking the configuration that you want.
Under the Fields tab, choose the Advanced tab. This is where we add the width of the column to the CSS Class. You would apply col-6 to each of the columns you want to be half the width and col-12 to the ones you want to be full-width. If you want three even fields across, you would make each col-4. If you want to get fancy and make them 12 units on a small screen but 6 on a medium and larger screen, then you apply col-12 col-md-6. Feel free to expand and shrink this example to see what happens.
Next, on the Look and Feel section of the Form build, the only style you should touch is the Required Field Character. I changed this to the *. You can also target the style of your required field character with CSS styles.
That is all you have to do! Now, what changed from before?
I added jQuery to the header of the Layout tab to make it easy to add classes to the input elements. The biggest struggle in customizing a Pardot form is that the input fields are completely generated by code, so it is not possible to manually add in the classes that Bootstrap uses. However, you can use jQuery to target the specific input fields and add classes to them. Which leads me to...
I added some jQuery JavaScript below the form on the Form tab. This not only immediately fixed the formatting, it also allowed me to remove most of the CSS I had to add in my first version:
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text],textarea').addClass('form-control');
$('select').addClass('form-select');
$('input[type=checkbox],input[type=radio]').addClass('form-check-input');
$('.pd-checkbox,.pd-radio').addClass('form-check');
});
</script>I removed most of the styling from my previous version, but still had to include a couple CSS element selectors for checkboxes and radios, which were just being cranky and uncooperative.
Finally, I removed the form-row div and the form-group class from the Form tab, and changed the class of the div surrounding the Submit button to fall in line with the newer Bootstrap form model.
That's about it! These updates both bring your forms up to date with Bootstrap, and as a bonus do a better job fixing the styles of textarea, select, checkbox, and radio fields.
Comentarios