With so much web browsing taking place on mobile devices, more of your prospects will be viewing your site on a web browser built for a mobile platform. 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 too much
Style your Form for Clarity and Brevity
- Keep your forms short -- the fewer fields your form has, the higher your conversion rate will be. Having fewer fields makes forms easier for mobile viewers to see and complete.
- Use conditional fields for progressive profiling -- this helps reduce the number of fields on your forms by only asking for a few pieces of information at a time.
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 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:
- Keep your labels and form field descriptions concise.
- Clearly mark required fields so prospects are able to submit the form easily.
- Keep above form content short, and make sure prospects don't have to scroll far before they see form.
- Easily manage all styles for your form in the Look and Feel section of the Form Wizard, under the Styles tab.
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.
- 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
Need more? Start a conversation with other Pardot users in the Trailblazer Community