Fix import on useForm + validate e-mail

web/src/pages/ContactPage/ContactPage.js

@@ -6,10 +6,10 @@ import {
   FieldError,
   Label,
   FormError,
+  useForm,
 } from '@redwoodjs/forms'
 import { useMutation } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
-import { useForm } from 'react-hook-form'
 
 const CREATE_CONTACT = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
@@ -34,7 +34,8 @@ const ContactPage = () => {
     console.log(data)
   }
 
-  return <>
+  return (
+    <>
       <Toaster />
       <Form
         onSubmit={onSubmit}
@@ -74,6 +75,10 @@ const ContactPage = () => {
           name="email"
           validation={{
             required: true,
+            pattern: {
+              value: /[^@]+@[^.]+\..+/,
+              message: 'Please enter a valid email address',
+            },
           }}
           className="border rounded-sm px-2 py-1"
           errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
@@ -102,7 +107,8 @@ const ContactPage = () => {
           Save
         </Submit>
       </Form>
-  </>;
+    </>
+  )
 }
 
 export default ContactPage