Create an Airtable Form Submission Function
Learn how to create a function that handles a form submission and formats the data for Airtable.
Instructor: [0:00] This function we want to define is an async function that would handle the form submissions. We would want to call it submitHandler().
[0:12] The submitHandler has two purposes. It would take a request as a parameter and check that if the request method is not equal to a POST, we want to return a response that says the method is not allowed. This will help us check that the only thing possible with this Submit button, is to send information to the Airtable.
[0:43] Next thing we want to do is create a constant body that will await the requests, and then make that request a form data, which is just a pair of key values. After we've gotten that, we would also want to destructure some parameters from the body, but also make those parameters and objects, so we use the Object.formEntry() on the body.
[1:16] If we open up our form components, under Components, see Form, you can see that the input tags have an ID. This is the ID that we would want to make objects out of. We would want to create objects out of the parameters that we have, like the first name, the last name, email, subject, and message.
[1:49] Once we create the request body, which will have the fields that we will pass to our Airtable API to create new forms submissions, these fields that we have in our form would have to match with the fields that we want to input them in the Airtable. We would match firstName to first name, lastName to last name, email to email, and so on.
[2:14] Then, return the Airtable handleData() function, and pass in our request body as a parameter. This would populate our Airtable fields.
[2:33] Since we've defined all the functions that help us connect and submit our Airtable, we would also want to make sure that we bind this to our handleRequest Worker, as this is what our FETCH request is going to respond with.
[2:47] We want to create a new URL from our request.url, which would be our Worker URL, and say that if the URL path is equal to submit, return a submitHandler request. Then, if not, we want to return a new Response.Redirect to our form URL.
[3:18] We haven't defined the form URL yet. We head over our page and define the form URL. We can get a form URL from our Pages dashboard. We want to be redirected to our Pages sites if the request is not fulfilled. We'll paste in the URL of our Pages sites.