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
💥 Join 5K subscribers

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.

To create a floating “Contact Us” button, you’ll be using two widgets: the button itself and the contact form that will pop up on button click.

1. Create a form

  1. Log in to your Getsitecontrol dashboard.

  2. Click +Create widget and choose Contact visitors from the dropdown list.

  3. Select a Modal webpage position, choose one of the available “Contact Us” templates and click Continue →.

  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 adjust 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 sticky buttons that trigger the forms. Below, we’ll review the three most popular types of “Contact us” buttons, but you can check other options in the sticky button gallery.

2. Create a floating “Contact us” button

Sticky side button

This is 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 a standard “Contact Us” to add some personal touch.

Sticky 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.

Floating “Contact us” 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.

You can preview any button featured in this post by clicking the See live preview link. If you like the button, you can copy it to your Getsitecontrol dashboard within a couple of clicks. There you’ll be able to edit the copy and connect the button to the form you created in the previous step.

3. Connect the button to the form

  1. When editing the button, switch to the Content tab and navigate to 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.

How to launch a contact form upon click on a floating button in Getsitecontrol

  1. When you are done configuring other button settings, click Save & close to save the changes. Activate the widget.

When you activate both of 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