Do you ever worry that your website visitors want to contact you but can’t find a way to do so?
A contact form that is buried on a single WordPress page can easily be overlooked. This means potential customers might leave without asking questions, providing feedback, or making a purchase, resulting in lost opportunities and a less welcoming user experience.
The good news is that there’s an easy solution: implementing a floating contact form that follows your visitors as they navigate your site. This way, they can reach out at any time without having to search for the form.
This is a straightforward method to enhance engagement and foster trust without being intrusive. Best of all, you don’t need any coding experience. With the right plugins, you can set it up in just a few clicks.
In this guide, we will show you three quick methods to add a floating contact form to your WordPress website.
What is a Floating Contact Form and Why Should You Use It?
A floating contact form remains visible on the screen, typically located in the bottom corner or side panel, as visitors explore a WordPress website. It usually appears as a small button or icon that expands into a full form when clicked or hovered over.
Here are some advantages of using a floating contact form on your WordPress site:
- Easy Accessibility.Because the form floats and remains fixed, visitors can access it from any page at any time.
- Minimal disruption.Unlike pop-up windows that can interrupt the user experience, floating forms are generally less intrusive while remaining visible.
- Call to action.The consistent visibility of a floating form serves as a gentle reminder for users to engage, ultimately boosting conversion rates.
As a website owner, you can utilize a floating contact form for customer support, sales inquiries, and gathering feedback.
By allowing visitors to receive assistance instantly while browsing, ask questions without navigating away from the page, and share suggestions at any time, you enhance the overall user experience.
Fortunately, WordPress simplifies the process of adding a floating contact form in several ways. In the upcoming sections, we will guide you through three straightforward methods to set one up:
- Method 1: Creating a Floating Contact Form in WordPress with UserFeedback (Simple and Effective)
- Method 2: Creating a Floating Contact Form in WordPress with WPForms and OptinMonster (Highly Customizable)
- Method 3: Creating a Floating Contact Form in WordPress Using a Free Plugin (Cost-Free and User-Friendly)
- Alternative Method: Implement a Chatbot on Your Website
- Frequently Asked Questions About Floating Contact Forms in WordPress
- Additional Resources for WordPress Forms
Let’s dive in!
Method 1: How to Create a Floating Contact Form in WordPress with UserFeedback
This method is perfect for those looking to create a simple floating contact form with easy customization options.
UserFeedback is a top-rated WordPress feedback plugin that enables you to design customizable feedback forms, floating contact forms, and pop-up surveys. It includes ready-made templates and questions tailored for website experience and eCommerce store surveys.
By utilizing UserFeedback, you can enhance your website based on real user feedback, increase customer satisfaction, and quickly resolve any issues.
At CanadaCreate, we have successfully implemented UserFeedback on our own sites and had an excellent experience. For more details about the plugin, feel free to explore our comprehensive UserFeedback review.
First, install and activate the UserFeedback plugin. If you’re unsure how to install a plugin, you can refer to our guide on installing a WordPress plugin.
📝Note: You can start with the free version of UserFeedback to familiarize yourself with its features. However, in this tutorial, we will be using UserFeedback Pro, which offers additional templates, more question types, targeting options, and other premium functionalities.
After activating UserFeedback on your website, you can begin creating your first survey form.
Go to your WordPress dashboard and selectUserFeedback » Surveys » Create New.
This will take you to the ‘Setup’ section.
With UserFeedback, you can either start with a blank page using the ‘Start from Scratch’ option or select a pre-designed template. In this guide, we will use the ‘Website Feedback’ template.
To select the template, simply click on it.
Next, let’s modify the text. For this example, we will change the ‘Website Feedback’ label to ‘Do you have any feedback?’.
Then, click on the ‘Question Type’ dropdown to determine how visitors can respond to this question. In this case, we will choose ‘Single Text Field’.
After that, you can update the question to ‘Name’.
Now, you will need another question field for the user’s email address.
Scroll down slightly and click the ‘Add Question’ button.
Once you do that, proceed to set up your question type and title just like you did in the previous step.
The next step involves configuring the settings for your form.
In the ‘Settings’ tab, you can enable tracking for your form views and responses using Google Analytics and MonsterInsights.
To utilize this feature, simply enable the ‘Google Analytics Tracking’ option.
📝 Important Note:For a comprehensive understanding of how to use Google Analytics for tracking, check out our guide on setting up Google Analytics goals for your WordPress site.
Next, scroll down to the tab to adjust the targeting and behavior settings.
In the ‘Targeting’ section, select the device type and the specific web pages where your survey form will be displayed.
Device type options include desktop, tablet, and mobile. If you want the form to be visible on all devices, select all three options.
You can choose which pages will display the floating form. We recommend selecting the ‘All Pages’ option so that visitors can access your form from anywhere on your website.
Once you have completed that, scroll down to configure the form’s behavior settings. Here, you will set:
- Display Timing.Choose when your form will appear on your pages.
- Display Length.Determine how frequently your form will be shown to visitors.
- Survey Run Time.Specify the duration for which your form will be visible on the selected pages.
Here’s our configuration for your reference: ‘Display Timing: Immediately,’ ‘Display Length: Always, until the UserFeedback survey is completed,’ and ‘Survey Run Time: Indefinitely.’
You are now prepared to proceed to the next step.
In the ‘Notifications’ tab, input the email address that will receive notifications for form submissions. You can add multiple recipients, ensuring to separate each with a comma.
Lastly, take a moment to review your form one final time before finalizing it.
At the top of the ‘Publish’ tab, you will find ‘Summary of Website Feedback’. Review the bullet points to confirm that your form’s settings are accurate.
If everything appears correct, scroll down to the ‘Publish’ section.
There, you can change the status from ‘Draft’ to ‘Publish’.
Alternatively, you can schedule the launch by enabling the ‘Schedule for Later’ option and specifying the date and time.
Once completed, simply click ‘Save and Publish’ to make your form visible.
And that’s all!
You have successfully added a floating contact form to your WordPress website using UserFeedback.
Method 2: Creating a Floating Contact Form in WordPress with WPForms and OptinMonster
If you’re looking to enhance the design of your floating contact form, this method is perfect for you. We’ll utilize WPForms to create the form and OptinMonster to enable it to float on your WordPress site.
WPForms is the leading contact form builder for WordPress, featuring an intuitive drag-and-drop interface. With over 2,000 templates and AI-driven tools, you can create a WordPress form in just a few clicks.
At CanadaCreate, we rely on WPForms to gather user contacts, feedback, and migration requests. Discover why we highly recommend this plugin in our comprehensive WPForms review.
To start creating forms with WPForms, the first step is to install and activate the plugin on your website. For additional assistance, you can refer to our guide on how to install a WordPress plugin.
📝 Important Note: You can utilize the free version of WPForms for this tutorial. If you require more advanced features, WPForms Pro offers access to the complete template library, advanced fields, and intelligent conditional logic, among other benefits.
After activation, you can go to WPForms » Add New in your WordPress dashboard.
This will take you to the form builder interface.
Begin by entering a name for your form and choosing a template. For this example, we will create a contact form titled ‘Contact Form’.
After naming your form, scroll down the panel to either build your form using AI or select a pre-designed template.
WPForms AI allows you to quickly create forms. Simply describe your requirements, and the AI will automatically generate the necessary fields in seconds.
Whether you require a straightforward user registration form, an engaging job application form, or a comprehensive survey, WPForms AI streamlines the process.
In this tutorial, we will utilize the ‘Simple Contact Form’ template.
To begin building your form, hover over the template box and click on ‘Use Template’.
This action will take you to the form builder’s ‘Fields’ panel.
Here, you can review your contact form and modify any pre-filled content. If everything appears satisfactory, click the ‘Save’ button to proceed.
For more detailed guidance, please refer to our comprehensive step-by-step tutorial on creating a contact form.
Once your form is complete, it’s time to modify its settings to display it as a floating form.
To do this, you will need to install OptinMonster, the top lead generation plugin for WordPress.
This tool allows you to design and manage campaigns aimed at converting website visitors into subscribers and paying customers. Check out our comprehensive guide on building an email list using OptinMonster.
At CanadaCreate, we utilize OptinMonster to showcase special offers through popups and header banners. Read our complete review of OptinMonster to discover more about this powerful software.
After activating the plugin, click on the ‘OptinMonster’ menu item located in your WordPress dashboard.
You will be greeted by a welcome screen where you can select ‘Connect Your Existing Account’ to begin using the plugin.
A new window will appear, allowing you to click ‘Connect to WordPress’.
OptinMonster will then request your account details to finalize the connection.
Once your account is verified, you are ready to create your first campaign.
To begin, simply go to OptinMonster » Campaigns in your WordPress admin dashboard.
Inside the ‘Campaigns’ section, you are prepared to create and configure your floating contact form.
To initiate the process, click the ‘Create Your First Campaign’ button.
Now, it’s time to choose the type of campaign you want to create.
OptinMonster offers various campaign types, including a floating bar. While this may seem like an ideal choice, a floating bar has limited space. It’s best used for specific purposes, such as announcing sales promotions or sharing coupon codes.
To learn more about utilizing a floating bar, we suggest exploring our guide on how to create a sticky floating footer bar in WordPress.
For a clean design, consider using the ‘Slide-in’ campaign type to add your WPForms contact form.
A floating slide-in will appear at the bottom right corner of the user’s screen, helping to maintain content readability, keep web design organized, and enhance user experience.
Simply click on the campaign type you wish to use.
Next, scroll down the panel and choose a template.
To select a template, hover over the template block and click ‘Use Template’. In this case, we are choosing ‘Subscribe to Newsletter (Light)’.
After selecting your campaign type and template, a pop-up window will appear.
You will need to name your campaign. For this example, we will call it ‘Floating Contact Form’.
Once you’ve chosen a name, click ‘Start Building’.
OptinMonster will then take you to the campaign builder.
The campaign creation interface is divided into two sections. The left section features all the elements you can incorporate into your campaign, while the right section provides a live preview.
For additional guidance, check out our tutorial on adding a slide-out contact form in WordPress.
To insert your WPForms contact form, scroll down the left panel to find the WPForms block.
Once you locate it, simply drag and drop the WPForms block into the live preview area on the right.
Next, you will see a dropdown labeled ‘Form Selection’. Click on it and select ‘Contact Form’. The live preview will then display the form’s shortcode.
🧑💻Pro Tip: Don’t be concerned if your form doesn’t appear in the campaign builder preview. It will be visible once you publish the campaign.
After that, you may want to navigate to the ‘Display Rules’ tab. Here, you can configure when and where the floating contact form will be displayed.
To ensure your form floats and is fixed from the very beginning, we suggest setting the first two dropdowns to ‘time on page’ and ‘is immediate’.
To show the form on all pages, set the next dropdowns to ‘current URL path’ and ‘any page’.
Once you have completed this, proceed to the ‘Publish’ tab.
First, update your campaign’s publish status to either ‘Publish’ or ‘Schedule’ on this tab.
Next, utilize the ‘Live Site Inspector’ feature to preview how your campaign appears on your website. Just enter your site’s URL in the text box and click ‘Test.’
This action will open a new tab.
If everything appears as desired, return to the OptinMonster campaign builder and save your campaign.
Congratulations! You’ve successfully created a floating contact form using WPForms and OptinMonster.
Method 3: How to Create a Floating Contact Form in WordPress with a Free Floating Form Plugin
Our final method allows you to showcase a floating icon that links to your contact form page. This technique is slightly different but can be very effective.
There are several free plugins available that enable you to add floating contact icons to your WordPress site. Popular choices include Simple Floating Menu and Float Menu. These plugins usually require you to enter a URL in their settings.
In this tutorial, we will guide you through the process using Simple Floating Menu. If you need assistance with installing the plugin, check out our guide on how to install a WordPress plugin.
Before you access the settings of the Simple Floating Menu plugin, make sure to copy the URL of the page where your contact form is displayed.
To do this, go to the specific page and copy the URL from the address bar.
Now, you can navigate to the Simple Floating Menu in your WordPress dashboard.
Once you are in the plugin’s settings, enable the floating form icon by toggling the ‘Enable Floating Menu’ switch from grey to green.
Next, locate the ‘Button URL’ field and paste the copied URL there.
After entering the button URL, you should receive a notification confirming that your settings have been saved successfully.
At this point, your floating icon should be active on your WordPress site. You can also customize the button’s position and appearance further.
Above the ‘Button URL’ field, you can select a more relevant icon. This plugin provides a variety of icon options, and using the filter feature can help you choose if you’re unsure.
The ‘Tool Tip Text’ will display when visitors hover over the floating icon. We recommend filling this out to provide context about where the icon will direct them.
If you want to redirect visitors to a different page after they click the icon, simply check the ‘Open in New Tab’ option.
You can customize the colors of the floating icon by scrolling down the page. Get creative with the background, icon, and hover effect colors to ensure they align with your brand or website’s personality.
When you’re finished, click ‘Save Settings’ to apply your changes.
Next, navigate to the ‘Settings’ tab for additional customization options.
In this tab, you can select the position of the form on your site, such as top left, middle right, or bottom right.
You can also adjust the button orientation by choosing between vertical or horizontal layouts.
Consider changing the button style as well. The default shape is rectangular, but you can choose a round, triangular, or even star shape.
Explore more customization options in the panel. You can modify the size, shadow styles, typography, and other features of your floating icon to make it truly unique.
Once you’re done, make sure to save your changes to avoid losing any progress.
Now, you can preview how the floating icon appears on your website.
Here’s a visual reference of our floating icon:
Alternative Method: Implement a Chatbot on Your Website
A floating contact form is an effective way for visitors to get in touch with you. However, if you want to offer instant responses, installing a chatbot might be a better option.
A chatbot can either be powered by AI or managed by your support team. For instance, tools like ChatBot can pull information from your website and help center to provide immediate, AI-driven responses to your visitors.
For instructions on how to set this up, check out our tutorial on adding a chatbot in WordPress. To learn more about the software, read our comprehensive ChatBot review.
Frequently Asked Questions About Floating Contact Forms in WordPress
Here are answers to the most frequently asked questions regarding the setup and customization of floating contact forms.
What is the best plugin for creating a floating contact form?
If you want a simple, all-in-one solution, UserFeedback is an excellent option. It is designed for easy setup and customization, making it perfect for straightforward floating forms without any coding required.
For greater control over the design and functionality of your form, consider using WPForms in conjunction with OptinMonster.
WPForms features an intuitive drag-and-drop builder with over 2,000 templates and a variety of AI tools. OptinMonster provides advanced targeting options and design flexibility, allowing you to display your form precisely when and where you want.
Is it possible to customize the design of my floating contact form?
Yes, you can customize the design using all three methods. Adjust colors, text, and positioning to match your site’s branding.
OptinMonster enhances customization further by offering advanced design options and targeting rules, enabling you to refine every aspect of your floating form campaign to suit your specific requirements.
Will using a floating contact form affect my website’s loading speed?
No, it won’t. The plugins highlighted in this guide are well-optimized for performance. They load asynchronously, ensuring that they do not interfere with the loading of your page’s main content, which helps maintain a fast and seamless user experience.
Additional Resources for WordPress Forms
We hope this guide has assisted you in adding a floating contact form to your site. Now that it’s set up, consider exploring these other informative articles to maximize the effectiveness of your forms:
- How to Embed Forms in WordPress
- How to Customize and Style Your WordPress Forms
- A Comprehensive Guide to Creating Multilingual Forms in WordPress
- Tips for Designing More Interactive Forms in WordPress
- The Complete Guide to Utilizing WordPress Forms Effectively
- Top Online Form Builders Recommended by Experts
If you enjoyed this article, consider subscribing to our YouTube Channel for insightful WordPress video tutorials. Connect with us on Twitter and Facebook for more updates.
