text: import BlogLayout from 'src/layouts/BlogLayout'
  import {
    Form,
    TextField,
    TextAreaField,
    Submit,
    FieldError,
    Label,
    useMutation,
    FormError,
  } from '@redwoodjs/web'
  
  const CREATE_CONTACT = gql`
    mutation CreateContactMutation($input: CreateContactInput!) {
      createContact(input: $input) {
        id
      }
    }
  `
  
  const ContactPage = () => {
    const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
      onCompleted: () => {
        alert('Thanks for submitting!')
      },
    })
    const onSubmit = (data) => {
      create({ variables: { input: data } })
      console.log(data)
    }
    return (
      <BlogLayout>
        <Form onSubmit={onSubmit} validation={{ mode: 'onBlur' }} error={error}>
          <FormError
            error={error}
            wrapperStyle={{ color: 'red', backgroundColor: 'lavenderblush' }}
          />
          <Label htmlFor="name" errorClassName="error">
            Name
          </Label>
          <TextField
            name="name"
            validation={{ required: true }}
            errorClassName="error"
          />
          <FieldError name="name" className="error" />
  
          <Label htmlFor="email" errorClassName="error">
            Email
          </Label>
          <TextField
            name="email"
            validation={{
              required: true,
            }}
            errorClassName="error"
          />
          <FieldError name="email" className="error" />
  
          <Label htmlFor="message" errorClassName="error">
            Message
          </Label>
          <TextAreaField
            name="message"
            validation={{ required: true }}
            errorClassName="error"
          />
          <FieldError name="message" className="error" />
  
          <Submit disabled={loading}>Sav{loading ? 'ing' : 'e'}</Submit>
        </Form>
      </BlogLayout>
    )
  }
  
  export default ContactPage
  