Newsletter Signup

Newsletter signup form component

A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.

<fontdue-newsletter-signup

  opt-in-label="I agree to receive direct email marketing"

  opt-in-checkbox-checked

  button-label="Subscribe"

></fontdue-newsletter-signup>

import NewsletterSignup from "fontdue-js/NewsletterSignup";



<NewsletterSignup

  optInLabel="I agree to receive direct email marketing"

  optInCheckboxChecked

  buttonLabel="Subscribe"

/>

This form needs no collection identifier, so it renders lazily as shown. On a server-rendered framework you can optionally preload it with loadNewsletterSignupQuery to skip the client fetch, passing the result as preloadedQuery – see lazy versus preloaded:

import NewsletterSignup, { loadNewsletterSignupQuery } from "fontdue-js/NewsletterSignup";



const newsletter = await loadNewsletterSignupQuery();



<NewsletterSignup preloadedQuery={newsletter} />
Property Description Type
opt-in-checkbox-checked Include this attribute to set the checkbox checked by default. string
opt-in-label Label that appears with the checkbox required to be checked. string
button-label Text for the button. Defaults to “Subscribe” string
Prop Description Type
optInCheckboxChecked Set the checkbox checked by default. boolean
optInLabel Label that appears with the checkbox required to be checked. string
buttonLabel Text for the button. Defaults to “Subscribe” string
successLabel Label shown after successful signup. string
title Title displayed above the form. string
intro Introductory text displayed above the form fields. string
preloadedQuery Server-preloaded data from loadNewsletterSignupQuery. Optional – the form fetches lazily without it. object