With so much web browsing taking place on mobile devices, more and more of your prospects will be viewing your site on a web browser built for a mobile platform.
Good design is good design. If your Pardot forms are designed well for traditional web viewers, these same forms will fare better in the mobile world as well. Here are some good tips to keep in mind when you think about how your Pardot forms will look on mobile devices.
Don’t Ask for the World All at Once
- Keep your forms short – having fewer form fields enables higher conversion rates, and makes them easier for mobile viewers to see and complete
- Use conditional fields for greater progressive profiling – reduce the number of fields on your forms by only asking for a few pieces of information at a time
Style your Form for Clarity and Brevity
- Keep your labels and form field descriptions succinct
- Clearly show which fields are required so prospects get it right the first try
- Keep “before form” content to the point, and place your form “above the fold” – make sure your prospect doesn’t miss the form because the page it’s on has too much information
- Easily manage all styles for your form in the “Look and Feel” section of the form builder, under the “Styles” tab
Advanced Tip: Using CSS Media Queries
If your site uses responsive design (designs that automatically adjust based on the width of the browser window), you can use the same CSS media queries in the layout templates that style your Pardot forms.
Our Knowledge Base contains thorough CSS information for forms (including which selectors style different aspects of your forms). Create your CSS to incorporate different styles for different media queries. Some style differences to consider when using media queries:
- Larger font for labels and descriptions
- Shorter widths for form fields
- Stack labels above form fields
- Hide descriptions that are not absolutely necessary
- Increase the relative size of your submit button, or use a bolder color
Link to external styles sheets in your form’s layout template, or include these styles directly in the layout template in a <style> tag.
By default, Pardot forms are styled to look good on any device. But if you have more specific mobile styles in mind, take advantage of your web developer’s knowledge of media queries to enrich your Pardot forms’ CSS for viewing on mobile browsers.