Integrating with Formspree

[colevscode]

I created an example that shows how to integrate react-hook-form with Formspree to collect form submissions.

Here's the codesandbox: https://codesandbox.io/s/react-hook-form-formspree-basic-euzlo

[colevscode]

I started working to extend the example above to display validation errors from react-hook-form and Formspree together. However I realized part way through that it doesn't make much sense to mix the frontend and backend errors. If you use react-hook-form you should do thorough enough frontend validation to ensure no backend errors are returned.

The backend validation is there as a backup or for cases where validation can only happen on the server side (like in case of card failure with our Stripe plugin). But those form-wide server errors won't have a field associated with them and should be displayed at the bottom of the form, separate from react-hook-form's validation errors.

Regardless I spent some time figuring out how you could merge both the frontend and backend errors. It could be useful in the future in case Formspree enables more sophisticated backend validation that can only be performed server-side, like uniqueness checks. If interested, see below.

---

Formspree returns an array of errors that looks like this:

[
  { message: "Form not found" }
  { field: "email", message: "should be an email" },
]

I'm thinking I could first merge both react-hook-form errors and Formspree errors into a single error object like this:

  // merge server side errors into react-hook-form errors
  errors = {...serverState.errors.reduce((acc, cur)=>({[cur.field]:{message:`This ${cur.message}`}, ...acc}), {}), ...errors}

Then you could just display errors as usual:

{errors.firstName && <p>{errors.firstName.message}</p>}  // <-- contains client or server validation error

Form-wide errors returned by Formspree don't have a field property. After the merge step above, you end up with errors on the undefined key. This actually works OK, you could just put a line like this at the bottom of your form:

{errors.undefined && <p>{errors.undefined.message}</p>}

But if your form contained a field named undefined then that field's errors might step on the form-wide errors. Not ideal, but in practice I don't know how frequently people would give a form input the name "undefined".

Here's a final example that shows how you could merge Formspree server errors and react-hook-form client side errors: https://codesandbox.io/s/react-hook-form-formspree-ini64