It’s super important to keep in touch with your website visitors. A floating contact form is a great way to do this. It lets visitors reach out without having to leave the page they’re on. Whether you have a blog, an online store, or a portfolio, having a contact form that’s easy to find can really boost your customer service and help you get more sales.

If you’re using WordPress, you’re in luck! Adding a floating contact form to your site is simple and can be done in a few different ways. In this article, we’ll go over two easy methods for setting up a floating contact form. We’ll cover everything from using popular plugins to adding some custom code. No matter your skill level, we’ll help you find the best option for your needs. Get ready to make your website more interactive and improve the user experience with a floating contact form that looks good and works well. Let’s get started!

What are Floating Contact Forms?

Floating contact forms are web forms that stay fixed in a specific position on a webpage as users scroll. Unlike regular contact forms that may require users to navigate away from the content or scroll down to find them, floating forms remain visible, usually appearing in a corner of the screen. This design ensures that visitors can easily access the form to get in touch without interrupting their browsing experience.

Here are some key features of floating contact forms:

1. Visibility: Since they are always on the screen, users can see them at all times, making it easy for them to reach out.
2. User-Friendly: Floating forms are designed to be quick and easy to fill out, often requiring just a few fields, which encourages more users to complete them.
3. Customizable: Many floating contact form solutions allow customization in terms of design, colors, and fields, helping you match the form to your website’s style.
4. Enhanced Engagement: By making it easier for visitors to contact you, floating forms can increase user engagement and lead to higher conversion rates.

Overall, floating contact forms are a great tool for improving communication and customer service on your website.

Benefits of Using a Floating Contact Form :

Using a floating contact form offers several benefits for both website owners and visitors. Here are some key advantages:

1. Increased Visibility: Floating contact forms are always visible, making it easy for visitors to find and use them at any time without scrolling or navigating away from the content.
2. Improved User Experience: By providing a quick and easy way for users to contact you, floating forms enhance the overall browsing experience, reducing frustration and increasing satisfaction.
3. Higher Conversion Rates: With easy access to a contact form, more visitors are likely to reach out, which can lead to more inquiries, leads, and ultimately, conversions.
4. Customization Options: Many floating contact forms can be customized in terms of design, colors, and fields, allowing you to match them to your website’s branding and style.
5. Mobile-Friendly: Floating forms are often responsive, ensuring they work well on mobile devices, where screen space is limited but contact is still essential.
6. Reduced Bounce Rate: By providing a way for users to engage without leaving the page, floating contact forms can help keep visitors on your site longer, reducing bounce rates.
7. Real-Time Engagement: Floating forms can be paired with chat features or instant messaging options, allowing for immediate responses and engagement with visitors.
8. Easier Communication: They simplify the process of getting in touch, making it convenient for visitors to ask questions or request information without having to dig through menus.

Guide to Create Floating Contact Form in WordPress :

---

Method 1 : Using a WordPress Plugin (WPForms & OptinMonster)

WPForms is a user-friendly, drag-and-drop plugin designed for creating forms on WordPress sites. With an impressive collection of over 1,800 templates, you can easily set up a form in just a few clicks. This makes it a great choice for anyone looking to streamline their form-building process.

• Step 1: Install WPForms :
  • Get Started: Go to your WordPress dashboard.
  • Install WPForms: Navigate to Plugins > Add New, search for “WPForms,” and install the plugin.
  • Activate the Plugin: After installation, click on “Activate.”

• Step 2: Create a Contact Form :
  • Add a New Form: From your WordPress dashboard, go to WPForms > Add New.
  • Name Your Form: Type a name for your form, like “Contact Form.”
  • Select a Template: Scroll down to choose a template. For this example, pick the Simple Contact Form and click Use Template.
  • Customize Your Form: Review the form and make any adjustments as needed.
  • Save Your Form: Click the Save button when you’re happy with your design.

• Step 3: Install OptinMonster :
  • Install OptinMonster: Similar to WPForms, navigate to Plugins > Add New, search for “OptinMonster,” install, and activate it.
  • Connect Your Account: Go to the OptinMonster menu in your dashboard and click on “Connect Your Existing Account.” Follow the prompts to link it to your WordPress site.

• Step 4: Create a Floating Campaign :
  • Access Campaigns: From the WordPress dashboard, go to OptinMonster > Campaigns.
  • Create a New Campaign: Click on Create Your First Campaign.
  • Select Campaign Type: Choose Slide-in as your campaign type, which allows your contact form to appear without blocking content.
  • Choose a Template: Select a template, like Subscribe to Newsletter (Light), and click Use Template.
  • Name Your Campaign: Name it “Floating Contact Form” and click Start Building.

