Custom Submit

Skip past table of contents

Search

Table of contents

Start of documentation content

Form submissions can be intercepted by using the onSubmit prop.

Use of onSubmit

<Formally
  onSubmit={async ({ formId, valuesAsFormNames }) => {
    // send data to your server, or a clientside callback
    const response = await fetch('https://example.com/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(valuesAsFormNames),
    });
    const data = await response.json();

    // return success or error so that Formally can
    // render the success page or error content
    if (data.ok) {
      return {
        type: 'success',
        localisedMessage: 'You did it!',
      };
    } else {
      return {
        type: 'error',
        localisedMessage: 'There was a problem',
      };
    }
  }}
/>