--- title: "Newsletter signup design: variants and examples | Kombai" description: "A newsletter signup asks for one email address, says what people will get and how often, and confirms the subscription on the spot." canonical_url: https://kombai.com/glossary/newsletter-signup/ author: "The Kombai Team" --- # Newsletter signup A newsletter signup asks for one email address, says what people will get and how often, and confirms the subscription on the spot. - Also called: email capture, subscribe form - Platforms: Web, Mobile - In the Kombai gallery: [60 web designs](https://kombai.com/gallery/web/newsletter/), [38 mobile designs](https://kombai.com/gallery/mobile/newsletter/) - [Inkwell](https://kombai.com/gallery/inspirations/newsletter-web-4/) (Web) - [Novella](https://kombai.com/gallery/inspirations/newsletter-ios-5/) (Mobile) - [Cipherleaf](https://kombai.com/gallery/inspirations/newsletter-web-54/) (Web) ## What is a newsletter signup? A newsletter signup is a small form, usually one email field and one button, set inside a band, a footer or a page of its own. A line above it sells the letter: what is in it and how often it arrives. After submit, the form gives way to a confirmation, so people never leave the page. - One labeled email field and one button, often side by side. - A short promise above the field, and a privacy line below it. ## When to use newsletter signup - **Regular updates.** A letter that goes out on a schedule, like weekly or monthly. - **The end of a read.** Below an article or a guide, when people want more of the same. - **A store mailing list.** Drops, restocks and offers, often with a first-order discount. ## When not to use one - **No letter to send.** Don't collect emails before you have something to send on a schedule. - **Before people read.** A popup over the first screen asks for trust the page has not earned. - **Account signup.** Creating an account needs a sign-up form, not a mailing list field. ## Anatomy 1. **Pitch**: What people get, how often 2. **Email field**: Labeled, type="email" 3. **Button**: Says what happens 4. **Privacy line**: How to unsubscribe 5. **Message**: Error or success, announced 6. **States**: Empty, error, sending, done ## Variants We sorted every newsletter design in the Kombai gallery and found six patterns. ### 1. Inline band The default. A short line on one side, the email field and button on the other, in a single row. - [Terravolt](https://kombai.com/gallery/inspirations/newsletter-web-7/) (Web) - [Weirbend](https://kombai.com/gallery/inspirations/newsletter-web-29/) (Web) - [Keel Newsletter](https://kombai.com/gallery/inspirations/newsletter-ios-2/) (Mobile) ### 2. Over an image The pitch and form sit on a full-bleed photo, so the letter gets a mood before anyone reads a word. - [Halewell Newsletter](https://kombai.com/gallery/inspirations/newsletter-web-5/) (Web) - [Kochab](https://kombai.com/gallery/inspirations/newsletter-web-18/) (Web) - [Vale](https://kombai.com/gallery/inspirations/newsletter-ios-3/) (Mobile) ### 3. In the footer A subscribe block in a column of the site footer, next to the links. - [Alderway](https://kombai.com/gallery/inspirations/newsletter-web-1/) (Web) - [Coquina](https://kombai.com/gallery/inspirations/newsletter-web-9/) (Web) - [Aplite](https://kombai.com/gallery/inspirations/newsletter-web-8/) (Web) ### 4. With an issue preview A recent issue, past covers or a reader count next to the form, to show what people are signing up for. - [Foldcraft](https://kombai.com/gallery/inspirations/newsletter-ios-7/) (Mobile) - [Draftwell](https://kombai.com/gallery/inspirations/newsletter-web-53/) (Web) - [Quillbank](https://kombai.com/gallery/inspirations/newsletter-web-39/) (Web) ### 5. Pick your letters Publishers with several newsletters list them as cards or checkboxes, and one email subscribes to all the picks. - [Northmere](https://kombai.com/gallery/inspirations/newsletter-web-42/) (Web) - [Fieldnote Journal](https://kombai.com/gallery/inspirations/newsletter-ios-10/) (Mobile) - [Tickerpine](https://kombai.com/gallery/inspirations/newsletter-web-57/) (Web) ### 6. Topics and frequency Chips for topics and a choice of rhythm, like weekly or twice a month, before the subscribe button. - [Cedar Post](https://kombai.com/gallery/inspirations/newsletter-ios-16/) (Mobile) - [Dispatchly](https://kombai.com/gallery/inspirations/newsletter-ios-12/) (Mobile) - [Quiet Hours](https://kombai.com/gallery/inspirations/newsletter-ios-28/) (Mobile) ## Where newsletter signups show up ### Online stores A signup strip or page that trades a first-order discount for an email address. - [Orvella](https://kombai.com/gallery/inspirations/newsletter-web-44/) (Web) - [Vale Athletics](https://kombai.com/gallery/inspirations/newsletter-web-55/) (Web) - [Zostera](https://kombai.com/gallery/inspirations/newsletter-web-31/) (Web) ### Publishers A landing page for one letter, with the writers, the schedule and often a sample issue. - [Wrenlow](https://kombai.com/gallery/inspirations/newsletter-web-46/) (Web) - [Havenbrook](https://kombai.com/gallery/inspirations/newsletter-web-43/) (Web) - [Foldpost](https://kombai.com/gallery/inspirations/newsletter-web-38/) (Web) ### Blogs and journals A signup card or docked bar inside the article feed, so readers subscribe while they browse. - [Letterwell](https://kombai.com/gallery/inspirations/newsletter-web-58/) (Web) - [Tempo Grid](https://kombai.com/gallery/inspirations/newsletter-ios-29/) (Mobile) - [Hearthwise](https://kombai.com/gallery/inspirations/newsletter-ios-30/) (Mobile) ## Newsletter signup vs similar components | | [Newsletter signup](https://kombai.com/glossary/newsletter-signup/) | [CTA band](https://kombai.com/glossary/cta-band/) | [Form](https://kombai.com/glossary/form/) | [Dialog](https://kombai.com/glossary/dialog/) | |---|---|---|---|---| | Asks for | One email address | One click | Several fields | A choice or a few fields | | Afterwards | People stay on the page | People go to a new page | A next step or a confirmation | People return to the page | | Best for | Growing a mailing list | Sending people to sign up | Collecting details | Asking something in place | ## Build notes - Use with autocomplete="email" and spellcheck="false", so phones show the right keyboard. - Give the field a real label. A placeholder alone disappears as soon as people type. - Check the format on submit and say how to fix it: "Enter an email address in the correct format, like name@example.com". - Link the error to the field with aria-describedby, and set aria-invalid="true" while it is wrong. - Show the result in a role="status" region, so screen readers announce it without moving focus. - Say how often the letter arrives and how to unsubscribe, right by the button. ## FAQ ### Should a newsletter signup ask for a name? Only if you use it. One email field is the shortest path to subscribed. Ask for a name later, in the welcome email, if you want to personalize the letter. ### Where should a newsletter signup go? Where readers finish something: the end of an article, the footer, or a band between sections of a landing page. A popup that opens before anyone has read the page asks for trust it has not earned yet. ### Should the form check the email address? Check the format when people submit, and allow pasting. A format check cannot tell whether an inbox exists, so you may also need to confirm people can open it, for example with a confirmation email. ### What should happen after someone subscribes? Keep them on the page. Replace the form with a short confirmation that repeats the address, so they can spot a typo, and says what comes next. ## Related terms - [Form](https://kombai.com/glossary/form/) - [Text field](https://kombai.com/glossary/text-field/) - [CTA band](https://kombai.com/glossary/cta-band/) - [Footer](https://kombai.com/glossary/footer/) ## References - [GOV.UK Design System: Email addresses pattern](https://design-system.service.gov.uk/patterns/email-addresses/) - [W3C WAI forms tutorial: User notifications](https://www.w3.org/WAI/tutorials/forms/notifications/) - [MDN: ARIA status role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role)