How to Show a Floating Contact Form in WordPress (3 Methods)

Many web site homeowners discover it difficult to present easy accessibility to contact choices with out cluttering their web site design. Floating contact varieties provide a resolution by permitting customers to attain out simply, no matter the place they're in your web site.

Now we have used this technique on our personal web sites to gather consumer suggestions and permit guests to simply contact us. Fortunately, there are many WordPress plugins that may aid you do the identical in your web site.

On this article, we'll present you ways to present a floating contact kind in WordPress.

What Is a Floating Contact Form and Why Use It?

A floating contact kind stays on the display, equivalent to the underside nook or facet panel, as guests flick through a web site. It usually seems as a small button or icon that expands into a full kind when clicked or hovered over.

Listed here are some advantages of utilizing a floating contact kind:

• Accessibility. For the reason that kind floats and stays mounted, web site guests can entry it from any internet web page at any level.
• Minimal intrusion. Not like popups that may interrupt the consumer expertise, floating varieties are usually much less disruptive whereas nonetheless being noticeable.
• Name to motion. A floating kind’s fixed presence gently reminds customers to interact, which helps improve conversions.

As a web site proprietor, you should use a floating contact kind for buyer assist, gross sales inquiries, and suggestions assortment.

By permitting guests to get assist immediately as they browse your web site, ask questions with out leaving the web page, or share their options at any time, a floating contact kind can enhance the consumer expertise in your web site.

With WordPress, you may show a floating contact kind in some ways.

Within the following sections, we'll share three straightforward strategies for exhibiting a floating contact kind on a WordPress web site. Merely use the short hyperlinks beneath to select the strategy you would like to use:

Let’s get began!

Methodology 1: Creating a Floating Contact Form in WordPress Utilizing UserFeedback

In order for you to create a easy floating contact kind with simple customization choices, this methodology is for you.

UserFeedback is a WordPress plugin that may aid you create customizable suggestions varieties, floating contact varieties, and pop-up surveys. This plugin comes with built-in templates and questions, together with for web site expertise and eCommerce retailer survey varieties.

We use UserFeedback on our personal web sites, and you'll be taught extra in our full UserFeedback evaluate.

Through the use of UserFeedback, you may enhance your web site based mostly on precise consumer enter, increase buyer satisfaction, and deal with any points promptly.

First, you want to set up and activate the UserFeedback plugin. If you happen to don’t understand how to set up a plugin, you may comply with our information on how to set up a WordPress plugin.

After you have UserFeedback activated in your web site, you can begin creating your first survey kind. Out of your WordPress dashboard, navigate to UserFeedback » Surveys » Create New.

When you do that, you’ll get to the ‘Setup’ part.

With UserFeedback, you can begin with a clean web page with the ‘Start from Scratch’ choice or use a pre-made template. On this information, we’ll use the ‘Website Feedback’ template. 

To decide on the template, merely click on on it.

Subsequent, let’s edit the copy. On this instance, we’re altering the ‘Website Feedback’ label to ‘Do you have any feedback?’.

Then, you may want to click on on the ‘Question Type’ dropdown to select how guests can reply this query. On this instance, we’ll go together with ‘Single Text Field’.

After that, you may change the query into ‘Name’.

Now, you’ll want one other query discipline for the consumer’s e mail deal with.

You possibly can scroll down a bit and click on the ‘Add Question’ button. When you do this, go forward and arrange your query sort and title as you probably did in the earlier step.

The subsequent step is configuring the shape’s settings.

Within the ‘Settings’ tab, you may activate monitoring to your kind views and responses utilizing Google Analytics and MonsterInsights. Merely toggle on ‘Enable Google Analytics Tracking’ to use the characteristic.

In order for you to be taught extra about utilizing Google Analytics for monitoring, you may learn our information on how to arrange Google Analytics targets to your WordPress web site.

After that, you may want to scroll down the tab to configure focusing on and conduct.

Within the ‘Targeting’ part, you may select the system sort and the online web page that may show your survey kind.

The system sort choices embody desktop, pill, and cellular. In order for you the shape to show on all these gadgets, you may choose all three.

Then, you may select all of the pages you need to show the floating kind. We suggest choosing the ‘All Pages’ choice so guests can entry your kind wherever in your web site.

As soon as performed, let’s scroll down and configure the shape’s conduct. Right here, you’ll set:

• Show Timing. Decide when your kind will seem in your pages.
• Show Size. Outline how typically your kind might be proven to guests.
• Survey Run Time. Specify how lengthy your kind will seem on the designated pages.

Now, you’re prepared to transfer on to the following step.

Within the ‘Notifications’ tab, you’ll enter the e-mail deal with that may obtain kind submission notifications. You possibly can add a number of recipients, however you’ll want to be sure that to use a comma to separate every of them.

