Subscription

The SubscriptionField component is a convenient wrapper for email subscription forms. It includes a FormInput component for email input and a SubscriptionButton component for submitting the form.

Importing

import {
  SubscriptionButton,
  SubscriptionField,
} from '@ef-global/backpack/Subscription';
import { FormInput } from '@ef-global/backpack/FormInput';

Props

Name	Type	Default	Description
submitted	boolean	-	Determines if the form is submitted or not
inverse	boolean	false	If set to true, uses inverse styles for the SubscriptionField
className	string	-	Optional custom CSS class to be applied to the SubscriptionField component
children	Array of FormInput, SubscriptionButton, GradientEllipse	-	Array of the required child components for the SubscriptionField

Usage

The SubscriptionField component should be used with the FormInput, SubscriptionButton, and optionally, GradientEllipse components as children.

FormInput

For the email input, use the FormInput component. A single FormInput component, or any custom field component that has a data-slot prop set to "FormInput". This component represents the input field within the subscription form. When using a custom field, ensure it has the necessary properties and behavior to function correctly within the subscription form.

SubscriptionButton

For the submit button, use the SubscriptionButton component.

GradientEllipse (optional)

GradientEllipse is an optional circular element with a gradient background that appears and scales up when the form is submitted. In order to see the transition, you need to wrap the SubscriptionField component inside a SubscriptionContainer component.

Examples

Default

const [submitted, setSubmitted] = useState(false);
<div>
    <SubscriptionField submitted={submitted} inverse={false}>
      <FormInput
        type='email'
        placeholder='Email'
        data-slot='FormInput'
      />
      <SubscriptionButton
        label='Submit'
        data-slot='SubscriptionButton'
        onClick={() => setSubmitted(true)}
      />
    </SubscriptionField>
    {submitted ? (
      <Link
        variant='standalone'
        inverse={false}
        asChild={true}
      >
        <button type='button' onClick={() => setSubmitted(false)}>
          <LinkText>Add another email</LinkText>
        </button>
      </Link>
    ) : (
      ''
    )}
</div>

Inverse

const [submitted, setSubmitted] = useState(false);
<div>
    <SubscriptionField submitted={submitted} inverse={true}>
      <FormInput
        type='email'
        placeholder='Email'
        data-slot='FormInput'
      />
      <SubscriptionButton
        label='Submit'
        data-slot='SubscriptionButton'
        onClick={() => setSubmitted(true)}
      />
    </SubscriptionField>
    {submitted ? (
      <Link
        variant='standalone'
        inverse={true}
        asChild={true}
      >
        <button type='button' onClick={() => setSubmitted(false)}>
          <LinkText>Add another email</LinkText>
        </button>
      </Link>
    ) : (
      ''
    )}
</div>

SubscriptionContainer

The SubscriptionContainer component is a wrapper component for managing the subscription form and its content. It accepts four children components: SubscriptionHeading, SubscriptionResultHeading, SubscriptionDescription, and Form. The Form child should include a SubscriptionField component which contains the form input and button.

The GradientEllipse component is not a direct child of the SubscriptionContainer. Instead, it is a child of the SubscriptionField component. The GradientEllipse is a circle that appears with a scaling transition when the form is submitted. To see the transition, insert the SubscriptionField component inside a SubscriptionContainer component, and include the GradientEllipse component as a child of SubscriptionField.

Here is an overview of the SubscriptionContainer component:

Importing

import {
  SubscriptionButton,
  SubscriptionField,
  GradientEllipse,
} from '@ef-global/backpack/Subscription';
import {
  SubscriptionContainer,
  SubscriptionDescription,
  SubscriptionHeading,
  SubscriptionResultHeading,
} from '@ef-global/backpack/SubscriptionContainer';
import { FormInput } from '@ef-global/backpack/FormInput';

Props

Name	Type	Default	Description
submitted	boolean	false	Determines if the form is submitted or not
children	Array of SubscriptionHeading, SubscriptionResultHeading, SubscriptionDescription, Form	-	Array of the required child components for the SubscriptionContainer

Slots

SubscriptionContainer requires the following slot components:

SubscriptionHeading: The main heading for the subscription component.
SubscriptionResultHeading: The heading that appears after the form has been submitted.
SubscriptionDescription: (Optional) A brief description for the subscription component.
Form: The SubscriptionField component wrapped inside an HTML form element.

Usage

To use the SubscriptionContainer, wrap the SubscriptionField component along with other required components inside the SubscriptionContainer component.

Example

Subscribe to our newsletter

Thank you, we'll be in touch!

Ullamcorper sit et est sed suscipit pharetra senectus fermentum parturient blandit fringilla blandit aenean vel sodales in mi sapien a a.

  const [submitted, setSubmitted] = useState(false);
  return (
    <SubscriptionContainer submitted={submitted}>
      <Text data-slot="SubscriptionHeading">Subscribe to our newsletter</Text>
      <Text data-slot="SubscriptionResultHeading">Thank you for subscribing!</Text>
      <Text data-slot="SubscriptionDescription">Stay up to date with our latest news and offers.</Text>
      <form
        data-slot="Form"
        onSubmit={(e) => {
          e.preventDefault();
          setSubmitted(true);
        }}
      >
        <SubscriptionField submitted={submitted}>
          {/* Insert required child components of SubscriptionField here */}
        </SubscriptionField>
      </form>
    </SubscriptionContainer>
  );

SSRInjectStyles Surfaces