Modal Form Builder is a Shopify theme section in the Section Star library. Build amazing, multi-step forms modals.
About the Modal Form Builder 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.
Live demo
Use cases
- Customer Feedback Form: Collect detailed feedback from your customers regarding their shopping experience, product satisfaction, and suggestions.
- Product Customization Form: Allow customers to input specific details about custom products they want to purchase.
- Newsletter Subscription: Engage customers by having them sign up for newsletters in a multi-step process that can include demographics to personalize content.
- Event Registration: Use the form for registering customers for events, collecting detailed information over several steps.
- Multi-part Surveys: Conduct surveys across multiple steps to understand customer preferences, habits, or opinions about your store and its offerings.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Target
Add the below string to any URL to launch the modal. Please keep the #.
| Setting |
Type |
Default |
| Target |
Text |
#multi-step-form-modal |
Font
Set the fonts for your section
| Setting |
Type |
Default |
| Override theme fonts |
Checkbox |
Off |
| Headline Font |
Font |
sans-serif |
| Text Font |
Font |
sans-serif |
Text
Set the text for your section
| Setting |
Type |
Default |
| Text Size |
Range |
15 |
| Mobile Text Size |
Range |
15 |
| Text Line Height |
Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) |
inherit |
| Text Color |
Color |
#111 |
| Headline Size |
Range |
25 |
| Mobile Headline Size |
Range |
40 |
| Headline Line Height |
Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) |
inherit |
| Headline Color |
Color |
#111 |
Colors
Set colors for the section.
| Setting |
Type |
Default |
| Background Color |
Color or gradient |
transparent |
| Textbox Border Color |
Color |
#cccccc |
| Textbox Highlight Color |
Color |
#0F8BF4 |
| Error Color |
Color |
#991B1B |
| Error Background Color |
Color |
#FEE2E1 |
Dimensions
Set the section dimensions in pixels.
| Setting |
Type |
Default |
| Max Width of Section |
Number |
1000 |
| Padding Top |
Number |
25 |
| Padding Bottom |
Number |
25 |
| Padding Left |
Number |
25 |
| Padding Right |
Number |
25 |
| Gap Between Content Elements |
Number |
20 |
Button Style
Set the look and feel of the button
| Setting |
Type |
Default |
| Button Border Color |
Color or gradient |
#333 |
| Button Background Color |
Color or gradient |
linear-gradient(164deg, #111 0%, #333… |
| Button Selected Background Color |
Color or gradient |
linear-gradient(164deg, #fff 0%, #fff… |
| Button Text Color |
Color |
#fff |
| Button Selected Text Color |
Color |
#111 |
| Text Size |
Range |
15 |
| Spacing Between Elements |
Number |
10 |
| Border Radius |
Number |
5 |
Content
Set image and text for section
| Setting |
Type |
Default |
| Next Text |
Inline rich text |
Next |
| Submit Text |
Inline rich text |
Submit |
| Done Text |
Inline rich text |
Done |
Content block settings
| Setting |
Type |
Default |
| Content Tag |
Select (Paragraph, Headline 1, Headline 2, Headline 3, Headline 4, Headline 5) |
p |
| Alignment |
Text alignment |
left |
| Content |
Inline rich text |
Add headlines, text, and more with th… |
Rich Text block settings
| Setting |
Type |
Default |
| Alignment |
Text alignment |
left |
| Content |
Rich text |
<h4><b>Create Amazing Content</b></h4… |
Image block settings
| Setting |
Type |
Default |
| Image |
Image |
— |
| Call to Action Link |
URL |
— |
| Max Width of Image |
Number |
200 |
| Round Borders on Media |
Range |
5 |
| Subtle Shadow on Media |
Checkbox |
On |
| Aspect Ratio |
Select (Auto, 4:1, 21:9, 16:9, 4:3, 1:1) |
auto |
Email block settings
| Setting |
Type |
Default |
| Label |
Text |
Email |
| Placeholder |
Text |
— |
| Error Text |
Inline rich text |
This field is required. |
| Required |
Checkbox |
On |
| Show Label |
Checkbox |
Off |
Name block settings
| Setting |
Type |
Default |
| Label |
Text |
Name |
| Placeholder |
Text |
— |
| Error Text |
Inline rich text |
This field is required. |
| Required |
Checkbox |
On |
| Show Label |
Checkbox |
Off |
Text block settings
| Setting |
Type |
Default |
| ID |
Text |
new-field |
| Label |
Text |
Label |
| Placeholder |
Text |
— |
| Error Text |
Inline rich text |
This field is required. |
| Required |
Checkbox |
On |
| Show Label |
Checkbox |
Off |
Single Select block settings
| Setting |
Type |
Default |
| ID |
Text |
new-field |
| Label |
Text |
Label |
| Options (separate by comma) |
Text |
— |
| Error Text |
Inline rich text |
This field is required. |
| Required |
Checkbox |
On |
| Show Label |
Checkbox |
Off |
Multiple Select block settings
| Setting |
Type |
Default |
| ID |
Text |
new-field |
| Label |
Text |
Label |
| Options (separate by comma) |
Text |
— |
| Error Text |
Inline rich text |
This field is required. |
| Required |
Checkbox |
On |
| Show Label |
Checkbox |
Off |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Modal Form Builder”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.
