How to Add a Slide Out Contact Form in WordPress

Do you want to add a slide out contact form in WordPress? If your business depends on getting new leads from your website’s contact form, then one of the best ways to grow your lead source is to make your contact form more noticeable. In… Read More »

The post How to Add a Slide Out Contact Form in WordPress appeared first on WPBeginner.

Do you want to add a slide out contact form in WordPress? If your business depends on getting new leads from your website’s contact form, then one of the best ways to grow your lead source is to make your contact form more noticeable. In this article, we will show you how to add a slide out contact form in WordPress without annoying your users.

Adding a slide out contact form in WordPress

Why Add a Slide Out Contact Form in WordPress?

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

That’s why you add a contact form page, so 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.

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

These animated and interactive options divert user’s attention to the contact form and allow them to quickly fill the form without visiting another page. These forms significantly boost your conversions that’s why you are seeing them everywhere.

Let’s take a look at how to create a slide out contact form in WordPress.

Adding a Slide Out Contact Form in WordPress

For this tutorial, you will need WPForms. It is the best WordPress contact form plugin in the market.

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

You’ll also need OptinMonster. It is the most powerful conversion optimization software. It helps you convert abandoning website visitors into customers. You’ll need their pro plan which gives you access to the canvas feature that we will be using in this tutorial.

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.

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

Enter a name for your contact form and then select the ‘Select contact form’ template.

Create a new contact form

WPForms will load 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.

Form builder

Once you are finished editing the form, click on the save button to save your changes.

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

This will bring up a popup showing your form’s shortcode. Go ahead and copy this shortcode because you will need it in the next step.

Step2. Creating a Slide Out Optin in OptinMonster

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

First, you need to install and activate the OptinMonster plugin. For more details, see our step by step guide on how 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 your account on the OptinMonster website.

OptinMonster API key

After entering your license key, click on the ‘Create new optin’ button on the top right corner of your screen.

New optin

This will take you to the OptinMonster website.

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.

Slide in optin

Next, you need to select the template. OptinMonster offers several ready-made templates, but we need to select ‘Canvas’ for this tutorial.

Optin template

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

Now OptinMonster will load its campaign builder interface.

OptinMonster builder

You’ll see a live preview of your campaign on the right. Since we are using the canvas template, it will be totally blank at the moment.

On the left hand, you’ll notice different tabs. Under the ‘General Optin Settings’ section, you need to enter your website’s URL below the ‘Optin campaign website’ option.

Next, you need to switch to the ‘Optin’ tab. Here you can select colors, height, and width for your optin.

Design your slide out form

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

After that, you need to scroll down to the ‘Canvas custom HTML’ section and enter the WPForms shortcode you copied earlier.

Add shortcode to custom HTML

Entering the shortcode will not show your form inside the slide-in campaign right away. That’s because the shortcode only works on your own WordPress site.

You can now click on the ‘Save’ button at the top to store your settings and then click on the ‘Publish’ button.

Save and publish your optin

On the next screen, you need to change the optin status to published. This will make the optin available to your WordPress site.

Publish status

Step 3. Showing 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.

Go ahead and visit OptinMonster page in your WordPress admin area. You will see your recently created slide out campaign listed there.

Edit optin output settings

You need to click on the ‘Edit output settings’ link to decide how you would want to display on your website.

On the next screen, make sure that you check the box next to ‘Enable optin on site?’ option. OptinMonster allows you to choose who can see the optin. You can also select specific area of your website to display the optin.

Enable optin on your website

Don’t forget to click on the save settings button to store your changes.

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

Slide out contact form preview

By default, the slide out campaign will appear 5 seconds after the page is completely loaded. However, OptinMonster allows you to change that as well.

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

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

Display rules

We hope this article helped you learn how to add slide out contact form in WordPress. You may also want to see our list of actionable tips to drive traffic to your WordPress site.

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.

The post How to Add a Slide Out Contact Form in WordPress appeared first on WPBeginner.

How to Create a Facebook Like Box Popup in WordPress

Do you want to promote your Facebook page in WordPress with a popup? Lightbox popups work really well to convert visitors into subscribers, and they work even better when promoting your Facebook page. In this article, we will show you how to effectively promote your… Read More »

