Overview

The EmailForm component allows you to build email forms. Currently, it supports 2 providers: EmailJS and Klaviyo.

Import

The EmailForm component can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.

import EmailForm from 'frontend-ui/EmailForm'

Usage

To use the EmailForm component you must provide an object to emailConfig prop. The structure of this object is different depending on what type of form you want to use. Check the following examples:

EmailJS

To use the EmailForm component with EmailJS, you need to provide an object with the following keys:

type = "emailJS"
serviceId = service ID from EmailJS
templateId = template ID from Email JS
userId = user ID from EmailJS
toEmail = email address to which the email will be sent

🚧
These keys comes directly from EmailJS, which you would need to set up separately - this is not already available out of the box with Shogun Frontend.

import React from 'react'
import EmailForm from 'frontend-ui/EmailForm'

const MyComponent = () => {
  <EmailForm
    emailConfig={{
      type: "emailJS",
      userId: "email_js_user_id",
      toEmail: "[email protected]",
      templateId: "email_js_template_id",
      serviceId: "email_js_service_id"
    }}
    onBeforeSubmit={() => {}}
    onSubmitSuccess={() => {}}
    onSubmitFail={() => {}}
    validateForm={() => true}
  >
    <label>
      First name
      <input name="first_name" type="text" />
    </label>
    <label>
      Last name
      <input name="last_name" type="text" />
    </label>
    <button type="submit">Send</button>
  </EmailForm>
}

export default MyComponent

Klaviyo

To use the EmailForm component with Klaviyo, you need to provide an object with the following keys:

type = "klaviyo"
subscritionsUrl = url which a request should be made

import React from 'react'
import EmailForm from 'frontend-ui/EmailForm'

const MyComponent = () => {
  <EmailForm
    emailConfig={{
      type: "klaviyo",
      subscriptionUrl: "https://klaviyo-url"
    }}
    onBeforeSubmit={() => {}}
    onSubmitSuccess={() => {}}
    onSubmitFail={() => {}}
    validateForm={() => true}
  >
    <label>
      Email
      <input name="email" type="email" />
    </label>
    <input
      name="test"
      placeholder="Email"
      type="hidden"
    />
    <button type="submit">Send</button>
  </EmailForm>
}

export default MyComponent

Props

name	type	description
`emailConfig`	`EmailConfig` (object)	Configuration object for EmailForm.
`onBeforeSubmit`	`(event) => void`	Handler called before submit process is started.
`onSubmitSuccess`	`(event) => void`	Handler called after submit process is successfully finished.
`onSubmitFail`	`(error) => void`	Handler called when an error happens during form's submission.
`validateForm`	`(event) => boolean`	Function to validate form inputs. Return `true` if form is valid, `false` otherwise

`emailConfig` shape

type EmailJSEmailConfig = {
  type: 'emailJS'
  serviceId: string
  templateId: string
  userId: string
  toEmail: string
  subscriptionUrl?: never
}

type KlaviyoEmailConfig = {
  type: 'klaviyo'
  subscriptionUrl: string
  serviceId?: never
  templateId?: never
  userId?: never
  toEmail?: never
}

type EmailConfig = EmailJSEmailConfig | KlaviyoEmailConfig

Overview

Import

Usage

EmailJS

🚧

Klaviyo

Props

emailConfig shape

`emailConfig` shape