How to add a contact form to a Shopify store

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. You’ll get a 14-day free trial, which is plenty to create and publish the form and start receiving responses.

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.

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.

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.

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.

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

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:

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 3^rd-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!

💡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 3^rd-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.

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

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.

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.

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:

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.

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.