How to Add a Contact Form in Shopify with Shogun

Contact forms are more than just a communication tool—they’re a gateway to building lasting customer relationships and driving repeat business. For merchants, they represent an opportunity to create a tailored experience that reflects your brand’s professionalism and commitment to customer care. With Shogun, you gain the power to create and customize contact forms in your Shopify store with precision, aligning them seamlessly with your established brand identity.

In this guide, we’ll walk you through every step of the process, from leveraging your experience to create a high-performing contact page to using advanced personalization techniques to deepen customer engagement. 

Here’s what you will learn:

• Importing a Page or Creating a New Contact Page
• Creating Your Form
• Connecting Your Email Service Provider
• Adding Personalization to Your Contact Form

Importing a Page or Creating a New Contact Page

Creating or enhancing your contact page in Shopify with Shogun is the first step in building an effective communication channel with your customers. Whether you’re importing an existing page or starting from scratch, Shogun gives you the flexibility to design a page that fits your brand and meets your needs.

Importing an Existing Page

Shogun’s Page Importer lets you seamlessly bring any page built using a Shopify Online Store 2.0 theme into Shogun for further customization. This tool also enables you to edit sections from your Shopify theme directly within Shogun, giving you greater flexibility in refining your pages. Here’s how to use this feature effectively:

1. Locate Your Shopify Pages: If your store uses a Shopify Online Store 2.0 theme, you’ll find your existing pages listed under the Shopify Pages section of Shogun’s Pages dashboard.

2. Import the Page:

• Click the Import Page button next to the page you want to bring into Shogun.
• Once imported, the page will open in Shogun’s Visual Editor, where you can start customizing it to better fit your brand or add new features.

3. Publish Through Shogun: It’s important to note that importing a page into Shogun doesn’t automatically replace the live version in Shopify. To make the changes visible to your customers, you must publish the page through Shogun. Select whether you want a custom page or Shopify 2.0 sections.

4. Input Your Store Password: To use the Page Importer, ensure you’ve entered your Shopify store password in Shogun. Without this, the import process will not work.

This tool simplifies the process of enhancing Shopify pages, allowing you to unlock the full potential of your existing designs while maintaining control over what’s displayed to your customers.

Creating a New Contact Page

For merchants looking to build a contact page from scratch, Shogun offers a user-friendly Visual Editor that simplifies the process. Starting fresh allows you to design the page exactly how you envision it. Here’s how to do it:

1. Create a Blank Page: From the Shogun dashboard, click Create Page for the top “Pages” section.

2. Select “Browse our Templates” from the dropdown menu.

3. Select “Start from scratch” in the top right corner.

4. Name your page, e.g., “Contact Us,” and set the appropriate URL. Then select “Create page” in the top right corner.

5. Add a Form Element: Drag the Form Element from the editor toolbar onto the page. Place the form in a prominent position, ensuring it’s easily accessible for visitors.

Design the Layout:

Use the Visual Editor to design the page’s layout around the form. Consider adding elements like:

• A welcoming headline, e.g., “We’d Love to Hear from You!”
• A brief description to set expectations, such as response time or available support hours.
• Images or icons that align with your brand and make the page more engaging.

Customize the Form Fields:

Add and configure fields like Name, Email, and Message. For additional functionality, include:

• Dropdown Menus for inquiry categories (e.g., Support, Sales, General Questions).
• Checkboxes for opt-ins, such as newsletter subscriptions.
• File Upload Fields if customers need to attach documents or images.

Finalize and Save:

• Review the design and functionality of your page.
• Save the page and preview it to ensure everything is working as intended.

Pro Tip: Consider the customer journey when designing your contact page. Place essential information, such as your business email or support hours, in a visible spot to make it easier for visitors to reach out.

Creating Your Form

Once your contact page is set up, the next step is to create a form that enables effective communication with your customers. Shogun’s Visual Editor provides an intuitive drag-and-drop interface to make this process straightforward and highly customizable.

Step 1: Add the Form Element

1. Open the page in Shogun’s Visual Editor.
2. From the toolbar, drag and drop the Form Element onto your page where you want the form to appear.
3. Position the form in a prominent location, ensuring it’s easy for visitors to spot.

Step 2: Customize Your Form Fields

Tailor your form to gather the specific information you need from customers:

• Text Fields: Use these for basic inputs like name and email address.
• Text Areas: Perfect for longer responses, such as customer messages.
• Dropdown Menus: Provide pre-defined options for inquiries (e.g., General Support, Sales Inquiry, Returns).
• Checkboxes: Great for opt-ins like newsletter subscriptions or agreement to terms.

Step 3: Style the Form

Customize the look of your form to ensure it aligns with your brand:

• Adjust font styles, sizes, and colors for labels and placeholder text.
• Add spacing between fields to improve readability.
• Use your brand colors for buttons, borders, and highlights to maintain a consistent design.

Step 4: Set Up the Submit Button

• Add a Submit Button to your form, ensuring it stands out visually.
• Customize the button text (e.g., “Send Message” or “Submit Inquiry”).
• Style the button with hover effects or animations to make it engaging.