Lastly, you may want to spare a while to test your kind one final time earlier than finalizing it.

On the highest a part of the ‘Publish’ tab, you’ll see ‘Summary of Website Feedback’. You possibly can undergo the bullet factors one after the other to see in case your kind’s configurations are right.

If every thing appears good, you may scroll down to the ‘Publish’ part.

There, you may change the standing from ‘Draft’ to ‘Publish’. Alternatively, you may schedule a launch by toggling on the ‘Schedule for Later’ choice and defining the date and time.

As soon as performed, merely click on ‘Save and Publish’ to show your kind.

And that’s it! You’ve efficiently displayed a floating contact kind in your WordPress web site utilizing UserFeedback.

Methodology 2: Creating a Floating Contact Form in WordPress Utilizing WPForms and OptinMonster

In order for you extra design management over your floating contact kind, then that is the strategy for you. We are going to use WPForms to create the shape and OptinMonster to make it float in your WordPress web site.

WPForms is an easy-to-use, drag-and-drop plugin for constructing WordPress varieties. With over 1,800 templates accessible, you may shortly arrange a kind in simply a few clicks. To be taught extra, you may see our full WPForms evaluate.

To create varieties with WPForms, the very first thing you’ll want to do is set up and activate the plugin in your web site. If you happen to want additional assist, you may learn our information on how to set up a WordPress plugin.

Upon activation, you may navigate to WPForms » Add New out of your WordPress dashboard.

It will redirect you to the shape builder’s interface.

There, all you want to do is sort in your kind title and choose a template. On this instance, let’s create a contact kind and title it ‘Contact Form’.

After naming your kind, you may scroll down the panel to choose a template.

On this instance, we’re going to use the ‘Simple Contact Form’ choice. To start out constructing, merely hover over it and click on ‘Use Template’.

It will redirect you to the shape builder’s ‘Fields’ panel.

From right here, you may want to evaluate your contact kind and regulate the pre-made content material. If every thing appears good already, you may go forward and click on the ‘Save’ button.

For detailed directions, be at liberty to see our step-by-step information on how to create a contact kind.

When you’ve completed creating your kind, it’s time to regulate its settings so it reveals as a floating kind.

For this, you’ll want to set up OptinMonster and join your WordPress web site to the plugin.

OptinMonster is a highly effective lead technology and popup plugin. It might aid you create and handle campaigns to convert guests into subscribers and paying clients.

You possibly can take a look at our detailed information on how to construct an e mail checklist with OptinMonster.

Upon activation, you may click on on the ‘OptinMonster’ menu merchandise out of your WordPress dashboard.

You’ll then see the welcome display, the place you may click on ‘Connect Your Existing Account’ to get began with the plugin.

A brand new window will open, and right here, you may click on ‘Connect to WordPress’.

OptinMonster will then ask to your account particulars to full the method.

As soon as verified, you’re all arrange to create your first marketing campaign.

To get began, merely navigate to OptinMonster » Campaigns out of your WordPress dashboard.

When you’ve reached ‘Campaigns,’ you’re prepared to create and arrange your floating kind.

To get began, merely click on the ‘Create Your First Campaign’ button.

Now, it’s time to choose a marketing campaign sort.

OptinMonster has varied marketing campaign varieties, together with a floating bar. Whereas it would sound like the proper marketing campaign sort, a floating bar has restricted area. So, you’d need to use it for different instances like saying gross sales promotions or sharing coupon codes.

In order for you to be taught extra about utilizing a floating bar, we suggest testing our information on creating a sticky floating footer bar in WordPress.

To maintain your design neat, you may go together with ‘Slide-in’ as your marketing campaign sort for including your WPForms contact kind.

A floating slide-in will keep on the backside proper nook of the consumer’s display. So, it could assist hold your content material readable, internet design organized, and consumer expertise nice.

You possibly can merely click on the marketing campaign sort to use it.

Then, let’s scroll down the panel and choose a template.

To make use of a template, merely hover over the template block and click on ‘Use Template’. Right here, we’re selecting ‘Subscribe to Newsletter (Light)’.

When you’ve picked your marketing campaign sort and template, a pop-up window will seem.

You’ll simply want to give your marketing campaign a title. On this instance, we'll title our marketing campaign ‘Floating Contact Form’.

After deciding on the title, you may click on ‘Start Building’.

OptinMonster will then redirect you to the marketing campaign builder.

The marketing campaign constructing interface has two sections. The left facet incorporates all of the options you may add to your marketing campaign, and the correct facet is the dwell preview.

For extra info, you may see our tutorial on how to add a slide out contact kind in WordPress.

So as to add your WPForms contact kind, you may scroll down the left panel to find the WPForms block.

