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