Shopify Multi-Step Form Section

Description of the Section

The Multi-Step Form section allows you to create a responsive, user-friendly multi-step form for your Shopify store. This section is perfect for collecting detailed customer information or feedback through a series of customizable steps. Users can easily navigate through each step, and you can design each step with various fields, text, images, and buttons. The form is highly customizable, allowing you to adjust fonts, colors, sizes, and more to match your store's brand.

Demo of the Section

Installation Instructions

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

Sample Use Cases for a Shopify E-commerce Store

1. Customer Feedback Form: Collect detailed feedback from your customers regarding their shopping experience, product satisfaction, and suggestions.
2. Product Customization Form: Allow customers to input specific details about custom products they want to purchase.
3. Newsletter Subscription: Engage customers by having them sign up for newsletters in a multi-step process that can include demographics to personalize content.
4. Event Registration: Use the form for registering customers for events, collecting detailed information over several steps.
5. Multi-part Surveys: Conduct surveys across multiple steps to understand customer preferences, habits, or opinions about your store and its offerings.

Overview of the Configuration Settings

Target

• Target: Add a string (with #) to trigger the modal.

Font

• Override theme fonts: Option to override the default theme fonts.
• Headline Font: Choose the font for headlines.
• Text Font: Choose the font for regular text.

Text

• Text Size: Adjust the size of the text.
• Text Line Height: Set the line height for text.
• Text Color: Choose the color for text.

Headline

• Headline Size: Adjust the size of the headline.
• Headline Line Height: Set the line height for headlines.
• Headline Color: Choose the color for headlines.

Colors

• Background Color: Set the background color of the form.
• Textbox Border Color: Set the border color of text boxes.
• Textbox Highlight Color: Set the highlight color of text boxes during focus.
• Error Color: Choose the color for error messages.
• Error Background Color: Set the background color for error messages.

Dimensions

• Max Width of Section: Define the maximum width.
• Padding Top: Set the padding at the top.
• Padding Bottom: Set the padding at the bottom.
• Padding Left: Set the padding on the left side.
• Padding Right: Set the padding on the right side.
• Gap Between Content Elements: Define the space between content elements.

Button Style

• Button Border Color: Set the border color for buttons.
• Button Background Color: Set the background color for buttons.
• Button Selected Background Color: Set the background color when a button is selected.
• Button Text Color: Set the text color for buttons.
• Button Selected Text Color: Set the text color for selected buttons.
• Text Size: Adjust the size of the button text.
• Spacing Between Elements: Define the spacing between elements within the button.
• Border Radius: Set the border radius for buttons.

Content

• Next Text: Customize the "Next" button text.
• Submit Text: Customize the "Submit" button text.
• Done Text: Customize the "Done" button text.

Blocks

• Step: Add steps to the form workflow.
• Success: Customize the message shown on successful submission.
• Error: Customize the message shown in case of errors.
• Content: Add text or titles using <p>, <h1>, <h2>, etc.
• Rich Text: Insert rich text with HTML elements.
• Image: Include images with optional links, shadow, rounding, and aspect ratios.
• Email: Add an email input field.
• Name: Add a text input for the user's name.
• Text: Create custom text input fields.
• Single Select: Provide single-select button options.
• Multiple Select: Provide multiple-select button options.