How to Make a Slide Out Form
Forms are vital parts of capturing leads, but they can also take up considerable room on a page. Here's how to streamline you design with a slide out form.
Forms -- they are one of the single most important elements for capturing leads on a website. But some forms are more engaging to your website’s visitors than others. One of the most effective form types are slide out forms. These simple sliders pop out when a visitor clicks a button (i.e. wants to sign up for more information or start a free trial).
One of the first big benefits is that these sliders don’t take up as much space as a traditional forms! They only appear when summoned by a visitor, and it’s a great way for designers to streamline design and reduce visual clutter.
The simple act of an object sliding on screen is one that appeals to visitors. And typically, visitors are more willing to interact with simple animations rather than standard forms. As long as that animated visual element provides some sort of benefit, it will engage a visitor not bore them or scare them away.
Your visitors also don’t have to leave the page they’re on, and this ups your time on page metrics, lowers bounce rate, and (ideally) ups conversions. Tracking data shows that if a visitor has to leave a page they’re on in order to fill out another document, they’re less inclined to fill out said form with each new page.
Here's all the copy you need to make your slide out form a success and improve conversions:
HTML
This tutorial uses some straightforward HTML syntax as shown below:
The entire slide out form is contained within the section class "toggle-form". This will be particularly important as the CSS and JS will target this class for the display. Other than that, you can structure the form in whatever manner works best for your end deployment. Include as many or a few fields as you need.
CSS
Like the HTML, the CSS is largely bare-bones and only requires a few specific classes to accomplish the specific functionality:
The most important classes to take note of in the above are the "toggle-form" and "toggle-form.active" classes. The "toggle-form" class does the heavy lifting of primarily positioning the form, including a transition to ease the display of the form. The "toggle-form.active" class simply reverts the margin right property to "0" so that the form is visibile.
JS
Just a few lines of JavaScript/jQuery are needed to handle the active class switch:
The above simply specifies that if the main CTA button is clicked, then add the class "active" to the form. If the close icon is clicked, then remove the active class and hide the form.
And there you have it, with the above code you will have a fully functional slide out form that encourages conversions and has a contemporary visual appeal. You can use this type of form in all sorts of manners from simple contact purposes to more complex applications where you need to update database driven contact.
See a working example by clicking on the "START A FREE TRIAL" button below:
Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
