You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import styles from '~/styles/form.module.css'
|
|
|
|
const submitUrl = 'https://contact.tempest.dev/api/contact/me'
|
|
import { useState, useRef, FormEvent } from 'react'
|
|
|
|
export default function ContactForm() {
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [status, setStatus] = useState('')
|
|
|
|
const nameRef = useRef<HTMLInputElement>()
|
|
const emailRef = useRef<HTMLInputElement>()
|
|
const messageRef = useRef<HTMLTextAreaElement>()
|
|
|
|
const submit = async (ev: FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault()
|
|
|
|
setStatus('')
|
|
|
|
const name = nameRef.current.value
|
|
const email = emailRef.current.value
|
|
const message = messageRef.current.value
|
|
|
|
if (!name) setStatus(s => s + ' Name required.')
|
|
if (!email) setStatus(s => s + ' Email required.')
|
|
if (!message) setStatus(s => s + ' Message required.')
|
|
|
|
if (!name || !email || !message)
|
|
return
|
|
|
|
setSubmitting(true)
|
|
|
|
try {
|
|
|
|
await fetch(submitUrl, {
|
|
method: 'post',
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
name, email, message
|
|
})
|
|
})
|
|
|
|
setStatus('Message sent successfully')
|
|
} catch {
|
|
setStatus('Error submitting message, please try again')
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form className={styles.form} onSubmit={submit}>
|
|
<label htmlFor="name">Name:</label>
|
|
<input disabled={submitting} name="name" ref={nameRef} />
|
|
|
|
<label htmlFor="email">Email:</label>
|
|
<input disabled={submitting} name="email" ref={emailRef} />
|
|
|
|
<label htmlFor="message">Message:</label>
|
|
<textarea disabled={submitting} name="message" ref={messageRef} />
|
|
|
|
<button disabled={submitting} type="submit">Submit</button>
|
|
{status && <span className={styles.status}>{status}</span>}
|
|
</form>
|
|
)
|
|
}
|