Figma marketing website newsletter CTA sections

A newsletter CTA section is a small block with an input and a button, usually parked at the end of a blog post, above the footer, or between content sections. It costs almost nothing to add, which is exactly why sites end up with three of them.

Each one spends attention that a different ask could have used, so before placing one, work out what this page is offering in return.

What you are actually asking for

An email address is a standing permission to turn up in somebody's inbox, and people price it accordingly. "Subscribe to our newsletter" describes the form, not the offer.

Say what arrives and how often: a monthly note on design systems, weekly product changes, one email when the beta opens.

The single-field layouts here work precisely because they are single-field. A first name field costs you signups in exchange for a personalisation nobody notices, and a company field quietly turns a newsletter into a lead capture form, which is a different promise and should look like one.

The field, the button, and the small print

On desktop the simple layouts run the input and button as a single row: simple left is 286px tall, simple centered 392px, the horizontal card 414px, and the vertical card 520px. On mobile the simple versions stack and settle at 446px.

Two details decide whether the form is usable. Do not let the placeholder do the work of the label, because NN/g's case against placeholder text lays out how a disappearing label breaks error recovery, and the W3C's guidance on labelling controls covers the markup that makes the association real.

Then put the privacy line under the field rather than behind a link. "No spam. Unsubscribe any time." is one short line and it answers the objection at the exact moment it forms.

Design the state after the click

The component hands you the ask. The confirmation is yours to design, and it is where most newsletter forms fall apart in production. Decide what the block becomes on a successful submit, what an already-subscribed address sees, and what a malformed address gets told.

If you use double opt-in, say so in the success message, because a subscriber who never opens the confirmation email is a subscriber you did not get. The kit's email templates include a verification layout for exactly that message.

The validation and success states can be assembled from the kit's input and alert components so the whole exchange matches the rest of your product rather than looking bolted on.

Sections compose into pages

These share their layout vocabulary with the general CTA sections, and the two should not appear in the same viewport, since whichever comes second usually loses.

The pattern turns up in the landing page examples, at the foot of blog post layouts, and inside footers, where a compact email capture is often all a site needs. For a narrower prompt in the middle of an article, the inline CTA components are the smaller sibling. Everything here is drawn at 1,440px and 375px, in light and dark, with a brand theme on the four simplest layouts for when the block should sit in your primary color.

Handing this to a developer does not mean rebuilding the form. Untitled UI React newsletter CTA sections are open source, built with Tailwind CSS and React Aria, with the form field, labelling, and validation states already wired.