The post How to Create a Facebook Like Box Popup in WordPress appeared first on WPBeginner.

Do you want to promote your Facebook page in WordPress with a popup? Lightbox popups work really well to convert visitors into subscribers, and they work even better when promoting your Facebook page. In this article, we will show you how to effectively promote your Facebook page in WordPress with a lightbox popup without annoying your users.

Promoting your Facebook page with lightbox popup in WordPress

Why Use a Facebook Page Popup in WordPress?

Lightbox popups are frequently used for email list building and lead generation. They convert really well and that’s why you see them everywhere.

However, they are not just limited to email list building. You can displaying photos in a lightbox popup, offer content upgrades, display a contact form popup, and more.

While you can easily add the Facebook like box in your sidebar, it is less noticeable thus does not get you good results.

On the other hand, a lightbox popup is more noticeable and requires users to take action. This helps you quickly get more likes for your Facebook page.

That being said, let’s see how to add a lightbox popup to promote your Facebook page in WordPress.

Creating Lightbox Popup For Your Facebook Page in WordPress

For this tutorial, we’ll be using OptinMonster. It is the best lead generation software in the market because it helps you convert abandoning website visitors into subscribers and followers.

First thing you need to do is signup for an OptinMonster account. You’ll need at least the pro plan to use their canvas feature.

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

It is a connector plugin that helps connect your WordPress site to your OptinMonster account.

Upon activation, you need to click on the OptinMonster menu in your WordPress admin bar to enter your license key.

Add your OptinMonster API Key

You can find this information from your account dashboard on the OptinMonster website.

After entering your license key, you need to click on the ‘Create New Optin’ button at the top.

Create new optin

This will take you to the create new campaign page on OptinMonster website.

Now you need to select Lighbox as your campaign type and Canvas as your campaign template.

Create new campaign

OptinMonster will now you to enter a name for your campaign. This name will help you identify your campaign in your OptinMonster dashboard.

After that, OptinMonster will launch its campaign builder interface. You will see a live preview of your blank canvas template on the right and OM options on the left.

OptinMonster builder

First you need to add the website where you will be running this campaign.

After that, click on the ‘Optin’ tab to start designing your Facebook lightbox popup.

Design your Facebook lightbox popup

At this point, you will need the embed code for your Facebook page. You can get that by visiting the Facebook Page Plugin website in a new browser tab.

You will need to enter the URL of your Facebook page and adjust the width, height, and other display options for your like box. We recommend using 600px width and 350px height.

After that, click on the Get Code button.

This will bring up a popup where you need to click on the iFrame tab and copy the code.

iFrame code

Now switch back to the OptinMonster builder and paste the code under ‘Canvas custom HTML’ box.

Paste your Facebook page like box code

You’ll be able to immediately see the preview of your Facebook like box.

Next, click on the Save button at the top to store your changes and then click on the publish button to continue.

Save optin and continue

This will take you to the publish settings page for your optin. Toggle Status button to live to make this optin available for your website.

Enable optin for your website

Your Facebook lightbox popup is now ready to be displayed on your WordPress site.

Display Facebook Page Lightbox Popup in WordPress

Switch back to the WordPress admin area of your website and click on the OptinMonster tab. You will now see your newly created optin listed there. If you don’t see it, then click on the ‘Refresh Optins’ button.

Edit output settings

Click on the ‘Edit output settings’ link below your optin to continue.

On the next screen, make sure that the box next to ‘Enable optin on site?’ option is checked.

Enable lightbox popup on your WordPress site

Don’t forget to click on the save settings button.

OptinMonster also allows you to selectively display popup on different pages, posts, categories, or tags. You can also show or hide it from logged in users.

Once you are done, you can visit your website to see your Facebook Page displayed in a lightbox popup.

Facebook page shown in Lightbox popup

We hope this article helped you learn how to promote your Facebook page in WordPress with a lightbox popup. You may also want to see our list of WordPress plugins that will quickly help you get more traffic.

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.

The post How to Create a Facebook Like Box Popup in WordPress appeared first on WPBeginner.

How to Create a Facebook Like Box Popup in WordPress

