Shopify Image Contact Form Section

Description of the Section

The Image Contact Form section is a versatile and visually appealing way for your customers to get in touch with you. Featuring a customizable form alongside a prominent image, this section makes it easy for your visitors to reach out and ensures their messages are styled and retained within a consistent theme. Whether you want the image on the left or right, this section's flexibility allows it to adapt to your site's design needs effortlessly.

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 "Image Contact Form"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-Commerce Store

1. Customer Support: Allow customers to quickly reach out with questions, returns, or issues by embedding this form on your support page.
2. Product Inquiries: Place this form on product pages to enable customers to ask questions about your products directly.
3. Event Sign-Up: Use this form to collect RSVPs or registrations for events.
4. Feedback Collection: Add the form to your feedback page to easily gather customer opinions and suggestions.
5. Wholesale Inquiries: Use the form to provide an easy way for potential wholesale buyers to get in touch with you.

Overview of the Configuration Settings

Font Settings

• Override Theme Fonts: Checkbox to use custom fonts instead of theme fonts.
• Text Font: Select the font for the text.
• Headline Font: Select the font for the headline.

Text Settings

• Text Size: Adjust the size of the text (10px to 50px).
• Text Line Height: Select the line height of the text (0.75 to 2.0 or inherit).
• Text Color: Choose the color of the text.
• Label Color: Color for the form labels.
• Headline Size: Adjust the size of the headline (10px to 50px).
• Headline Line Height: Set the line height for the headline (0.75 to 2.0 or inherit).
• Headline Color: Choose the color of the headline.

Colors Settings

• Background Color: Set the background color of the section.
• Highlight Color: Select the color for form element highlights.
• Success Background Color: Color of the background for the success message.
• Error Background Color: Color for the background of the error message.

Dimensions Settings

• Max Width of Section: Set the maximum width of the section (in pixels).
• Padding Top: Padding at the top of the section (in pixels).
• Padding Bottom: Padding at the bottom of the section (in pixels).
• Padding Left: Padding on the left side (in pixels).
• Padding Right: Padding on the right side (in pixels).

Content Settings

• Image Location: Select if the image is positioned on the left or right.
• Image Aspect Ratio: Select the aspect ratio for the image (choices include 21:9, 16:9, 4:3).
• Image: Upload an image to be displayed.
• Round Borders on Image: Adjust the border radius of the image (0px to 50px).
• Subtle Shadow on Image: Optional subtle shadow effect on the image.
• Headline: Rich text field for entering the headline.
• Content: Rich text field for entering the content.
• Subject: Text field to set the subject which will be shown only in email.
• Success Message: Rich text field for the message shown on successful submission.
• Error Message: Rich text field for the message displayed on form errors.
• Button Text: Text for the submit button.

Button Style Settings

• Button Background Color: Set the background color for the button.
• Button Text Color: Choose the color for the button text.
• Button Text Size: Adjust the size of the text on the button (10px to 50px).
• Button Padding Top/Bottom: Padding for the top and bottom of the button (in pixels).
• Button Padding Left/Right: Padding for the left and right sides of the button (in pixels).
• Button Border Radius: Set the border radius of the button (in pixels).

Form Fields

• Email: Configure the email field label, required status, visibility, placeholder text, and column span.
• Name: Configure the name field label, required status, visibility, placeholder text, and column span.
• Text: Add custom text fields with configurable labels, required status, visibility, placeholder text, and column span.
• Single Select: Configure single-select dropdown options with custom labels and column span.
• Multiple Select: Configure multiple-select option checkboxes with custom labels and column span.