Custom Submit

Skip past table of contents

Search

Table of contents

Start of documentation content

Form submissions can be configured using the onSubmit prop, which allows you to send the data to your own servers, or to add additional data (eg, a user id) to the submission.

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',
      };
    }
  }}
/>