# Contact Modal

> Display a custom contact form on demand using our powerful modal.

URL: https://sectionstar.app/sections/contact-form-modal/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**Contact Modal** is a Shopify theme section in the Section Star library. Display a custom contact form on demand using our powerful modal.

## About the Contact Modal section

The Contact Modal section is designed to provide an interactive pop-up form for customers to get in touch with your store. When triggered, the modal displays a customizable form where visitors can enter their contact details and messages. The modal can be styled to match your store’s design, ensuring a seamless user experience. This section includes options to override store fonts, customize text sizes, select colors, and set various form elements.

## Live demo

## Use cases

1. **Customer Support**: Allow customers to easily reach out for support or inquiries by adding a contact modal link to your FAQ or Help pages.
2. **Sales Inquiries**: Embed the contact modal link on product pages to handle sales inquiries. Customers can quickly ask questions about products and receive personalized responses.
3. **Feedback Collection**: Use the contact modal to gather customer feedback about their shopping experience. Place the link on the order confirmation page to capture post-purchase feedback.
4. **Newsletter Sign-Up**: Customize the modal to serve as a newsletter sign-up form. Promote special offers and updates by encouraging visitors to subscribe.

## 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 | #contact-modal |
| Change browser url on launch | Checkbox | Off |

### Font
Set the fonts for your section

| Setting | Type | Default |
| --- | --- | --- |
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
| Headline Font | Font | sans-serif |

### Text
Set the text for your section

| Setting | Type | Default |
| --- | --- | --- |
| Text Size | Range | 15 |
| Text Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |
| Headline Size | Range | 25 |
| Headline Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |

### Colors
Set colors for the section.

| Setting | Type | Default |
| --- | --- | --- |
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Headline Color | Color | #111111 |
| Text Color | Color | #111111 |
| Form Label Color | Color | #111111 |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Divider Color | Color | #888 |
| Highlight Color | Color | #0D8BF4 |
| Success Background Color | Color | #00D815 |
| Error Background Color | Color | #D53005 |

### Dimensions
Set the section dimensions in pixels.

| Setting | Type | Default |
| --- | --- | --- |
| Padding Top | Number | 25 |
| Padding Bottom | Number | 25 |
| Padding Left | Number | 10 |
| Padding Right | Number | 10 |

### Content
Set image and text for section

| Setting | Type | Default |
| --- | --- | --- |
| Subject (shown only in email) | Inline rich text | — |
| Headline Location | Select (Left, Right) | left |
| Headline | Inline rich text | <b>Get in touch</b> |
| Content | Inline rich text | Use this form to get in touch. We usu… |
| Success Message | Inline rich text | Thank you for submitting the form! |
| Error Message | Inline rich text | There was an error submitting the form. |
| Button Text | Text | Submit |

### Email block settings

| Setting | Type | Default |
| --- | --- | --- |
| Label (required) | Text | Email |
| Required? | Checkbox | On |
| Hide Label? | Checkbox | Off |
| Placeholder | Text | — |
| Span Columns | Checkbox | Off |

### Name block settings

| Setting | Type | Default |
| --- | --- | --- |
| Label (required) | Text | Name |
| Required? | Checkbox | On |
| Hide Label? | Checkbox | Off |
| Placeholder | Text | — |
| Span Columns | Checkbox | Off |

### Text block settings

| Setting | Type | Default |
| --- | --- | --- |
| ID | Text | new-field |
| Label (required) | Text | Label |
| Required? | Checkbox | On |
| Hide Label? | Checkbox | Off |
| Placeholder | Text | — |
| Span Columns | Checkbox | Off |

### Single Select block settings

| Setting | Type | Default |
| --- | --- | --- |
| ID | Text | new-field |
| Label (required) | Text | Label |
| Hide Label? | Checkbox | Off |
| Options (separate by comma) | Text | — |
| Span Columns | Checkbox | Off |

### Multiple Select block settings

| Setting | Type | Default |
| --- | --- | --- |
| ID | Text | new-field |
| Label (required) | Text | Email |
| Hide Label? | Checkbox | Off |
| Options (separate by comma) | Text | — |
| Span Columns | Checkbox | Off |