> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/call-to-action/contact-form-and-newsletter.md). # Contact Form & Newsletter Add a contact page with a two-column contact form, and grow your mailing list with a full-width newsletter signup banner in the Avante Shopify theme. Both of these sections exist to get something back from a visitor — a question, or an email address. **Contact Form** is where you send people who need help, and it doubles as the page that proves there are humans behind the store. **Newsletter** is the quieter one: a single field over an editorial image that builds the list you'll sell to next season. Pick the one that fits your goal: * **Contact Form** — a two-column contact page: the form on one side, your address, opening hours, and social profiles on the other. * **Newsletter** — a full-width image banner with an email signup on top of it. Both are template sections, so they're added to a page, not to the header or footer areas. For settings shared across most sections (width, color scheme, content position, paddings), see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). For image dimensions, see [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md). *** ## Contact Form The contact page is where hesitant shoppers go before they buy and where unhappy ones go after — so it's worth more than a bare input field. This section splits the page in two: Shopify's contact form on one side, and on the other, whatever reassures people that a message won't disappear — your address, hours, a phone number, social profiles, a line about how fast you reply.
In the Theme Editor this section is listed as **Contact form**, and everything in the left-hand column is a block — adding the section preloads **Subheading**, **Heading**, **Text**, and **Contact info**. See [Overview](/docs/avante-themes/sections/overview.md) for how sections and blocks work in general.
{% hint style="success" icon="sparkles" %} ### Good to know * **The blocks are the second column.** The form always takes one half of the section; the blocks build the other half. **Swap form position** flips which side the form sits on. Add no blocks at all and the text column disappears entirely — the form is centered and capped to a narrow measure, which is the layout the editor hint means by *"Centered if no blocks are added."* So an empty block list is a deliberate design, not a broken one. * **There is no recipient field — Shopify decides where messages land.** This is Shopify's standard contact form, so submissions go to the store contact email configured in your Shopify admin settings, not to anything typed in the Theme Editor. If messages aren't arriving, that setting is the first thing to check. * **Only Email is compulsory.** **Show phone number** and **Show message** remove those two fields altogether if you don't want them, and name and email stay. Fewer fields, more replies — but strip the message box only if you genuinely don't need context. * **The checkbox needs text to appear.** **Enable checkbox** on its own isn't enough: the **Text** field has to be filled too. **Make it required** then blocks the form until it's ticked, and the ticked value arrives in your notification email as its own line. As Shopify notes in the editor itself, adding a checkbox does not by itself make a store GDPR compliant. * **Placeholders are empty out of the box.** Each field shows only its label until you fill in **Name**, **Email**, **Phone number**, or **Message placeholder**. Use them for format hints — a phone number pattern, or *"Order number, if you have one"* — and you'll cut a round of follow-up emails. * **Two separate width controls.** **Show content container** draws the card behind the form; **Narrow content width** pulls the whole section into a tighter measure, which suits a dedicated contact page where a full-bleed layout just looks empty. * **Curly brackets switch the font.** Wrap a word of the **Heading** in `{curly brackets}` to render it in the Secondary heading font — `Get {in touch}`. See [Typography](/docs/avante-themes/theme-settings/typography.md). {% endhint %}
### Best practices * Ask for as little as you can live with. Every extra field costs you messages — turn **Show phone number** off unless someone will actually call back. * Fill the second column with real contact details. The **Contact info** block holds two items (email, phone, or address) plus a line of text, and the **Social media** block pulls your profiles straight from Theme settings. People who won't fill in a form still need a way to reach you. * Send yourself a test submission after launch, and again any time the store's contact email changes. A silently misrouted contact form is the most expensive thing on the page. * Set expectations in a **Text** block — response time, working hours, what to include. It turns "did you get my message?" follow-ups into patience. * Keep **Heading tag** at **H2**. The page title is already the H1, and a second one muddies the outline. * Don't put a Newsletter section directly under the contact form. Two forms in one screen and people fill in neither. *** ## Newsletter One field, one image, one promise. This section is the list-building workhorse: a full-width photo with an email input over it, sized anywhere from a modest strip to a full-screen moment. It converts because it asks for the smallest possible thing at a point where someone already likes what they're looking at.
In the Theme Editor this section is listed as **Newsletter**, and the input itself is a block: **Newsletter form**, one per section. Adding the section preloads **Heading**, **Text**, and **Newsletter form**.
{% hint style="success" icon="sparkles" %} ### Good to know * **A signup creates a customer, tagged `newsletter`.** The section posts to Shopify's customer form and attaches the `newsletter` tag automatically, so subscribers appear under **Customers** in your admin and can be segmented — or synced to Klaviyo, Mailchimp, or Shopify Email — by that tag. * **The button label and the success message aren't section settings.** The **Newsletter form** block has no field for either: **Subscribe** and **Thanks for subscribing** come from the theme's language file. Change them in **Edit default theme content**, not in the section. * **Height mode decides what drives the banner's height.** **Percents** ties it to the viewport — a 70% banner fills 70% of the screen. **Pixels** fixes it regardless of screen size. **Adapt to image** lets the uploaded image's own proportions set the height. Desktop and mobile keep their own value in every mode. * **Two images, two shapes.** The desktop **Image** wants landscape (3:2) or wide (16:9); the **Mobile → Image** wants portrait (4:5) or square (1:1). Leave mobile empty and the desktop file is reused — and a wide crop rarely survives a phone screen with its subject intact. * **Fill content container off means no card.** With it on, the text and form sit on a padded, colored card; with it off, they sit straight on the photo. Cleaner — but only if **Image overlay opacity** is giving you enough contrast to read the label. Separately, **Fill the entire section** paints the chosen color across the whole section strip, paddings included, instead of just behind the content. * **On mobile you can stop overlaying altogether.** **Show content under image** turns the photo into a block of its own height and stacks the heading, text, and form beneath it. It's the right call whenever the mobile photo is busy enough that the overlay is eating it. * **This section also carries Promo code and Countdown timer blocks.** Handy for a timed incentive next to the input — "10% off your first order, ends Sunday." The **Countdown timer** runs on your store's primary timezone and is capped at a 99-day range. * **Curly brackets switch the font.** Wrap a word of a **Heading** block in `{curly brackets}` to render it in the Secondary heading font — `Join the {list}`. See [Typography](/docs/avante-themes/theme-settings/typography.md). {% endhint %}
### Best practices * Make a promise, not a request. Use the **Caption** in the **Newsletter form** block, or a **Text** block, to say what subscribers get and how often — "first look at new drops, twice a month" beats "sign up for our newsletter" every time. * Judge contrast on the real photo at full size, not on the editor thumbnail. If the label is hard to read, raise **Image overlay opacity** before you start recoloring text. * Compress the image before uploading. This is usually the heaviest file on the page, and it sits between the shopper and everything below it. * Position the content against the photo, not by taste. **Vertical** and **Horizontal content position** exist so the form lands on empty space rather than across someone's face. * Keep **Center text** and **Horizontal content position** in agreement — centered text pushed to the left edge reads as a mistake. * Give it room. **Percents** at 60–70% is a banner; at 100% it's a full-screen interruption, and that's a decision, not a default. *** ### Related * [Call to Action overview](/docs/avante-themes/sections/call-to-action.md) * [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings) * [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md) * [Typography](/docs/avante-themes/theme-settings/typography.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/sections/call-to-action/contact-form-and-newsletter.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.