If you are reading this, you know that creating multicolumn forms in Pardot is not a standard feature. However, it is pretty easy to manipulate the form code so that you can create anywhere from 2 to 12 columns in each row of a form (12 would be weird).
I already went through an explanation of the logistics of the Pardot form when I wrote about creating horizontal forms, so I am not going to go through that again. I am going to just get down to the actual code.
This code goes on the Layout tab. It just adds Bootstrap css to the layout, puts the form in a container, and adds bootstrap styling to the input boxes that become inaccessible due to the way Pardot generates input boxes.
You can also style the button between the <style> tags by accessing the style tag used in the below form code. In the below form code I am using btn-danger to create a red submit button. Here is Bootstrap's list of predefined buttons. If you want to adjust the buttons slightly (like remove the border-radius or change the hover effect), you would add something like this in the style section of the Layout tab:
You can also change the submit button behavior on each individual form by adding CSS like the above sample (or just change the color) in the Look and Feel section of the form. Directions and screenshots here.
Now, here is the code that goes into the form tab. It adds <div class="form-row">, which is needed by Bootstrap, and changes <p> to <div> in the form loop.
Also, be sure to uncheck the use default css checkbox, which is visible below the code when you are on the Layout tab.
The final step is applying the column css classes to your particular form.
The first and most important thing to understand is that the form exists on a grid that is 12 units wide. So, each row must add up to 12. So a row can have 1 of 12, 2 of 6, 3 of 4 or even a 5-4-3 configuration. The one thing you cannot do is just a 6. Each row must total 12 or things get weird.
Apply the template to the form and then go to edit the fields in the form. 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 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. More on the grid system here in case you want to get fancy.
One final step: if you want to have placeholder text instead of Pardot's standard labels above or aside the input fields, I recommend Jenna Molby's placeholder text hack with a couple of adjustments. In both the javascript section and the css section, you need to replace the p with a div since we replaced the <p> with <div> in our form code. So, p.pd-text label, p.pd-select label, p.pd-textarea label becomes div.pd-text label, div.pd-select label, div.pd-textarea label in both places.
UPDATE: For placeholder text, you can add the following Javascript below the form instead, and add the sr-only class to the form labels. The sr-only class shows labels to screenreaders only, which maintains a level of accessibility in your forms that hiding labels do not.
<script>
var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += "*");
label.nextElementSibling.setAttribute("placeholder", text);
}
</script>Full form code below:
Comments