Pardot Knowledge Base

Responsive Forms Overview

Last Updated: Jun 14, 2016 | Print this Article
 
After Ethan Marcotte laid out the principles of responsive web design in a talk at An Event Apart in 2010, Jeffrey Zeldman tagged it "the presentation that launched a thousand redesigns". A million redesigns would have been a bit more accurate, but the spirit of his quote is more important - this was a revolutionary idea that fundamentally changed how many web designers approach their craft. Many Pardot clients have already gone through a responsive redesign and many more have near-term plans for one. The point of this article is to walk through the essentials of fitting a stock Pardot form into a responsive site design.

Assumptions

* You have at least basic knowledge of HTML and CSS. * You understand the principles of responsive web design. There are plently of resources available if you need to get up to speed first.

Steps

1. Create a new template and form For the sake of this example, we're going to start with a clean slate. Create a new template in Pardot and apply it to a new form that includes as many form fields as you'd like. Add an empty internal stylesheet to your new template that we will add to throughout this walkthrough:
<style>

</style>
2. Change the CSS box model The box model determines how browsers calculate widths and heights for elements. By default, margins, borders, and padding add to an element's width. For example, if 20px of left padding is added to a 100px wide element, the element would actually be 120px wide. This normally isn't an issue, but can lead to some formatting issues when adding proportional widths to elements in a responsive design (especially with form fields). Alternatively, a secondary box model exists that is subtractive, so adding 20px of left padding to a 100px wide element will shrink the element down to 80px so that the total width is still 100px. For more information, tuts+ has a great article on the box model in responsive design. To change the box model, add the following to the internal stylesheet in your template:
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
3. Alter padding and margin on form field wrappers By default, each Pardot form field is wrapped in a that has padding and margin applied to it. We'll remove the padding and apply a margin that is more conducive to a responsive layout. Add the following to the internal stylesheet in your template:
#pardot-form .form-field {
	margin: 1em 0;
	padding: 0;
}
4. Apply proportional widths to field labels, text inputs, and textareas This is where the fun really starts. In this example, we're going to give form field labels 25% of the available width and the remaining 75% to the text inputs and textareas. These percentages are completely arbitrary. When these concepts are applied to your design, they should be altered to fit into your site's layout. Add the following to the internal stylesheet in your template:
#pardot-form .field-label {
    width: 25%;
}

#pardot-form input.text, #pardot-form textarea {
    width: 75%;
}
5. Alter the margin on indented elements You may have noticed at this point that the form submit button is now out of place. Also, if your form includes any descriptions, checkbox or radio fields, or has a form field without a label, these things are also out of place. This is due to a fixed left-margin that is 160px by default. We'll need to change that to match the width of our form field labels. Add the following to the internal stylesheet in your template:
#pardot-form .no-label,
#pardot-form .description,
#pardot-form .value,
#pardot-form .submit {
    margin-left: 25%;
}
6. Create a breakpoint At this point, our form is nice and fluid, but as the browser window gets narrower and narrower, the layout eventually breaks down. In our example, the layout breaks down around a width of about 400px (depending on the length of your field label text). We need to adjust the layout before the layout breaks down. In this example, we'll force the form labels to display above the form fields and push the text inputs and textareas out to 100% width. Add the following to the internal stylesheet in your template:
@media (max-width: 400px) {
   #pardot-form .field-label {
        display: inline-block;
        width: auto;
        float: none;
        text-align: left;
    }

    #pardot-form input.text, #pardot-form textarea {
        display: block;
        width: 100%;
    }

    #pardot-form .no-label,
    #pardot-form .description,
    #pardot-form .value,
    #pardot-form .submit {
        margin-left: 0;
    }
}
We now have the basics of responsive design applied to a Pardot form. Hopefully this sets you up to apply these concepts to your site's live forms. Obviously, this is a fairly simple example and the specifics laid out here (widths, breakpoints, etc) will need to be adjusted to fit into your site design.

Need more? Start a conversation with other Pardot users in our Success Community