Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Dev & Staging Environments
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • PowerPoint Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page
  • Overview
  • Usage
  • Context API
  • Return value

Was this helpful?

  1. Developers
  2. React SDK
  3. API Guide
  4. <Form>
  5. Event Handlers

onSubmit()

This event handler runs when a step of the form is submitted.

PreviousEvent HandlersNextonLoad()

Last updated 2 months ago

Was this helpful?

Overview

onSubmit is a prop and callback function to access and modify form state when a form step is successfully submitted. It's called every time the user is about to successfully submit a step of the form, but before the actual submission happens. This function can be asynchronous.

Usage

You can use onSubmit to store the submitted user data, update your rendered components, set custom errors, and more. It takes a single object that provides form-related state and handlers.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    // Store form data in backend
    onSubmit={(context) => {
      writeToBackend(context.submitFields);
      if (context.lastStep) console.log("User finished form!");
    }}
  />
}

Context API

Key
Type
Description

Consistently available form state and functions

submitFields

The data of fields that the user just submitted. Excludes fields hidden by conditional rules.

trigger

Info of the element that triggered the submission.

triggerData Object

Key
Type
Description

id

string

The ID of the element that triggered the submission

text

string

The text displayed on the element that triggered the submission.

type

string enum

The type of element that triggered the submission. Can be button, text, or field.

repeatIndex

integer

If the element that triggered the submission repeats, this specifies which repetition it is. This value is 0-indexed and equals 0 if the element doesn't repeat.

fieldData Definition

The object keys are unique field IDs, defined in the Feathery dashboard. They map to objects that store additional field-specific information, defined below.

Key
Type
Description

displayText

optional string

Text to display to your user along with the field

type

string enum

Field type (e.g. textarea, checkbox, etc.)

value

optional polymorphic

User-submitted value for this field. null if no submission, Promise<File> if file submission, Base64 string if signature, array of values if repeated.

position

number[]

Indices reflect the current element's position relative to other elements on the page.

options

{value: string, label?: string}[]

Allowed options to choose from, if the field specifies them (e.g. dropdown, radio buttons, etc.)

fieldData example

{
  age: {
    displayText: 'How old are you?',
    type: 'integer_field',
    value: 21 
  },
  photo_id: {
    displayText: 'Upload a photo of your ID',
    type: 'rich_file_upload',
    value: Promise<File>
  }
}

Return value

A promise can be optionally returned from this function if it's asynchronous and you want execution to await.

<Feathery.Form>
Context
Form Context
fieldData
triggerData