How to add a floating contact us button to your website

Nina De la Cruz Nina De la Cruz 5 min read

Having a Contact Us button is essential for any website because it allows visitors to reach you without having to look for contact information.

The best practice is to add a button that looks compact and unobtrusive but always remains in sight – both on desktop and mobile devices.


In this post, we’ll show you how to do just that using the Getsitecontrol form builder.

When visitors click on the button, a contact form will pop up on the same page.

The form and the floating button are completely customizable. Whether you decide to change the design, add more fields or pages, you’ll be able to do it without any technical knowledge.

Once a visitor fills it out, their message can go straight to your inbox, your CRM, Helpdesk, Google Sheets – or any other app of your choice. On top of that, you can create an automated email that will be sent to everyone who submits a message.

Here is how to add a floating Contact Us button to your website

The process consists of three simple steps. First, you select a contact form template. Second, you select a floating button template. Once you do that, all you need is to connect the button and the form to activate them on your website.

See it for yourself 👇

Step 1. Select a contact form template

To get started, select any form template from the gallery; then follow the instructions on the right side of the page.

Start to display the widget section with the highlighted at once section

If you haven’t created a Getsitecontrol account yet, you’ll be prompted to do so. Once you complete quick registration, the contact form you selected will open in your Getsitecontrol dashboard:

The contact form in your Getsitecontrol dashboard

This is where you can customize the form according to your needs. Use the menu on the right-hand side to change the image and copy. To view and edit the submission success message, hit Page 2 at the bottom left corner.

Contact form submission success page example

If you want to change the color theme or text font, use the Theme menu at the top.

Once ready, open the Targeting tab, go to the Start to display the widget section and remove the default ‘Automatically’ condition. Keep the rest of the default settings unchanged.

Start to display the widget section with the highlighted at once section

This setup means that the form will only pop up when a visitor hits the floating Contact Us button – which we’re about to work on in the next step.

Step 2. Select a floating button template

Now, let’s take a look at the 3 most popular sticky contact buttons you can use to trigger the form. Feel free to click on any of the templates to activate the preview mode and see them in action.

Side contact button

Of all contact button formats, this is the most popular one. It sticks to the side of the screen and stays there as your visitors scroll up and down.

To add a more personal touch, you can change the call to action and use something like “Any questions?” or “Need help?” instead of a standard “Contact Us” copy.

Sticky bottom button

This button is similar to the previous one, and it’s also a popular choice among website owners. It’s sitting at the bottom of the page where it remains accessible but not distracting.

Note that you can place a little icon next to the copy to reflect the type of communication you’re open to. Some common examples are an envelope, a phone, or a WhatsApp icon.

Floating “Contact us” button with an image

Finally, you may want your contact button to include an image or a photo of a team member.

Once you select a button template, add it to your Getsitecontrol dashboard, the same way you did with the contact form earlier. Just click on the template and follow the prompts on the right.

At this stage, you can edit the text, adjust the font, color theme, and the image:

Adjusting the style of a floating contact button

The last step is to connect the button and the contact form you created earlier, so that a click on the button triggers the form to pop up.

Step 3. Connect the button to the form

On the same editing screen, open the Container menu:

Container settings menu in Getsitecontrol

Then find Background click settings and select the option named ‘Show widget’. If any other option is set by default, remove it.

Setting up background click action in Getsitecontrol

Finally, select your contact form from the dropdown menu as illustrated below.

Selecting a widget triggered by a launcher click

When you’re done with the settings, click Next → and to save the changes. By default, the button will be visible to everyone, at all times. If you want to change that, use the options available in the Targeting tab.

The last step is to activate both the button and the form in your dashboard:

Activating a floating contact form in the Getsitecontrol dashboard

Once you’ve connected Getsitecontrol to your website, the floating Contact Us button will instantly go live.

💡 Connecting Getsitecontrol is easy and requires zero coding knowledge. You can either follow the prompts in your dashboard or read the instructions for your website platform.

How to set up an automated confirmation email

If your contact form includes an email field, you can send an automated follow-up email to those who fill it out. There’s no need to use any 3rd-party email apps – this feature is already built-in within Getsitecontrol.

To create a follow-up email, select Follow up on the contact form card:

Follow-up button on the widget card in Getsitecontrol

On the next screen, add a new action and select ‘Send email’:

Setting an action within a Follow-up automation

From there, you’ll just need to craft your follow-up email – either from scratch or by using one of the premade templates.

The built-in editor will let you design a beautiful, professional-looking email within minutes and test it before activating the automation.

An example of a follow-up email designed for a website contact form

If you want to make the most out of your follow-up email, give your visitors a reason to come back to your website and explore it further. For example, you can use this email to feature your current promo, your bestseller collection, a first-purchase coupon, or links to your social media pages.

Button customization tips

Now that you have a general idea of how to quickly add a contact button to your website, here are a few tips you may find useful down the road.

  • 💡 You can use the floating button to launch any popup, not just a contact form. Consider an email opt-in form, a callback form, or an order form, as examples.
  • 💡You can create two different buttons: one for desktop devices and one for mobile devices.
  • 💡 You can also set up an Autoresponder and send a custom email to those who have filled out the form – given it includes an email capturing field. To do that, use the Notifications tab.

Let visitors message you with a contact button

Whether you want to collect feedback or let visitors reach you without having to scroll through the entire website looking for a contact form – a floating button can be an excellent solution.

So, what are you waiting for? Add one to your website right now and make yourself available for communication.

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Collect feedback section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF