Building Serverless React Forms Using React Hook Form & Getform.io

React-Hook-Form

$ npm install react-hook-form
import * as React from "react";
import { useForm } from "react-hook-form";
export default () => {
const { handleSubmit, register, watch, errors } = useForm();
const onSubmit = (data) => console.info(data); console.info(watch("firstName"));
console.info(watch("lastName"));
console.info(watch("age"));
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" ref={register({ required: true })} />
{errors.firstName && <span>First Name Is Required</span>}
<input name="lastName" ref={register({ required: true })} />
{errors.lastName && <span>Last Name Is Required</span>}
<input name="age" defaultValue="21" ref={register()} /> <input type="submit" />
</form>
);
};
  • We import react-hook-form.
  • We define the methods we need using useForm().
  • We define an onSubmit handler to fire when a user submits the form. This will receive a data parameter from the hook and you can still define an e parameter to access the target form if you need to.
  • We then define the form. For the onSubmit form handler, we pass in the handleSubmit hook method, passing in our own onSubmit event handle that we have defined.
  • We then just define our form fields as we would but we register them by applying a ref attribute which is used to register the field to the form. This is done by calling the register method passing in any validation rules that need to be applied. All fields need to have a unique name attribute applied.
  • Validation errors are handled via the errors object and each registered field becomes a property to the object. You can see in the first and last name fields I have made them mandatory and if the form is submitted without them being completed the associated validation message are displayed.

Getform.io

import axios from "axios";
import * as React from "react";
import { useForm } from "react-hook-form";
export default () => {
const [serverState, setServerState] = useState({ submitting: false, status: null });
const handleServerResponse = (ok, msg, form) => {
setServerState({ submitting: false, status: { ok, msg } });
if (ok) {
// show success message
// handle success next steps
return;
}
// show failure message
// handle failure next steps
return;
};
const onSubmit = (data, e) => {
const formData = new FormData();
for (var field in data) {
formData.append(field, data[field]);
}
setServerState({ submitting: true }); // replace the url parameter with your own GetForm.io form id/url
axios({
method: "post",
url: "https://getform.io/f/11111111-aaaa-1111-aaaa-111111111111",
data: formData,
})
.then((r) => {
e.target.reset();
handleServerResponse(true, "Form Submitted", e);
})
.catch((r) => {
handleServerResponse(false, r.response.data.error, e);
});
};
const { handleSubmit, register, watch, errors } = useForm(); console.info(watch("firstName"));
console.info(watch("lastName"));
console.info(watch("age"));
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" ref={register({ required: true })} />
{errors.firstName && <span>First Name Is Required</span>}
<input name="lastName" ref={register({ required: true })} />
{errors.lastName && <span>Last Name Is Required</span>}
<input name="age" defaultValue="21" ref={register()} /> <input type="submit" />
</form>
);
};
  • I define a state variable serverState to track when the form is waiting for the server to respond. This is useful to control UI elements when posting your data.
  • I update the onSubmit function to receive the e parameter to be able to access the form. I also create a new FormData object and populate it with the fields passed in the data parameter.
  • I then use an axios promise to post the form data to my GetForm.io form (remember to use the correct url as specified in your form settings) and handle the response accordingly.
  • In the example, I define a handleServerResponse function which takes some params for me to handle the axios response. In my real-world example, I used this function to show a notification to the user for example. The important thing to note is to ensure you update the serverState variable. You can also see I use the e param in the then promise handler to reset the form back to its original state.

Zapping GetForm.io To Mailchimp

Wrapping up

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store