How to add a contact form to a 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 to do is 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. The app comes with a free plan that allows you to add the form to your store and start collecting feedback from your customers at no cost.

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

Step 1. Select a contact form template

To get started, hit +Create widget on the main dashboard screen, then select Design ideas to open the template gallery.

Find the ‘Usecases’ section and scroll down to ‘Floating contact button’.

You’ll access over a dozen contact forms and button templates. Select one of the tabs recommended below 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 automated email response (optional, premium feature)

Once you’re done designing the contact form for your Shopify store, skip the Targeting tab, and go straight to the Follow-up tab. Click + Add a follow-up email and create an automated response from scratch:

How to create a new follow-up email in Getsitecontrol

Although this is not a mandatory step, it’s a good practice to send a follow-up email to those who have filled out the form. You can use this email to confirm that the message has been received, indicate the estimated response time, and provide additional information.

To create the email, you won’t need any 3rd-party email marketing software. Just follow the prompts and type a message using your brand’s tone of voice. Feel free to stylize it with GIFs and buttons!

An example of a follow-up email for a Shopify contact form

💡Use the “Send test email” button to send it to yourself and make sure it’s displayed correctly on both desktop and mobile.

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 connect a form with 3rd-party apps in Getsitecontrol and set up submission notifications

If you want to receive notifications to your email each time someone fills out the form, use the Email notifications option: type your email address and a subject line. You’ll be able to respond directly from your inbox.

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, go to the main dashboard screen and open Responses on the contact form card.

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, go to the right-side menu and select Container:

How to access the Background click settings

Remove the default Background click settings and open the list of available actions. 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.

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