Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Slide Out Contact Form in WordPress (Easy Tutorial)

Getting visitors to reach out through your website can be tricky. We learned this firsthand when running our first WordPress business site – people would visit the page, but rarely use the contact form.

It wasn’t until we added a slide-out contact form that things started to change.

Think of a slide-out contact form like a friendly assistant that pops up at just the right moment. Unlike pop-ups, which can annoy visitors, these forms smoothly slide into view when someone’s ready to connect.

After implementing this on several client websites, we’ve seen engagement rates improve significantly.

In this tutorial, we’ll walk you through the easiest way to add a slide-out contact form to your WordPress site. We’ve tested and researched the most user-friendly solution, so you don’t have to waste time figuring it out yourself. 🙌

How to Add a Slide Out Contact Form in WordPress

Why Add a Slide Out Contact Form in WordPress? 💭

Many small business owners start their websites hoping that it will help grow their business.

That’s why you add a contact form page so that users can get in touch with you.

However, the problem is that most users who have questions will leave your WordPress website without reaching out to you or even visiting your contact page.

That’s why you might notice that many popular websites add contact form popups, a contact slider, or call-to-action buttons that open contact forms.

These animated and interactive options draw attention to the contact form and allow users to quickly fill it out without visiting another page. These forms can help significantly boost your conversions.

With that being said, we’ll share how to create a slide-out contact form in WordPress. Here’s a quick overview of all the things we’ll cover in this guide:

Let’s get started.

Adding a Slide Out Contact Form in WordPress

For this tutorial, you will need WPForms. It is the best WordPress contact form plugin on the market because it is both easy and powerful.

You can use the free version of the WPForms contact form plugin if you don’t need all the premium features.

You will also need OptinMonster. It is the most powerful conversion optimization software. It helps you convert abandoned website visitors into customers. For this tutorial, we will use the OptinMonster free version.

Step 1: Creating a Contact Form in WordPress

First, you need to install and activate the WPForms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

ℹ️ WPForms powers all of our forms at WPBeginner, including our contact form. It’s easy to use, highly customizable, and the new AI tools make creating forms quicker than ever.

Curious how it works? Check out our full WPForms review to explore everything it can do!

Upon activation, you need to visit the WPForms » Add New page to create a new contact form. This will launch the WPForms builder interface.

Enter a name for your contact form at the top of the page.

After that, you need to hover your mouse over the ‘Simple Contact Form’ template and click the ‘Use Template’ button.

Create a new contact form

🧑‍💻 Insider Tip: You can use AI to instantly generate your forms with ease! Simply provide a prompt, and WPForms AI will create the perfect form for you in no time.

WPForms will create a new form based on the Simple Contact Form template.

You will see the form preview in the right pane of the form builder. You can click on any field to edit it or add new form fields from the left column.

WPForms Form Builder

For step-by-step instructions, please see our guide on how to create a WordPress contact form.

Once you have finished editing the form, just click on the ‘Save’ button to store your changes.

Next, you need to click on the ‘Embed’ button at the top to get your form’s embed code.

This will bring up a popup showing several ways to embed your form. Simply click the ‘use a shortcode’ link and then copy the shortcode. You will need it in the next step.

Click the use a shortcode link

Step 2: Creating a Slide Out Optin in OptinMonster

Now, we will create a slide-out campaign that will display the contact form you created in the first step.

You need to install and activate the free OptinMonster plugin. This plugin acts as a connector between your website and your OptinMonster account.

For details, you can refer to our guide on how to install a WordPress plugin.

ℹ️ We use OptinMonster at WPBeginner to promote exclusive deals via popups, slide-ins, and banners. It’s a versatile tool that drives engagement and grows our email list effortlessly.

Want to know more? Check out our complete OptinMonster review to explore its features!

Upon activation, the OptinMonster setup wizard will start automatically. This will let you create a new account or connect an existing account.

Alternatively, you can go to the OptinMonster » Settings page, where you can create or connect an account.

OptinMonster Sign Up or Log In

After you create or connect your OptinMonster account, you can make a new optin.

Simply navigate to the OptinMonster » Campaigns page and click the ‘Add New’ button. If you don’t have any campaigns yet, then you can also click the ‘Create Your First Campaign’ button.