When you’ve discovered it, merely drag and drop the WPForms block to the dwell preview in the correct panel.

Then, you’ll see a ‘Form Selection’ dropdown. You possibly can click on on it after which select ‘Contact Form’. The block in the dwell preview will then load the shape’s shortcode.

After that, you may want to transfer to the ‘Display Rules’ tab. This tab is the place you may set the floating contact kind show timing and pages.

To make sure that your kind floats and stays mounted from the primary second, we suggest setting the primary two dropdowns as ‘time on page’ and ‘is immediate’.

Then, to show the shape on all pages, you may set the next dropdowns as ‘current URL path’ and ‘any page’.

As soon as performed, you may head to the ‘Publish’ tab.

On this tab, the very first thing you've got to do is to change your marketing campaign’s publish standing to ‘Publish’ or ‘Schedule’.

The subsequent step is to use the ‘Live Site Inspector’ characteristic to check how your marketing campaign appears in your internet web page. To do that, merely sort your web site’s URL into the textual content field and click on ‘Test.’

It will redirect you to a new tab.

If every thing appears the best way you need it, you may return to the OptinMonster marketing campaign builder and save your marketing campaign.

There you've got it! You’ve efficiently created a floating contact kind utilizing WPForms and OptinMonster.

Methodology 3: Creating a Floating Contact Form in WordPress Utilizing a Free Floating Form Plugin

Our final methodology will permit you to show a floating icon that redirects to your contact kind web page. This strategy is barely completely different, however it may be efficient.

A number of free plugins permit you to add floating contact icons to your WordPress web site. Some in style choices embody Easy Floating Menu and Float Menu. These plugins usually require you to embed a URL into their settings.

On this tutorial, we'll display how to do that utilizing Simple Floating Menu. If you happen to need assistance putting in the plugin, you may learn our information on how to set up a WordPress plugin.

Earlier than accessing the Easy Floating Menu plugin’s setting space, let’s copy the web page URL the place you show your contact kind.

To do that, navigate to the web page in query and duplicate the URL from the URL bar.

Now, you may open Easy Floating Menu out of your WordPress dashboard.

When you’re in the plugin’s settings space, you’ll need to allow the floating kind icon. You are able to do this by switching on the ‘Enable Floating Menu’ slider. It'll then flip from gray to inexperienced or from off to on.

Then, go forward and discover the ‘Button URL’ discipline to paste the URL into.

When you’ve entered the button URL, it's best to see a notification in case your settings are efficiently saved.

By now, your floating icon needs to be dwell in your WordPress web site. Nonetheless, you may additional customise the button’s place and look.

Above the ‘Button URL’ discipline, you may change the default icon to one thing extra related. This plugin presents dozens of icon choices, so if you happen to ever really feel caught, it’s a good concept to use the filter characteristic.

‘Tool Tip Text’ will seem when web site guests hover over the floating icon. We suggest filling this discipline out to give guests context on the place the icon will get them.

Then, if you'd like to redirect guests to a new web page after clicking the icon, merely tick the checkbox on the ‘Open in New Tab’ discipline.

You possibly can edit the floating icon’s colours by scrolling down the display. Be happy to be artistic with the background, icon, and hover impact colours so long as they match your model or web site persona.

Once you’re performed, go forward and click on ‘Save Settings’.

Subsequent, you may transfer to the ‘Settings’ tab for extra customization options.

On this tab, you may select the place you need the shape to seem in your web site, equivalent to high left, center proper, or backside proper.

There are additionally button orientation settings. You possibly can decide vertical or horizontal. You may want to change the button model, too. The default form is a rectangle, however you may go for spherical, triangle, and even a star.

You could find extra customization settings down the panel.

Merely regulate your floating icon’s dimension, shadow types, typography, and extra to make it extra distinctive.

As soon as performed, all that’s left to do is save so that you don’t lose your progress.

Now, you may go forward and see how the floating icon appears in your web site.

Right here’s what our floating icon appears like to your reference:

Different: Use a Chatbot on Your Web site

A floating contact kind is a smart way to permit guests to attain you. However if you'd like to present rapid responses to your customers, then it could possibly be price putting in a chatbot as an alternative.

A chatbot might be AI-powered or dealt with immediately by your assist staff. For instance, a software like Chatbot can supply info out of your web site and assist heart to present AI-powered responses instantly to your guests.

For particulars on how to set this up, you may see our tutorial on how to add a chatbot in WordPress.

We hope this information has helped you create and show a floating WordPress contact kind. Subsequent, you may want to take a look at our information on how to create extra interactive varieties in WordPress and our knowledgeable decide of one of the best WordPress contact kind plugins.

If you happen to preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It's also possible to discover us on Twitter and Facebook.