How to add a floating contact us button to your website

How to add a floating contact us button to your website
Nina De la Cruz
Nina De la Cruz 4 min read

Having a Contact Us button is essential for any website because it allows your audience to ask questions and shows that you care about what they think. The best practice would be adding one that looks compact and unobtrusive but always remains in sight. In this post, we’ll show you how to do just that using Getsitecontrol.

Here is how the result may look like

An example of a side 'Contact Us' button triggering a form

The button will float along while your visitors scroll down the page so whenever they have something to say, there’s no need to look for a way to contact you – it will always stay visible. When clicked, the button opens a form allowing visitors to leave their message.

Before everything else, you’ll need to register a Getsitecontrol account and connect it to your website if you haven’t done this yet. If you’re on WordPress, you can just use a dedicated plugin. If you’re using any other website platform, check out our short instructions on how to do it. Then you can start creating widgets.

Please note: in the case of a “Contact Us” button, you’ll actually need to create two separate widgets: the button itself and the form that will be shown when the button is clicked.

1. Create a form

  1. Log in to your Getsitecontrol dashboard.
  2. Click +Create widget and choose Contact with visitors from the dropdown list.
  3. Select a Modal webpage position, choose one of the available “Contact Us” templates and click Choose & customize.
  4. On the Content tab you can customize the title and copy, add or remove form fields and buttons.
  5. If you’d like to change the look of the template, you can do it on the Appearance tab: change the colors for the widget and, if necessary, its size and paddings.
  6. On the Targeting tab, go to the Start to display the widget section and remove the default at once condition. Don’t change any other settings.

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

  1. Click Save & close to save the widget and activate it.

Now let’s take a look at the floating buttons that trigger the forms. At the moment, there are three types of ready-made buttons available with Getsitecontrol.

2. Create a floating button

Sticky side button

A classic button that sticks to the side of your page when visitors scroll it down. You can change the call-to-action on it and use something like “Any questions?” or “Need help?” instead of standard “Contact Us” to add some personal touch.

A sticky Contact us button on the right side of the page See live preview →

Floating button with text

This button is quite similar to the previous one. The only difference is that it can be located at the bottom of the page where it remains accessible but not distracting.

A floating Contact us button at the bottom of the page See live preview →

Floating button with an image

Since a picture is worth a thousand words, you can use a button with an eye-catching image instead of a classic call-to-action.

A floating Contact us button at the bottom of the page See live preview →

You can preview any button listed above and copy it to your Getsitecontrol dashboard. There you’ll be able to edit it and connect to the form that you created in the previous step.

3. Connect the button to the form

  1. When editing the button, switch to the Content tab and find the Background click section.
  2. Click +Add action and choose Show widget from the dropdown list.
  3. Click Choose and pick the form you want to show by button click from the list. Then click Done.
  4. When you are done configuring other button settings, click Save & close to save the changes. Activate the widget.

When you activate both the widgets, the button and the form, you should see the “Contact Us” button of your choice on the website. Anytime someone clicks it, the form will appear.

You may find the following settings useful

First, you can trigger any form by the button click: it doesn’t have to be a default “Contact Us” form. You can choose a technical request form, a callback widget, or a form for submitting complaints — it’s up to you! Just add custom fields, remove the default ones and make sure to update all texts in your widget. They can be found on the Content tab.

Second, on the Targeting tab, you can set up precisely the time and the conditions for the “Contact Us” button to appear and disappear from the page — in case you don’t want it to be displayed at all times.

Finally, on the Integration tab, you can set up an Autoresponder feature and create a message that will be emailed to each person who fills out the form. There is also an option to connect it to your email marketing service, CRM or any other app using Zapier.

Tips for your marketing strategy