Adding a New Campaign in OptinMonster

OptinMonster offers different types of dynamic campaigns.

For this tutorial, we will be using the ‘Slide-in’ campaign.

Go ahead and click to select ‘Slide-in’ as your campaign type.

Select a Campaign Type and Template in OptinMonster

Next, you need to select the template. OptinMonster offers several ready-made templates.

For this tutorial, you need to choose ‘Canvas’.

You can find this easily using the search feature, and then click the ‘Use Template’ button that appears when you hover your mouse over it.

As soon as you select the template, you’ll be asked to provide a name for your campaign. This will help you easily locate the campaign in your OptinMonster dashboard.

Next, click the ‘Start Building’ button.

Name Your OptinMonster Campaign

Now, OptinMonster will load its campaign builder interface.

You’ll see a live preview of your campaign on the right and the different blocks in the menu on your left.

Simply find the WPForms block, then drag and drop it onto the preview area.

Dragging the WPForms Block in OptinMonster

Now, the WPForms block will appear on the template, and you will see its settings on the left.

You’ll need to click the ‘Form Selection’ dropdown menu from the block settings in the left menu and select the ‘Add Shortcode Manually’ option.

This will allow you to paste your WPForms contact form shortcode in the block. You copied it earlier in the tutorial.

Paste the Shortcode for Your WPCode Form Into OptinMonster

Now, you can delete or customize the other blocks on the form.

For example, you can change the image by clicking on it and using the settings on the left.

Or you can delete it simply by hovering your mouse over the block and clicking the ‘Trash’ icon.

Deleting Blocks in OptinMonster

For this tutorial, we will delete the other blocks from the optin, leaving only the WPForms block.

If you like, you can also click on the background and choose a color, gradient, or image for the option from the settings panel on the left.

Changing the Background Color in OptinMonster

Next, you need to click the ‘Display Rules’ tab at the top of the page to configure when and how the optin will be displayed.

You should be looking at the ‘Conditions’ tab at the bottom of the screen. Here, the default settings will display the optin on any page after 5 seconds. This should work for most websites.

OptinMonster Display Settings Conditions

Next, you should click the ‘Actions’ tab at the bottom of the page.

By default, there is no animation or sound when the optin is displayed. If you like, you can select an option from the ‘Animate with MonsterEffects’ dropdown, such as ‘Slide In (Left)’.

OptinMonster Display Rules Actions

When you are finished configuring the Display Rules, you need to click the ‘Save’ button at the top to store your settings and then click on the ‘Publish’ button.

On the next screen, you need to change the Publish Status to ‘Publish’. This will make the optin available on your WordPress blog or website.

Changing the Publish Status in OptinMonster

Step 3: Showing the Slide Out Contact Form in WordPress

Now that you have created both the contact form and slide-out campaign, you are ready to display it on your website.

You can close the Publish Status page by clicking the ‘X’ icon in the top right. You should now see a page that lets you configure the ‘WordPress Output Settings’ and ‘Visibility & Status’ of the optin.

When you scroll down the ‘Visibility & Status’ section, you will normally want ‘All Visitors and Logged-In Users’ to see the campaign. However, there are options for ‘Visitors Only’ and ‘Logged-In Users Only‘.

Visibility and Status Settings in OptinMonster

Next, you need to select ‘Published’ from the Status dropdown menu.

Once you have done that, you should click the ‘Save Changes’ button to store your settings.

You can now visit your website to see the slide-out contact form in action.

Slide Out Contact Form Preview

Bonus Resources 🔗: Expert Guides for Using WordPress Forms

We hope this article helped you learn how to add a slide-out contact form in WordPress. You may also want to see some of our other guides on WordPress forms:

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

3 CommentsLeave a Reply

  1. Jiří Vaněk

    I have a sliding contact form on my main website. I created it using WP Forms and Elementor. It basically works on a similar principle to Optin Monster, but the popup window is created in Elementor with the fade-in and fade-out effects. So, if someone has Elementor, it can be conveniently done there as well – just a tip for others.

  2. Soumik Sadman Anwar

    Does Optinmonster also have a lite free version? It would be great if there was!!!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.