Step 5: Define Form Behavior

Decide what happens after a user submits the form:

• Redirect them to a thank-you page or display a confirmation message.
• Capture the submitted data to an email address or integrate with an email service provider like Klaviyo (covered in the next section).

Pro Tip: For merchants with extensive customer bases, consider adding conditional logic to your forms. For example, display additional fields based on the customer’s selected inquiry type. This keeps the form clean and focused while still gathering relevant details.

By following these steps, you can create a professional, user-friendly form that not only collects information but also enhances the customer experience.

Connecting Your Email Service Provider

After creating your form, it’s essential to connect it to an email service provider to manage submissions and automate responses. Shogun allows seamless integration with Klaviyo or third-party form providers through Custom Elements, giving you flexibility in how submissions are handled.

Integrating with Klaviyo

Klaviyo is a popular email marketing platform that lets you manage customer data and automate workflows. Here’s how to connect your Shogun form to Klaviyo:

1.Navigate to Form Settings
In Shogun’s Visual Editor, select your form and open the Form Settings menu.

2. Select Klaviyo Integration
Under the Integrations section, choose Klaviyo from the list of available options.

3. Enter Your API Key

• Log into your Klaviyo account and retrieve your API key.
• Paste the key into Shogun’s integration settings.

4. Map Form Fields to Klaviyo Fields
Match the fields in your Shogun form (e.g., Name, Email) with corresponding fields in your Klaviyo database. This ensures submitted data is captured correctly.

5. Choose Submission Destination
After adding the Form Box Element to your page, a new toggle menu will appear. Here, you can select where you’d like form submissions to be sent:

• Email (default option): Submissions will be emailed to you.
• Klaviyo: Form data will be sent directly to your Klaviyo account.

6. Select a Klaviyo List
Once you select Klaviyo as the destination, a new menu will display all the lists available in your Klaviyo account. Choose the appropriate list where you’d like to store the form entries.

7. Save and Test
Save your settings and test the form to ensure that submissions are routed correctly to the selected Klaviyo list.

Embedding Third-Party Forms with Custom Elements

If you’re using a third-party form provider, such as Typeform or Jotform, you can embed their forms directly into your Shogun page using Custom Elements. Here’s how:

1.Get the Embed Code: Log into your third-party form provider and copy the embed code for your form.

2. Add a Custom Element to Your Page: In Shogun, drag and drop the Custom Element onto your page.

3. Paste the Embed Code: Open the settings for the Custom Element and paste the embed code into the provided field.

4. Adjust Layout and Design: Resize the Custom Element to fit seamlessly into your page design. Use Shogun’s styling tools to ensure the embedded form aligns with your overall layout.

5. Test the Embedded Form: Preview the page and test the form to ensure it functions as expected.

Pro Tip: Embedding third-party forms is especially useful for merchants who need advanced form functionality that goes beyond what the built-in Shogun Form Element offers, such as survey features or multi-step forms.

Adding Personalization to Your Contact Form

Personalization is a powerful tool that enhances customer experience and increases engagement. With Shogun, you can create dynamic, segmented contact forms tailored to your audience’s needs. This is especially useful for stores serving multilingual or geographically diverse customers.

Segmenting Contact Pages by Language

For merchants catering to regions with multiple languages, such as Canada, you can create distinct versions of your contact page for different audiences. Here’s how:

1. Duplicate the Contact Page

• In Shogun, duplicate your existing contact page.

• Rename each version to reflect the target audience, e.g., “Contact Us – English” and “Contactez-nous – Français.” To change the name, select the duplicate page and open it. Then, in the upper left corner select the name and a page settings menu will appear. Here, you can give your duplicate page a new name and don’t forget to click on “Save changes.”

2. Translate Form Fields: Update the labels, placeholders, and buttons to the target language. For example:

• “Name” → “Nom”
• “Email” → “Courriel”
• “Submit” → “Envoyer”

3. Set Personalization Rules: Use Shogun’s Personalization Settings to define rules for displaying the appropriate page. For instance:

• Visitors from English-speaking regions see the English version.
• Visitors from French-speaking regions see the French version.

4. Test the Pages: Preview each version of the contact page to ensure the translations and settings are applied correctly.

Customizing Forms for Different Customer Groups

Beyond language, you can tailor forms for specific customer segments, such as VIPs, wholesale buyers, or new visitors. Here’s how:

1. Add Relevant Fields: Include fields that cater to the specific needs of the group. For instance:

• For VIPs: Include a loyalty program ID field.
• For wholesale inquiries: Add a company name or bulk order field.

2. Set Display Conditions: Use personalization rules to show specific forms based on visitor attributes, such as location, browsing history, or referral source.
3. Optimize Follow-Up Actions: Route form submissions to dedicated email lists or CRM segments for personalized responses or offers.

Example in Practice:
If your store serves both English and French-speaking customers in Canada, you can:

• Display a fully translated form for each language.
• Offer segmented follow-up emails in the customer’s preferred language via your email provider.

By integrating these personalization strategies, you can create a tailored experience that not only improves usability but also fosters stronger connections with your customers.