Form Builder is a Shopify theme section in the Section Star library. Build amazing multi-step forms.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set settings for the grid
| Setting |
Type |
Default |
| Gap |
Number |
15 |
| Headline Alignment |
Select (Top, Center) |
center |
| Headline Position |
Select (Top, Left) |
left |
Form Design
Set settings for the form
| Setting |
Type |
Default |
| Background Color |
Color or gradient |
linear-gradient(319deg, rgba(255, 255… |
| Max Width |
Number |
1000 |
| Padding Top/Bottom |
Number |
20 |
| Mobile Padding Top/Bottom |
Number |
15 |
| Padding Left/Right |
Number |
20 |
| Mobile Padding Left/Right |
Number |
15 |
| Round Borders on Form |
Range |
5 |
| Subtle Shadow on Form |
Checkbox |
On |
| Border Size on Form |
Range |
0 |
| Border Color on Form |
Color |
#888 |
| Textbox Border Color |
Color |
#cccccc |
| Textbox Highlight Color |
Color |
#0F8BF4 |
| Error Color |
Color |
#991B1B |
| Error Background Color |
Color |
#FEE2E1 |
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 |
| Padding |
Number |
15 |
| Border Radius |
Number |
5 |
| Spacing Between Elements |
Number |
10 |
Primary Button Style
Set the look and feel of the primary button
| Setting |
Type |
Default |
| Button Border Color |
Color or gradient |
#ddd |
| Button Background Color |
Color or gradient |
linear-gradient(164deg, #FFF 0%, #FFF… |
| Button Text Color |
Color |
#111 |
| Text Size |
Range |
15 |
| Padding |
Number |
15 |
| 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 |
Headline
Set text for the headline
| Setting |
Type |
Default |
| Text Alignment |
Text alignment |
center |
| Mobile Text Alignment |
Text alignment |
center |
| Headline |
Inline rich text |
<b>Sample Headline</b> |
| Text |
Inline rich text |
Use this block to add a description. … |
| Spacing between Headline and Features |
Number |
15 |
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 “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.
