Newsletter signup components has been designed to add custom fields to the footer for newsletter subscription. You can pass fieldset details via fields prop which the component renders to html form fields.
The field type can be select, checkbox and text.
yarn add @berlitz/newsletter-sign-up| Argument | Type | Required | Default | Example |
|---|---|---|---|---|
| endpointUrl | string | ❌ | ||
| errorText | string | ❌ | 'There was an error signing up! Please refresh and try again.' | |
| fields | array | ❌ | [ ] | |
| getEndpointUrl | function | ❌ | ||
| hiddenFields | array | ❌ | [ ] | |
| mapFormValuesToPostBody | function | ❌ | ||
| noteText | string | ❌ | ||
| submitText | string | ❌ | 'Sign Up', | |
| submittingText | string | ❌ | 'Submitting' | |
| successText | string | ❌ | 'Thanks for signing up!' | |
| title | string | ✅ | ||
| unsubscribeText | string | ❌ |
import NewsletterSignUp from '@berlitz/newsletter-sign-up'
const MyApp = () => <NewsletterSignUp
endpointUrl="//signup.example.com"
title="Sign up for newsletter"
fields={[
{ name: "name", type: "text", label: "Your name" },
{ name: "email", type: "email", label: "Your email" }
]}
/>Pass it to Footer's newsletterComponent prop as node.
Static endpointUrl can be overwritten with getEndpointUrl function which generates url from values of form. Data is being posted in application/json format. The posted object can be remapped passing the mapFormValuesToPostBody function.