EmailForm

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

Did this page help you?