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 3 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

Add a side/floating 'Contact Us' button to your website

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 the way to contact you – it will always stay visible. When clicked, the button opens a form allowing visitors to leave their message.

Create a floating contact us form – a step by step guide

Let’s see how you can add one to your own website and quickly customize it to your needs by changing the side, the color, the call to action, the form fields and more. The entire process should take you less than 2 minutes.

Step 1. Register an account

If you haven’t signed up yet, do it here – you can try the app for free. Once you create an account, install Getsitecontrol to your website by pasting a piece of code to the pages you want the widget to appear on right before the </body> tag. If you're on WordPress, just download the plugin. Here is a detailed instruction on how to install Getsitecontrol to any website.

Step 2. Create a widget

Once in the dashboard, click Create widget and choose Contact.

Step 3. Set up the appearance

The next step is to define how your Contact Us button and the form will look on the website. There are two tabs for that: Appearance and Content.

On the Appearance tab, you can choose position and color. For a floating one from the example above, select the left-side or the right-side button. You also have full control of each element’s color, but you may as well just apply the website theme automatically.

Step 4. Add your copy and CTA

On the Content tab, you add the copy and choose the fields you want the form to have.

Note that you can change the call to action too. For example, if you want to switch the name of the button from “Contact Us” to “Feedback” or “Got Questions?” — scroll down to Button settings and rename the label.

At this point, if you are happy with the default fields, you can save the widget and activate it. Your brand new Contact Us button will appear on the website immediately. Once someone leaves a message, you’ll receive an email notification and will be able to respond directly from your inbox.

However, you may find the following settings useful

First, you can add custom fields and choose among 8 form templates based on your goals. Thus, if you need something more complex than a feedback form, you can choose a support request form, an online order form, a callback form or any other form relevant to your business. Each template has a pre-configured set of fields you can modify if you want to.

Second, on the Behavior and Targeting tabs, 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