In this tutorial, I’ll show you the best way to create a two-column Pardot form. This is a follow up on my original post How to Create a 2 Column Pardot Form. By popular request, this new method includes a way to make certain form fields full width and is fully responsive. All you have to do is add CSS classes to your form fields and copy & paste the CSS provided into Pardot.
Add CSS classes to your form fields
The first step is to add CSS classes to your form fields. We will be using three different classes within the forms:
- form-col-1: Add this to form fields that will be in the left column.
- form-col-2: Add this to form fields that will be in the right column.
- form-col-full: Add this to form fields that you want in a single, full-width column.
To add a class to a form field, navigate to the fields tab of your form, click on the pencil icon to edit the form field. Then, click on the advanced tab and enter the class name in the CSS classes field.
Repeat this process until all form fields have one of the three classes. Here’s an outline of what my sample form looks like, where all the fields are in two columns except for the email field which is full width.
Edit the Form HTML
By default, every form field within your form will be wrapped in paragraph tags (<p></p>). This is not ideal when it comes to creating two-column forms, but it’s easy to update.
Navigate to your layout template and click on the Form tab. Change the paragraph tag to a DIV and close it right after the error message fields, as illustrated below.
Alternatively, replace the ENTIRE content within the form tab with the code below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form"> %%form-opening-general-content%% %%form-if-thank-you%% %%form-javascript-focus%% %%form-thank-you-content%% %%form-thank-you-code%% %%form-end-if-thank-you%% %%form-if-display-form%% %%form-before-form-content%% %%form-if-error%% <p class="errors">Please correct the errors below:</p> %%form-end-if-error%% %%form-start-loop-fields%% <div class="form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%"> %%form-if-field-label%% <label class="field-label" for="%%form-field-id%%">%%form-field-label%%</label> %%form-end-if-field-label%% %%form-field-input%% %%form-if-field-description%% <span class="description">%%form-field-description%%</span> %%form-end-if-field-description%% <div id="error_for_%%form-field-id%%" style="display:none"></div> %%form-field-if-error%% <p class="error no-label">%%form-field-error-message%%</p> %%form-field-end-if-error%% </div> %%form-end-loop-fields%% %%form-spam-trap-field%% <!-- forces IE5-8 to correctly submit UTF8 content --> <input name="_utf8" type="hidden" value="☃" /> <p class="submit"> <input type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/> </p> %%form-after-form-content%% %%form-end-if-display-form%% %%form-javascript-link-target-top%% </form> |
Add the CSS
Next, you need to add the following CSS in Pardot. You can add this in the layout template or within the form editor under look and feel > above form.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<style type="text/css"> body form.form div.form-col-1 { float: left !important; clear: left !important; width: 49% !important; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; padding-bottom:10px; } body form.form div.form-col-2 { float: right !important; clear: right !important; width: 49% !important; padding-right: 0 !important; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; padding-bottom:10px; } body form.form div.form-col-full { width: 100%; padding-right: 0 !important; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; padding-bottom:10px; clear:both; } body form.form input.text, body form.form select { width: 100% !important; } /* Captcha fix */ form.form .pd-captcha { position: relative !important; width: 190px !important; left: 0 !important; display: block !important; height: 150px !important; } </style> |
Here’s what my example form looks like with all the CSS added.
Questions?
Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.
Hi Jenna,
Great blog, very helpful, just tried your 2 column code in Pardot but when I have a full-width dropdown the height is slightly smaller in height than the other fields, any suggestions?
Your advice is much appreciated 🙂
Hi Christian, DM me the link to your form and I can take a look.
Hey Jenna – Love this guide. Very helpful thank you.
I have the last field in our form in Column 1 and then Column 2 is blank (this is what I want). However, then the submit button shift up to Column 2 (not inline).
I would like the submit button at the bottom, underneath the fields.
Thanks so much in advance for your help!
Hi Courtney, So happy you found it helpful! Try adding this CSS to fix your submit button
#pardot-form p.submit {
clear:both;
}
Hi Jenna,
First, thank you so much for all of these resources, I have you at the top of my bookmarks and have utilized almost everything you have to share.
I used this code to create two column forms. However, like someone else mentioned in the comments I want to be able to have the form be one column in mobile. I saw you provided the CSS for it:
@media only screen and (max-width : 768px) {
body #pardot-form div.form-col-1,
body #pardot-form div.form-col-2 {
width:100% !important;
}
}
Unfortunately, that’s not working for me. Can you help?
Hi Joe, So happy you find my content helpful. That code should work. DM me the link to your form and I can take a look.
Hi Jenna, you are my unofficial mentor on my pardot path, and i need to say thank you for your effort and job.
I have question here. I have customised my form and added columns for only two field which i would like to have in one row. Form looks exactly how i want but those to fields are not accessible.
I can not change value (dropdown) or event input text.
Can you please advise?
Thank you very much
Hi Stefan, Thanks so much for the compliment! It sounds like there might be some CSS that’s causing the issue. DM me the link to your page and I can take a look.
Hey Jenna,
Form structure looks awful if required fields are not filled out.
pls suggest some thing to allign the row fields if not filled on submit.
Hi Anubhav, This might be because Pardot sets a left margin to the required field text. Try adding this CSS to get rid of the margin
#pardot-form p.no-label {
margin-left:0 ;
}