Shopify Contact Form Section

Description of the Section

The Contact Form section allows you to seamlessly integrate a customizable and stylish contact form into your Shopify store. This section provides a user-friendly interface for customers to get in touch with you, while giving you the flexibility to control fonts, colors, dimensions, and form fields to match your store's design and branding.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Contact Form"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Customer Support: Use the contact form to allow customers to reach out for support, providing a direct channel for resolving issues or answering questions about products.
2. Feedback Collection: Encourage customers to provide feedback on their shopping experience, helping you to understand strengths and areas for improvement.
3. Order Inquiries: Customers can use the form to ask questions about their orders, shipping information, or product details.
4. Business Inquiries: Potential business partners or wholesale buyers can use the form to get in touch with you for business opportunities.
5. Custom Orders: Facilitate custom order requests where customers can specify their unique requirements.

Overview of the Configuration Settings

1. Font Settings:

   • Override theme fonts: Enable or disable overriding of global theme fonts.
   • Text Font: Choose a custom font for the text.
   • Headline Font: Choose a custom font for the headline.

2. Text Settings:

   • Text Size: Set the size of the text in pixels.
   • Text Line Height: Choose the line height for the text.
   • Text Color: Define the color of the text.
   • Form Label Color: Set the color of the form labels.
   • Headline Size: Set the size of the headline text in pixels.
   • Headline Line Height: Choose the line height for the headline text.
   • Headline Color: Define the color of the headline.

3. Colors:

   • Background Color: Set a background color or gradient for the section.
   • Divider Color: Define the color of the divider lines.
   • Highlight Color: Choose a highlight color for focused form elements.
   • Success Background Color: Set the background color for success messages.
   • Error Background Color: Set the background color for error messages.

4. Dimensions:

   • Max Width of Section: Set the maximum width of the section.
   • Padding: Define padding for the top, bottom, left, and right of the section.
   • Element Spacing: Set the spacing between elements within the section.

5. Content Settings:

   • Headline Location: Choose the position of the headline (left, right, or top).
   • Alignment: Set the text alignment.
   • Headline: Provide a headline for the section.
   • Content: Add additional content under the headline.
   • Subject: Define a subject for the contact email.
   • Success Message: Set a message to display when the form is successfully submitted.
   • Error Message: Set a message to display when there is an error in form submission.
   • Button Text: Customize the text shown on the submit button.

6. Button Style:

   • Button Background Color: Define the background color or gradient of the button.
   • Button Text Color: Set the color of the button text.
   • Button Text Size: Choose the size of the button text in pixels.
   • Button Padding Top/Bottom: Set the padding for the top and bottom of the button.
   • Button Padding Left/Right: Set the padding for the left and right of the button.
   • Button Border Radius: Define the border radius of the button for rounded corners.

These settings provide you with comprehensive control over the appearance and functionality of your Contact Form section, ensuring it fits perfectly with your store's needs and aesthetic.