CTA with email signup

Two-column CTA with headline and body on the left, email signup form on the right.

ctasplitsignupemailconversion

About this block

A newsletter signup set in a two-column card: your pitch on the left, an email field and Subscribe button on the right. Putting the reason to sign up right next to the form tends to work better than a lone input box. It's a contained card, so it fits mid-page between sections as well as at the end.

When to use it

  • At the end of a blog post or article, when readers are most likely to want more.
  • Between sections on a homepage, to collect emails from people who aren't ready to buy.
  • On a pre-launch or coming-soon page, as a waitlist.

What's inside

  • A rounded card on your theme's light surface colour.
  • Left column: a small accent-coloured eyebrow, an h3 heading, and a short paragraph.
  • Right column: a form with one required email field and a full-width primary Subscribe button.
  • On phones the two columns stack, with the text above the form.

How to customize it

  • Say what people get and how often: "One email a month with new recipes" beats "Stay updated."
  • In the form settings, choose where signups go: save them in PageHub, send them to a webhook, or post them to your email tool's endpoint.
  • Add a thank-you message that replaces the form after someone subscribes, so they know it worked.
  • Add a name field if you personalise your emails. Every extra field lowers signups, so only ask for what you use.

Questions

Can I connect this to Mailchimp or ConvertKit?
Yes. Set the form to post to your email provider's signup endpoint or a webhook, or save submissions in PageHub and export them.
Should the heading be an h3?
It's an h3 so it can sit inside a page without competing with your section headings. Change it to an h2 if the card is its own section.
Does it stop spam signups?
The form has a hidden honeypot field that catches most bots, and the email field only accepts a valid address.

Browse other blocks

Same library cards — preview live and grab structure from any block.

View full library

Simple CTA

Centered call-to-action on an accent background with heading, description, and buttons.

Headline with CTA card

Centered heading and subtext with one large bordered CTA button below that fills with your primary colour on hover.

Announcement banner

Full-width accent strip for announcements, promos, or alerts, with a short message and a link.

Centered headline border-only CTA

Centered heading and subcopy, then a large CTA area that is border-only (no fill): transparent inside, thick dashed outline, accent border and label on hover. Pairs with the filled card block headline-framed-cta.

CTA with image

Enclosed card CTA with an eyebrow, headline, short paragraph and two buttons on the left, and a large photo filling the right half.

Decision CTA (two paths)

Side-by-side cards presenting two choices — different plans, roles, or outcomes.

Next step

cta section from the SEO agency landing template, opens with “Next step”, with a single CTA.

Marketing Moves Fast. Stay Ahead

cta section from the Marketing agency template, opens with “Marketing Moves Fast. Stay Ahead.”, with 2 CTAs.

Proof of Momentum

cta section from the Dark SaaS product page template, opens with “Proof of Momentum”, with 2 CTAs.

First invite when the exchange opens

cta section from the Shareholder vote exchange landing template, opens with “First invite when the exchange opens?”, with a single CTA.

Creative cta

cta section from the Creative studio portfolio template, with a single CTA.

Debrief. Reset. Continue

cta section from the Ground school landing template, opens with “Debrief. Reset. Continue.”, with 4 CTAs.