Would you like to add a Contact form who creeps into your WordPress blog? 

If your company wishes to have new prospects through the Contact form of your website, one of the best methods is to make your Contact form more visible. 

In this tutorial, we will show you how to add a form on WordPress without irritating your users.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Create a slide in contact form

Why add an animated contact form in slide out on WordPress?

Many small business owners start their websites with the hope that it will help them 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 may have questions will leave your website without contacting you.

Also read our guide on: Bloggers: Do not write 1000 words, but use just a picture

This is why you will notice that many popular websites add contact form popups, forms that slide into the page, or call to action buttons that open contact forms.

These animated and interactive options distract the user from the contact form and allow them to quickly complete the form without visiting another page. These forms dramatically increase your conversions, which is why you see them everywhere.

Let's take a look at how to create a contact form that slips on WordPress.

Adding an exclusive contact form in WordPress

For this tutorial, you will need to WPForms. It's one of the best WordPress Plugin of contact form in the market.

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 byOptinMonster. It is conversion optimization software. It helps you convert visitors who abandon your website into customers. You will need the professional plan which gives you access to the functionality that we are going to use in this tutorial.

Step 1. Creating a contact form on WordPress

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

After activation, you must visit " WPForms »Add New »To create your contact form. This will launch the WPForms generator interface.

Enter a name for your contact form, then select the model "Select a Template».

WPForms will display a simple contact form. You will see the form preview in the right pane. You can click on any field to edit it or add new fields from the left column.

newform

Once you have finished modifying the form, click on the button Save to save your changes.

See also How to capture email addresses with MailOptin

Then you need to click on the embed button at the top to get the embed code for your form.

This will display a pop-up window showing your form shortcode. Go ahead and copy this shortcode as you will need it in the next step.

Step 2. Creating a slide on OptinMonster

Now, we will create a removal campaign that displays the contact form that you created in the first step.

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

This plugin acts as a connector between your website and your OptinMonster account.

Upon activation, click on the OptinMonster menu in your WordPress admin bar and enter your API key. You can get this information from the OptinMonster website.

omapi

After entering your license key, click on the button " Create New Optin At the top right of your screen.

Newoptin

This will take you to the OptinMonster website.

OptinMonster offers different types of dynamic campaigns. For this tutorial, we will be using the 'Slide'. Go ahead and click to select 'Slide In'as a type of campaign.

SlideinoptinNext, you need to select the template. OptinMonster offers several ready-to-use templates, but we have to choose 'Canvas'for this tutorial.

optintemp

As soon as you select the template, you must provide a name for your campaign. This will help you easily locate the campaign in your OptinMonster dashboard. 

4 WordPress plugins to add virtual reality to discover absolutely

Now, OptinMonster will load its campaign builder interface.

Create an optinmonster campaign

You will see a real-time overview of your campaign on the right. As we are using the canvas model, it will be completely empty for the moment.

See also our 10 premium WordPress plugins to create portfolios on your blog

On the left, you will notice different tabs. In the section "General Optin Settings", You need to enter your website URL under the"Optin campaign website».

Then you need to switch to the 'optin'. Here you can select the colors, height and width of your optin.

choosecolors

Go ahead and select the colors you like and adjust the width and height, so that it can display your entire form well.

Read also our article on 5 WordPress plugins to create a member area

After that you need to scroll down to the " Custom HTML Canvas And enter the WPForms shortcode that you copied earlier.

addshortcode

Entering the shortcode will not display your form in the instant send campaign immediately. This is because the shortcode only works on your own WordPress site.

You can now click on the “Save” button at the top to save your settings and then click on the “Publish” button.

savenpublish

On the next screen, you need to change the status of the optin to publish. This will make the option available for your WordPress site.

Publishstatus

Step 3. Displaying the contact form on WordPress

Now that you've created the contact form and the removal campaign, you're ready to post it on your website.

Discover the 10 WordPress Contact Form 7 Plugins You Probably Ignore

Go ahead and visit the page OptinMonster in your WordPress admin area. You see your recently created recent campaign.

Editoutputsettings

You need to click on the 'Edit output settings' link to decide how you want to display it on your site.

On the next screen, be sure to check the box next to 'Enable optin on the website?'. OptinMonster allows you to choose who can see the optin. You can also select a specific area of ​​your website to display the optin.

Enableoptin 1

Don't forget to click on the button Save Settings to save your changes.

See also: 5 premium plugins to promote content on your WordPress blog

You can now visit your website to see the contact form in action. Make sure to use icognito mode in your browser or sign out, so you can see exactly what your users will see.

slideoutformpreview

By default, the removal campaign is displayed 5 seconds after the page loads. However, OptinMonster allows you to change that too.

You can create countless rules to display the campaign whenever certain conditions are met.

Read also: 10 WordPress plugins to add live chat to your blog

For example, you can show the form when a user has walked 50% of the page, when a user is about to leave a page, and many more.

campaign rules

Download Optinmonster

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. LatePoint

Are you tired of complicated booking plugins, whose setup takes forever and sometimes even once you do - these slow down your entire website and make you lose potential customers?

Latepoint appointment booking reservation plugin for wordpress 1

Le WordPress Plugin premium LatePoint comes to your rescue by helping you integrate a simple and intuitive system into your website. appointment management, which speaks to your clients and makes scheduling an appointment incredibly easy with just a few clicks. It installs in less than 5 minutes and offers connection options via social networks.

While simple on the outside, it's incredibly powerful on the inside. Its clean and modern control panel is designed in such a way that any business owner can easily view agent performance reports and manage services and clients without much hassle.

DownloadDemo | Web hosting

2. Algori Social Share Buttons Pro

The new WordPress Plugin premium Algori Social Share Buttons Pro lets you easily add social network share buttons to your website. 

Algori social share buttons pro for wordpress gutenberg 1

Adding these popular social sharing buttons makes it easy for your website visitors to promote and share your content with their friends. Which will increase your SEO, boost user engagement.

This WordPress plugin will allow you increase your traffic, to optimize your SEO, to target several types of social networks, and other mobile applications, to customize the complete appearance of your buttons and others.

Download | Demo | Web hosting

3. Pro Custom Admin

The WordPress premium Pro Custom Admin plugin, allows you to easily customize the registration and login pages of your website or create a maintenance page.

Pro custom admin

It offers a number of features, the main ones we will mention: change the background color and the login page logo, add custom favicon backend and frontend of your website, change the colors of links and buttons, customize the footer text that appears on each admin page, remove the WordPress version number from the footer, updates free and for life, and many more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to display a slide out animation form on your WordPress blog. Feel free to share this article with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...