Is your WordPress contact form taking up too much space on your page? See how to slide in your contact form with the click of a floating button.
Forms are amazing right? They look great & have more functionality than you could have imagined. Forms built with Formidable can take orders in your shop, upload properties to your real estate website, and create guest posts in your blog. There's no downside. As long as you have enough space to display your forms....
Visual space is a premium
In this new connected world, there's barely a device that isn't connected to the internet. Not just your smartphone, tablet and PC anymore. Now you can buy an internet connected toaster, or browse the latest news on your fridge. (Not your microwave—that's fake news!)
Your form has to look great on a massive variety of screen sizes, especially small phone screens.
Add a Contact Form Slider to save space
How do you get your forms to display prominently where you need them, without overwhelming the layout on a small screen?
In this short tutorial, I'll show you one of my favorite plugins to use in conjunction with Formidable. It's called WP Contact Slider.
This simple but effective plugin adds a floating contact button to the side of your screen. When the button is clicked, a panel slides out to display your form. So the screen space is only used when it is required!
Let's get started.
Step 1: Build your WordPress contact form
I'm going to assume that you already know how to build a contact form, so there is no need to go into detail about that. Just bear in mind that the contact slider is probably not suitable for large, overly complex, or multi-page forms.
This solution is great for simple contact forms and other short forms like customer feedback, product inquiry, or contact forms. If you want to push the limits, be sure to check the result on a variety of devices and screen sizes to make sure it displays properly.
Step 2: Install WP Contact Slider
Simply go to your WordPress dashboard, click on the plugins tab, and search for WP Contact Slider. Then install and activate it. It's free, so there's no registration/payment or even signup to use it.
Or you can download WP Contact Slider from the WordPress repository and upload it to your site.
Step 3: Add your contact form shortcode into the slider
After you install WP Contact Slider, a new menu item will appear in your WordPress dashboard. Select WP Contact Slider > Add New Contact Slider to continue.
At the bottom of the page you'll see the Shortcode box. Simply enter your Formidable Forms shortcode here, and leave the Type option set to 'none' since Formidable shortcodes do not require any special treatment or formatting.
You can also select the posts and pages where you would like the button to appear. Select the screen placement (right or left), and decide if you'd like the button included on small screens.
Once you choose your preferred options, click 'Update'. Then visit your site to make sure that the slider button is loading correctly.
Step 4: Choose eye-catching colors for your slider button
While you want to free up valuable screen space, you don't want to hide your form completely. Set a bright and eye-catching color scheme for your button that compliments the style of your site.
Personally, I often go for a primary color as the background with white text. I find this looks great even on small screens.
That's it. In fewer than 10 minutes, your beautiful WordPress contact form is accessible in a prominent position on every page and post of your website, without sacrificing loads of screen space. Add a contact form slider to your website today!
Step 5: Share the love
We know a lot of work goes into building, maintaining, and supporting a WordPress plugin. So when we come across a developer offering something like this for free, the least we can do is say "thank you"!
Pop over and leave a glowing review on the WordPress Repo, and let the developers know you appreciate their efforts! Good reviews are very encouraging and result in better support and more motivated developers.
While you're at it, let everyone know that you love Formidable too. We love 5-star reviews!