implemented contact form
parent
7e3dc4ace4
commit
6cddfdf8fe
@ -0,0 +1,91 @@
|
|||||||
|
'use client'
|
||||||
|
import { useState, useRef, FormEvent } from 'react'
|
||||||
|
import InfoBar from "~/components/InfoBar/"
|
||||||
|
|
||||||
|
import styles from '~/styles/form.module.css'
|
||||||
|
|
||||||
|
const submitUrl = 'https://kae.tempest.dev/api/contact/me'
|
||||||
|
|
||||||
|
export default function Contact() {
|
||||||
|
const [submitting, setSubmitting] = useState(false)
|
||||||
|
const [status, setStatus] = useState('')
|
||||||
|
|
||||||
|
const nameRef = useRef()
|
||||||
|
const emailRef = useRef()
|
||||||
|
const messageRef = useRef()
|
||||||
|
|
||||||
|
const submit = async (ev: FormEvent<HTMLFormElement>) => {
|
||||||
|
ev.preventDefault()
|
||||||
|
|
||||||
|
setStatus('')
|
||||||
|
|
||||||
|
const name: string = nameRef.current?.value ?? ''
|
||||||
|
const email: string = emailRef.current?.value ?? ''
|
||||||
|
const message: string = 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 (
|
||||||
|
<>
|
||||||
|
<h1 className="pageTitle">
|
||||||
|
Contact
|
||||||
|
</h1>
|
||||||
|
<main className="mainColumn">
|
||||||
|
<InfoBar>
|
||||||
|
Be nice. Please don't make us regret putting this here
|
||||||
|
</InfoBar>
|
||||||
|
<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>}
|
||||||
|
{/*<FormController
|
||||||
|
url="https://kae.tempest.dev/api/contact/tempest"
|
||||||
|
afterSubmit={() => setStatus('Message sent successfully!')}
|
||||||
|
onError={() => setStatus('Error submitting message, please try again.')}
|
||||||
|
>
|
||||||
|
<Input name="name" validate={v => !!v} />
|
||||||
|
<Input name="email" validate={v => !!v && v.includes('@')} />
|
||||||
|
<TextArea name="message" validate={v => !!v && v.length < 1000} />
|
||||||
|
<Button onClick={() => setStatus(null)} type="submit">submit</Button>
|
||||||
|
{status && <p>{status}</p>}
|
||||||
|
</FormController>*/}
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1,34 @@
|
|||||||
|
.form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: fit-content(30px) 1fr;
|
||||||
|
grid-row-gap: var(--text-padding);
|
||||||
|
grid-column-gap: var(--text-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form textarea {
|
||||||
|
min-height: 160px;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form button[type="submit"],
|
||||||
|
.form .status{
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form input,
|
||||||
|
.form textarea,
|
||||||
|
.form button[type="submit"] {
|
||||||
|
color: white;
|
||||||
|
background: var(--page-background);
|
||||||
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 4px;
|
||||||
|
height: 32px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form button[type="submit"] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
Loading…
Reference in New Issue