• Step 5: Add Your WPForms Contact Form :
  • Find the WPForms Block: In the campaign builder, locate the WPForms block in the left panel.
  • Drag and Drop the Block: Drag it into the live preview area on the right.
  • Select Your Form: Click on the Form Selection dropdown and choose the contact form you created.

• Step 6: Set Display Rules :
  • Display Rules Tab: Go to the Display Rules tab to configure when and where the form appears.
  • Set Timing: Choose ‘time on page’ and set it to ‘is immediate’ to show the form right away.
  • Display on All Pages: Set the dropdowns to ‘current URL path’ and ‘any page’ to make the form appear site-wide.

• Step 7: Publish Your Campaign :
  • Go to the Publish Tab: Change the campaign’s status to Publish or Schedule as needed.
  • Test Your Campaign: Use the Live Site Inspector feature by entering your site’s URL and clicking Test to see how it looks.
  • Save Your Campaign: If everything looks good, return to the OptinMonster campaign builder and save your campaign.

If everything looks the way you want it, you can go back to the OptinMonster campaign builder and save your campaign.

There you have it! You’ve successfully created a floating contact form using WPForms and OptinMonster.

Method 2 : Using a WordPress Free Plugin (Simple Floating Menu) :

Our last method shows you how to add a floating icon that links to your contact form page. This is a bit different, but it can work well.

There are several free plugins you can use to add floating contact icons to your WordPress site, like Simple Floating Menu. These plugins usually just need you to enter a URL in their settings.

In this tutorial, we’ll focus on using Simple Floating Menu. If you’re not sure how to install the plugin, check out our guide on installing a WordPress plugin.

• Step 1: Copy the Page URL :
  • Navigate to Your Contact Page: Open the contact page you want to link to and copy its URL from the address bar.

• Step 2: Open Simple Floating Menu :
  • Access the Plugin Settings: In your WordPress dashboard, find and open the Simple Floating Menu plugin.
• Step 3: Enable the Floating Form Icon :
  • Turn on the Floating Menu: Find the ‘Enable Floating Menu’ slider and switch it on. It should change from grey to green.
  • Paste the Button URL: In the ‘Button URL’ field, paste the URL you copied earlier.
  • Save Settings Notification: You should see a notification indicating that your settings have been saved successfully.

• Step 4: Customize the Floating Icon :
  • Choose a Relevant Icon: Above the ‘Button URL’ field, select an icon that fits your brand. Use the filter feature if needed.
  • Add Tooltip Text: Fill out the ‘Tool Tip Text’ field to provide context for visitors when they hover over the icon.
  • Open in New Tab (Optional): If you want the link to open in a new tab, check the box for ‘Open in New Tab.’
• Step 5: Adjust Icon Appearance :
  • Change Colors: Scroll down to customize the background, icon, and hover effect colors to match your website’s style.
  • Save Your Changes: Click ‘Save Settings’ once you’re satisfied with the appearance.

• Step 6: Further Customizations :
  • Settings Tab: Move to the ‘Settings’ tab for more options.
    • Choose Icon Position: Select where you want the form to appear (e.g., top left, middle right, or bottom right).
    • Button Orientation: Decide on vertical or horizontal button orientation.
    • Button Style: Change the default rectangle shape to round, triangle, or star if desired.
  • Additional Customizations: Adjust the size, shadow styles, typography, and other settings to make the icon unique.
  • Save Your Progress: Don’t forget to click ‘Save’ after making changes.

• Step 7: Preview Your Floating Icon :
  • Check Your Website: Visit your website to see how the floating icon looks in action.
  • And there you have it! Your floating contact icon is now live on your website, making it easier for visitors to reach out.

Conclusion: Choosing the Right Method for Your Needs

When it comes to adding a floating contact form to your WordPress site, you have a couple of solid options to choose from. If you’re looking for something feature-rich and easy to customize, using plugins like WPForms and OptinMonster is a great way to go. This method not only allows you to create a fully functional contact form but also helps you engage visitors effectively.

On the other hand, if you prefer a simpler, more straightforward solution, the Simple Floating Menu plugin is a fantastic choice. It’s easy to set up and requires minimal customization, making it perfect for those who want a quick way to link to their contact page without much fuss.

Ultimately, the right method for you depends on your specific needs and how much time you want to invest. Both options can enhance user interaction on your site and make it easier for visitors to reach out. So, consider your goals and choose the approach that fits best with your website’s style and functionality. Happy building!

Checkout Creating a High-Converting Sales Funnel in WordPress