Chapter 3, Improving the Contact Form.

web/src/pages/ContactPage/ContactPage.js

@@ -1,21 +1,76 @@
-import { MetaTags } from '@redwoodjs/web'
-import { Form, TextField, Submit, TextAreaField } from '@redwoodjs/forms'
+import { MetaTags, useMutation } from '@redwoodjs/web'
+import { toast, Toaster } from '@redwoodjs/web/toast'
+import {
+  FieldError,
+  Form,
+  Label,
+  TextField,
+  Submit,
+  TextAreaField,
+} from '@redwoodjs/forms'
+
+const CREATE_CONTACT = gql`
+  mutation CreateContactMutation($input: CreateContactInput!) {
+    createContact(input: $input) {
+      id
+    }
+  }
+`
 
 const ContactPage = () => {
+  const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
+    onCompleted: () => {
+      toast.success('Thank you for your submission!')
+    },
+  })
+
   const onSubmit = (data) => {
+    create({ variables: { input: data } })
     console.log(data)
   }
   return (
     <>
       <MetaTags title="Contact" description="Contact page" />
-      <Form onSubmit={onSubmit}>
-        <label htmlFor="name">Name</label>
-        <TextField name="name" validation={{required: true}} />
-        <label htmlFor="email">Email</label>
-        <TextField name="email" validation={{required: true}} />
-        <label htmlFor="message">Message</label>
-        <TextAreaField name="message" validation={{required: true}} />
-        <Submit>Save</Submit>
+
+      <Toaster />
+      <Form onSubmit={onSubmit} config={{ mode: 'onBlur' }}>
+        <Label name="name" errorClassName="error">
+          Name
+        </Label>
+        <TextField
+          name="name"
+          validation={{ required: true }}
+          errorClassName="error"
+        />
+        <FieldError name="name" className="error" />
+
+        <Label name="email" errorClassName="error">
+          Email
+        </Label>
+        <TextField
+          name="email"
+          validation={{
+            required: true,
+            pattern: {
+              value: /^[^@]+@[^.]+\..+$/,
+              message: 'Please enter a valid email address',
+            },
+          }}
+          errorClassName="error"
+        />
+        <FieldError name="email" className="error" />
+
+        <Label name="message" errorClassName="error">
+          Message
+        </Label>
+        <TextAreaField
+          name="message"
+          validation={{ required: true }}
+          errorClassName="error"
+        />
+        <FieldError name="message" className="error" />
+
+        <Submit disabled={loading}>Save</Submit>
       </Form>
     </>
   )