Section reference › Forms & contact

Newsletter signup `"type": "newsletter"`

A boxed email signup with a heading on the left and an email field plus button on the right. Use it near the bottom of a page to grow your mailing list.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "newsletter",
  "eyebrow": "Newsletter",
  "title": "Get one useful email a month",
  "text": "Practical tips on design, marketing and growing a small business. No spam, ever.",
  "placeholder": "Your email address",
  "button": "Sign me up",
  "note": "Unsubscribe with one click. We never share your address."
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label above the title.
`title`	string	`Stay in the loop`	Heading on the left.
`text`	string	—	Short line under the title.
`placeholder`	string	`Enter your email`	Grey hint text inside the email field.
`button`	string	`Subscribe`	Text on the submit button (an arrow is added after it).
`note`	string	—	Small print under the field, e.g. a privacy line.
`tone`	string	`alt`	Common option; this section defaults it to "alt" instead of "light". Values: `light \| alt \| dark \| primary`
`action`	string	`site.json newsletterAction, then formAction`	Address the email is sent to, e.g. your mailing-list provider's form address.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Tips#

The form sends a single "email" field to "action" if set on this section, otherwise to newsletterAction (or formAction) in site.json. Until one is set it shows a thank-you message.
Keep the title short (under about 40 characters) so it stays on one or two lines next to the field.

Editing it in the HTML files#

The form is form.newsletter-form. Change its action attribute to your mailing-list provider's form address; the email field is already named email.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/journal.html (source src/demos/creative-agency/pages/journal.json)
Real Estate: template/real-estate/blog.html (source src/demos/real-estate/pages/blog.json)
Corporate: template/corporate/insights.html (source src/demos/corporate/pages/insights.json)
Finance: template/finance/home-2.html (source src/demos/finance/pages/home-2.json)
Law Firm: template/law-firm/insights.html (source src/demos/law-firm/pages/insights.json)
SaaS Product: template/saas/blog.html (source src/demos/saas/pages/blog.json)
Mobile App: template/mobile-app/blog.html (source src/demos/mobile-app/pages/blog.json)
Tech Conference: template/conference/news.html (source src/demos/conference/pages/news.json)
Online Academy: template/education/blog.html (source src/demos/education/pages/blog.json)
Restaurant: template/restaurant/journal.html (source src/demos/restaurant/pages/journal.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/journal.html (source src/demos/hotel/pages/journal.json)
Wedding: template/wedding/home-2.html (source src/demos/wedding/pages/home-2.json)
Gym & Fitness: template/gym/blog.html (source src/demos/gym/pages/blog.json)
Yoga Studio: template/yoga/blog.html (source src/demos/yoga/pages/blog.json)
Day Spa & Salon: template/spa/blog.html (source src/demos/spa/pages/blog.json)
Medical Clinic: template/medical/blog.html (source src/demos/medical/pages/blog.json)
Dental Clinic: template/dental/blog.html (source src/demos/dental/pages/blog.json)
Pet Care: template/pet-care/blog.html (source src/demos/pet-care/pages/blog.json)
Construction: template/construction/blog.html (source src/demos/construction/pages/blog.json)
Car Dealer: template/car-dealer/blog.html (source src/demos/car-dealer/pages/blog.json)
Travel Agency: template/travel/blog.html (source src/demos/travel/pages/blog.json)
Photographer: template/photography/journal.html (source src/demos/photography/pages/journal.json)
Interior Design: template/interior-design/style-guides.html (source src/demos/interior-design/pages/style-guides.json)
Portfolio: template/portfolio/blog.html (source src/demos/portfolio/pages/blog.json)
Music Festival: template/music-festival/news.html (source src/demos/music-festival/pages/news.json)
Fashion Store: template/fashion-store/index.html (source src/demos/fashion-store/pages/index.json)
Charity: template/charity/stories.html (source src/demos/charity/pages/stories.json)
Logistics: template/logistics/news.html (source src/demos/logistics/pages/news.json)