How to add a contact form to Shopify store

Nina De la Cruz
Nina De la Cruz 6 min read

Even if you have a dedicated Contact page in your Shopify store, it’s a good practice to add a contact form to Shopify product pages as well.

Why? Because on the one hand you want to make it easy for your customers to contact you, and on the other hand, you want to keep them on the current page without interrupting their journey.

The solution is simple: a compact ‘Contact us’ tab at the bottom of a page that’s unobtrusive yet always in sight 👇


Compact ‘Contact us’ button for Shopify

When a customer clicks the tab, up pops a contact form which they can fill out right there without leaving the page:

Of course, you’ll be able to customize the fields and the style of the form. You can also integrate it with other software and choose to receive email notifications each time someone leaves a message.

Such a contact form is perfect for:

  • questions
  • suggestions
  • item requests
  • or any other queries

Let’s find out how to add one to your store using Getsitecontrol – an intuitive form builder for Shopify. There’s no need to have any technical knowledge or customize your Shopify theme: all you need is to pick a form template and adjust its content. Keep reading to see how it works.

How to create a Shopify contact form in Getsitecontrol

Before getting started, we recommend finding Getsitecontrol in the Shopify App Store and adding it to your website. You’ll get 14 days of a free trial, which is plenty to install the form and start receiving responses.

Once you create an account, find Getsitecontrol among apps in your Shopify dashboard, log in, and follow the steps below.

Step 1. Select contact form template

You can always create a contact form from scratch, but there’s no need to do it. Hit Create widget, proceed to the template gallery.

How to access the template gallery from the Getsitecontrol dashboard

Scroll down to find ‘Floating contact button’ and open the gallery. You’ll access over a dozen contact forms and button templates. Select one of the tabs and proceed to add it to your Getsitecontrol dashboard.

Contact form template gallery for Shopify

To have a look at the templates without logging in, visit the gallery on the website and click through the categories.

Step 2. Change the copy

Now that you have a template in your dashboard, let’s tweak things up! The default copy on the template is quite generic, so feel free to change it and make it sound more like your brand’s tone of voice. Just click the text you want to edit and start typing – you’ll see the changes right away.

How to adjust the copy on your Shopify contact form

Note that before customers click the button to open the contact form, the title will be the only piece of text they will see. Make sure it explains what the form is intended for. For example, instead of ‘Contact us,’ you can type ‘Contact me,’ ‘Ask me a question,’ ‘Request this item,’ and so on.

Once ready, switch to Page 2 and edit the submission success message. It will be displayed to the customers after they fill out the form.

How to edit the submission success message on the Shopify contact form

Notice that this template contains two buttons: one is meant to drive a customer to your new collection, and another one is meant to close the form. To add your new collection URL to the click, hit the button and paste the link. By default, the page will open in a new browser tab. You can also remove this button if you want to.

Step 3. Adjust the form style

You’ve spent a lot of time designing your store, so you may want to adjust the look of your Shopify contact form as well. To replace the image, click it and proceed to ‘Change image’. You can import your own picture from the desktop, add any image from your store, or select one from the built-in gallery.

How to adjust the appearance of the Shopify contact form

If you want to adjust things like the color theme, form style, or font, use the Theme menu or the CSS editor at the top of the screen.

Step 4. Create an automatic response

Now that the look and the content of the form are ready, let’s talk about what happens next.

If the form suggests a response from you or your team, it’s a good practice to send an automated email to confirm that the message has been received and indicate the estimated response time. To implement this practice, open the Notifications tab and type your text:

How to create an automatic response for your Shopify contact form

Keep in mind that the autoresponder is a built-in Getsitecontrol feature and there’s no need to connect your email marketing software to use it.

💡 If you want to receive notifications to your email each time someone fills out the form, tick the box at the top of the screen and type your email address. You’ll be able to respond directly from your inbox.

Step 5. Integrate the form with your software

Getsiteconrol lets you easily connect the form with various 3rd-party apps and your Shopify Customers list. For instance, if you’re using helpdesk software, CRM, or Google Sheets to keep and sort data, you can connect them using the Integrations tab.

How to integrate your Shopify contact form with other software

The integration process is very straightforward, and it will allow you to automatically collect all the data, be it suggestions, questions, or requests, in a single spreadsheet.

How to access data submitted through your Shopify contact form

You already know how to integrate the form with other software and get notified of new submissions. However, you can also view them right in the Getsitecontrol dashboard. To access all messages submitted through the form, open the Statistics report and select the desired period.

How to view contact form submissions in the Getsitecontrol dashboard

The report doesn’t just let you view the responses. It also provides a form interaction overview, shows you which pages customers contacted you from, where in the world these customers are located, and how they arrived at your website.

At this point, your Shopify contact form is ready. Follow the app prompts to activate it, and the button will go live on every page of your store. If you want to exclude certain pages, or include just some of them, go back to the editing mode, open the Targeting tab, and type the corresponding URLs.

How to create a floating contact button for Shopify

If you prefer having a floating contact button, rather than a tab, consider launchers. Launchers are floating buttons designed to trigger other popups upon click. This is what they look like in action 👇

To use a launcher for triggering a contact form, follow the steps below. You can also read a detailed guide to using launchers on your website.

Step 1. Select a pop-up contact form

From your Getsitecontrol dashboard, open the template gallery, and scroll to the ‘Floating contact button’ use case. This time, you want to select one of the modal popups:

Pop-up contact forms available in the Getsitecontrol gallery

Add the form to your Getsitecontrol dashboard and customize its appearance following the guidelines from the beginning of the tutorial. Then open the Targeting tab and remove the default displaying condition.

How to remove the default targeting settings in Getsitecontrol

This means that the pop-up form will not be displayed unless triggered programmatically (in our case, by the launcher). In the following steps, we’ll show how to implement that.

Step 2. Select a launcher

Save and activate the contact form you’ve just created and go back to the Getsitecontrol dashboard. Create a new widget, proceed to the launcher gallery, and select a floating button template.

The template gallery of launchers, powered by Getsitecontrol

Add the template to your Getsitecontrol dashboard; then adjust the text, font, and color theme to your taste.

Step 3. Connect the launcher and contact form

The last step is to connect the launcher and the contact form so that when your customers click the former, the latter pops up. To implement that, scroll down the right-side menu and select the Background click option.

How to access the Background click settings

Remove any default settings and open the Actions menu. Select ‘Show widget’ and choose your contact form from the list below.

How to connect the launcher background click and the contact form

Save the launcher and activate it on your website. Your floating contact form for Shopify is ready.

Add a contact button to your Shopify store today

When you have a contact form on Shopify that is easily accessible from every page, the chances are higher that customers will follow through with their intention to reach you. Otherwise, you might be missing out on some valuable feedback!

Create a Getsitecontrol account today to add a contact form to your store and see what other types of forms you’ll be able to create with it.

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

Get the print version

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

Download PDF

Best practices

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

Subscribe to get updates

Get beginner-friendly tips for growing your online business.

Join the list →