How to Create Floating Contact Forms in WordPress with WPForms and OptinMonster

If you want to have a better understanding of theFloating contact formFor more design control, then the method described today is more suitable for you. We'll be using the WPForms Create Formand use OptinMonster Make it float on your WordPress site.

WPFormsis an easy-to-use drag-and-drop plugin for building WordPress forms. It offers more than 1,800 templates to quickly set up forms with a few clicks.

To create a form using WPForms, first install and activate the plugin on your website.

Once activated, you can navigate from the WordPress dashboard to theWPForms " Add new content.

will redirect you to the form builder interface.

From there, enter a form name and select a template. In the example, we create a contact form and name it "Contact form".

After naming the form, scroll down the panel to select a template.

In this example, we use "Simple Contact Form" option. To start the build, hover over and click the "Using templates"Just do it.

will redirect to the form builder's "field"Panel.

From here, you can view the contact form and adjust the prefabricated content. If it looks about right, continue and click "save (a file etc) (computing)"Button.

Once you've finished creating the form, it's time to adjust its settings to make it appear as a floating form.

So, you also need to install OptinMonster and connect your WordPress site to the plugin.

OptinMonster is a powerful lead generation and popup plugin. It helps create and manage campaigns to convert visitors into subscribers and paying customers.

Once activated, you can click on "OptinMonster"Menu item.

You will then see a welcome screen where you can click "Connect your existing account" to start using the plugin.

A new window will open where you can click "Connecting to WordPress".

OptinMonster will then request account details to complete the process.

Once validated, you can create your first floating form.

Navigating from the WordPress DashboardOptinMonster " Campaigns.

Once inside you can create and set up floating forms.

Click "Create your first campaign"Button.

OptinMonster has various activity types, including floating columns. However, the floating bar has limited space. So, our recommendation is to use it for other situations, such as announcing promotions or sharing coupon codes.

To keep the design neat and tidy, you can choose "slide in" as the activity type for adding a WPForms contact form.

The floating slide-in will stay in the bottom right corner of the user's screen. Thus, it helps to keep the content readable, the web design organized and a good user experience.

Click the activity type to use it.

We then scroll down the panel and select a template.

To use a template, simply hover over the template block and click "Using templates". Here, we choose "Newsletter subscription (lite)".

Once you have selected the event type and template, a pop-up window will appear.

Just name the form. In this example, we named the activity "Floating Contact Form".

After deciding on a name, click "Start building".

OptinMonster then redirects to the active builder.

The campaign creation interface is divided into two sections. The left side contains all the features that can be added to a campaign, and the right side is a live preview.

To add a WPForms contact form, scroll down the left panel to find the WPForms block.

Once you have found it, drag and drop the WPForms block into the live preview in the right panel.

Then, one will see a "form selection" drop-down menu. Click on it and select "Contact form". The block in the live preview will load the form's shortcode.

Note: Don't worry if you can't preview the form in the form builder. The form will appear when published.

After that, if you want to switch to "Display Rules" tab. In this tab, you can set the display time and page of the floating contact form.

To make sure the form floats and stays fixed from the first second, we recommend setting the first two dropdowns to "Page Dwell Time"and"imminent".

Then, in order to display the form on all pages, the following dropdown can be set to "Current URL path"and"Any page".

When you're done, go to "post"Tab.

On this tab, change the posting status of the form to "post"or"program".

The next step is to use "Real-time website checker" feature to test how well the ad campaign is displayed on a web page. To do this, simply enter the URL of the website in the text box and click "test (machinery etc)".

This will redirect you to a new tab.

If that's what you want, you can return to the OptinMonster campaign builder and save the settings.

This successfully creates a floating contact form using WPForms and OptinMonster.