feat(docs): Add sample form/function code to the function docs (#31453)

* feat(docs): Add sample form/function code to the function docs

Get people going quick if they want to try adding a form that submits to a function.

* Update docs/docs/how-to/functions/getting-started.md

Co-authored-by: Dustin Schau <[email protected]>

* Add simple server validation

* Run prettier

Co-authored-by: Dustin Schau <[email protected]>

Author: KyleAMathews

docs/docs/how-to/functions/getting-started.md

@@ -123,4 +123,72 @@ export default async function postNewPersonHandler(req, res) {
 
 ## Forms
 
-Forms and Functions are often used together. See the [basic form example](https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/basic-form) as well as the [Forms doc page](/docs/how-to/adding-common-features/adding-forms/) which walks you through building a custom form.
+Forms and Functions are often used together. For a working example you can play with locally, see the [form example](https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/basic-form). The [Forms doc page](/docs/how-to/adding-common-features/adding-forms/) is a gentle introduction for building forms in React. Below is sample code for a very simple form that submits to a function that you can use as a basis for building out forms in Gatsby.
+
+```js:title=src/api/form.js
+export default function formHandler(req, res) {
+  // req.body has the form values
+  console.log(req.body)
+
+  // Here is where you would validate the form values and
+  // do any other actions with it you need (e.g. save it somewhere or
+  // trigger an action for the user).
+  //
+  // e.g.
+
+  if (!req.body.name) {
+    return res.status(422).json("Name field is required")
+  }
+
+  return res.json(`OK`)
+}
+```
+
+```js:title=src/pages/form.js
+import * as React from "react"
+
+export default function FormPage() {
+  const [value, setValue] = React.useState({})
+  const [serverResponse, setServerResponse] = React.useState(``)
+
+  // Listen to form changes and save them.
+  function handleChange(e) {
+    value[e.target.id] = e.target.value
+    setServerResponse(``)
+    setValue({ ...value })
+  }
+
+  // When the form is submitted, send the form values
+  // to our function for processing.
+  async function onSubmit(e) {
+    e.preventDefault()
+    const response = await window
+      .fetch(`/api/form`, {
+        method: `POST`,
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify(value),
+      })
+      .then(res => res.json())
+
+    setServerResponse(response)
+  }
+
+  return (
+    <div>
+      <div>Server response: {serverResponse}</div>
+      <form onSubmit={onSubmit} method="POST" action="/api/form">
+        <label htmlFor="name">Name:</label>
+        <input
+          type="text"
+          id="name"
+          value={value[`name`] || ``}
+          onChange={handleChange}
+        />
+        <input type="submit" />
+      </form>
+    </div>
+  )
+}
+```