Do you want to promote your Facebook page in WordPress with a popup? Lightbox popups work really well to convert visitors into subscribers, and they work even better when promoting your Facebook page. In this article, we will show you how to effectively promote your… Read More »

The post How to Create a Facebook Like Box Popup in WordPress appeared first on WPBeginner.

Do you want to promote your Facebook page in WordPress with a popup? Lightbox popups work really well to convert visitors into subscribers, and they work even better when promoting your Facebook page. In this article, we will show you how to effectively promote your Facebook page in WordPress with a lightbox popup without annoying your users.

Promoting your Facebook page with lightbox popup in WordPress

Why Use a Facebook Page Popup in WordPress?

Lightbox popups are frequently used for email list building and lead generation. They convert really well and that’s why you see them everywhere.

However, they are not just limited to email list building. You can displaying photos in a lightbox popup, offer content upgrades, display a contact form popup, and more.

While you can easily add the Facebook like box in your sidebar, it is less noticeable thus does not get you good results.

On the other hand, a lightbox popup is more noticeable and requires users to take action. This helps you quickly get more likes for your Facebook page.

That being said, let’s see how to add a lightbox popup to promote your Facebook page in WordPress.

Creating Lightbox Popup For Your Facebook Page in WordPress

For this tutorial, we’ll be using OptinMonster. It is the best lead generation software in the market because it helps you convert abandoning website visitors into subscribers and followers.

First thing you need to do is signup for an OptinMonster account. You’ll need at least the pro plan to use their canvas feature.

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

It is a connector plugin that helps connect your WordPress site to your OptinMonster account.

Upon activation, you need to click on the OptinMonster menu in your WordPress admin bar to enter your license key.

Add your OptinMonster API Key

You can find this information from your account dashboard on the OptinMonster website.

After entering your license key, you need to click on the ‘Create New Optin’ button at the top.

Create new optin

This will take you to the create new campaign page on OptinMonster website.

Now you need to select Lighbox as your campaign type and Canvas as your campaign template.

Create new campaign

OptinMonster will now you to enter a name for your campaign. This name will help you identify your campaign in your OptinMonster dashboard.

After that, OptinMonster will launch its campaign builder interface. You will see a live preview of your blank canvas template on the right and OM options on the left.

OptinMonster builder

First you need to add the website where you will be running this campaign.

After that, click on the ‘Optin’ tab to start designing your Facebook lightbox popup.

Design your Facebook lightbox popup

At this point, you will need the embed code for your Facebook page. You can get that by visiting the Facebook Page Plugin website in a new browser tab.

You will need to enter the URL of your Facebook page and adjust the width, height, and other display options for your like box. We recommend using 600px width and 350px height.

After that, click on the Get Code button.

This will bring up a popup where you need to click on the iFrame tab and copy the code.

iFrame code

Now switch back to the OptinMonster builder and paste the code under ‘Canvas custom HTML’ box.

Paste your Facebook page like box code

You’ll be able to immediately see the preview of your Facebook like box.

Next, click on the Save button at the top to store your changes and then click on the publish button to continue.

Save optin and continue

This will take you to the publish settings page for your optin. Toggle Status button to live to make this optin available for your website.

Enable optin for your website

Your Facebook lightbox popup is now ready to be displayed on your WordPress site.

Display Facebook Page Lightbox Popup in WordPress

Switch back to the WordPress admin area of your website and click on the OptinMonster tab. You will now see your newly created optin listed there. If you don’t see it, then click on the ‘Refresh Optins’ button.

Edit output settings

Click on the ‘Edit output settings’ link below your optin to continue.

On the next screen, make sure that the box next to ‘Enable optin on site?’ option is checked.

Enable lightbox popup on your WordPress site

Don’t forget to click on the save settings button.

OptinMonster also allows you to selectively display popup on different pages, posts, categories, or tags. You can also show or hide it from logged in users.

Once you are done, you can visit your website to see your Facebook Page displayed in a lightbox popup.

Facebook page shown in Lightbox popup

We hope this article helped you learn how to promote your Facebook page in WordPress with a lightbox popup. You may also want to see our list of WordPress plugins that will quickly help you get more traffic.

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.

The post How to Create a Facebook Like Box Popup in WordPress appeared first on WPBeginner.