edisdev/form.js

## form.js
import Head from 'next/head'

import { API } from 'aws-amplify'
import { useState } from 'react'
import { createContact } from '../src/graphql/mutations'

import styles from '../styles/Home.module.css'

export default function Home() {

  const defaultForm = { name: '', email: '', message: '' }
  const [form, setForm] = useState(defaultForm)

  const changeFormItem = (event, key) => {
    setForm({
      ...form,
      [key]: event.target.value
    })
  }

  const sendMessage = async () => {
    const result = await API.graphql({
      query: createContact,
      variables: {
        input: {
          name: form.name,
          email: form.email,
          message: form.message
        },
      }
    })

    if (!result.errors) {
      alert('Thank you so much for e-mail :)')

      setForm(defaultForm)
    }
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Amplify SES Example</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Contact Me!
        </h1>

        <form className={styles.form}>
          <div className={styles.inputGroup}>
            <label htmlFor="name">Name</label>
            <input
              autoComplete='off'
              type="text"
              name='name'
              value={form.name}
              onChange={(e) => changeFormItem(e, 'name')} />
          </div>

          <div className={styles.inputGroup}>
            <label htmlFor="email">E-mail</label>
            <input
              autoComplete='off'
              type="email"
              name='email'
              value={form.email}
              onChange={(e) => changeFormItem(e, 'email')}/>
          </div>

          <div className={styles.inputGroup}>
            <label htmlFor="message">Message</label>
            <textarea
              name='message'
              rows={10}
              cols={10}
              value={form.message}
              onChange={(e) => changeFormItem(e, 'message')}/>
          </div>


          <div className={styles.inputGroup}>
            <button
              type='button'
              className={styles.button}
              onClick={sendMessage}>
                Send Message
              </button>
          </div>

        </form>
      </main>
    </div>
  )
}
	import Head from 'next/head'

	import { API } from 'aws-amplify'
	import { useState } from 'react'
	import { createContact } from '../src/graphql/mutations'

	import styles from '../styles/Home.module.css'

	export default function Home() {

	const defaultForm = { name: '', email: '', message: '' }
	const [form, setForm] = useState(defaultForm)

	const changeFormItem = (event, key) => {
	setForm({
	...form,
	[key]: event.target.value
	})
	}

	const sendMessage = async () => {
	const result = await API.graphql({
	query: createContact,
	variables: {
	input: {
	name: form.name,
	email: form.email,
	message: form.message
	},
	}
	})

	if (!result.errors) {
	alert('Thank you so much for e-mail :)')

	setForm(defaultForm)
	}
	}

	return (
	<div className={styles.container}>
	<Head>
	<title>Amplify SES Example</title>
	<meta name="description" content="Generated by create next app" />
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main className={styles.main}>
	<h1 className={styles.title}>
	Contact Me!
	</h1>

	<form className={styles.form}>
	<div className={styles.inputGroup}>
	<label htmlFor="name">Name</label>
	<input
	autoComplete='off'
	type="text"
	name='name'
	value={form.name}
	onChange={(e) => changeFormItem(e, 'name')} />
	</div>

	<div className={styles.inputGroup}>
	<label htmlFor="email">E-mail</label>
	<input
	autoComplete='off'
	type="email"
	name='email'
	value={form.email}
	onChange={(e) => changeFormItem(e, 'email')}/>
	</div>

	<div className={styles.inputGroup}>
	<label htmlFor="message">Message</label>
	<textarea
	name='message'
	rows={10}
	cols={10}
	value={form.message}
	onChange={(e) => changeFormItem(e, 'message')}/>
	</div>


	<div className={styles.inputGroup}>
	<button
	type='button'
	className={styles.button}
	onClick={sendMessage}>
	Send Message
	</button>
	</div>

	</form>
	</main>
	</div>
	)
	}