74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { type FormEvent, useState } from 'react'
|
|
import './contact-form.css'
|
|
|
|
export default function ContactForm() {
|
|
const [submitted, setSubmitted] = useState(false)
|
|
|
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
setSubmitted(true)
|
|
}
|
|
|
|
return (
|
|
<div className="contact-form-box">
|
|
<form className="contact-form-inner" onSubmit={handleSubmit} noValidate>
|
|
<div>
|
|
<h2 className="contact-form-title">Get in touch</h2>
|
|
<p className="contact-form-description">
|
|
Send us a message and we'll get back to you as soon as we can.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="contact-form-field">
|
|
<label htmlFor="contact-email" className="contact-form-label">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="contact-email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
autoComplete="email"
|
|
placeholder="you@example.com"
|
|
className="contact-form-input"
|
|
/>
|
|
</div>
|
|
|
|
<div className="contact-form-field">
|
|
<label htmlFor="contact-phone" className="contact-form-label">
|
|
Phone <span className="contact-form-label-optional">(optional)</span>
|
|
</label>
|
|
<input
|
|
id="contact-phone"
|
|
name="phone"
|
|
type="tel"
|
|
autoComplete="tel"
|
|
placeholder="+44 7700 900000"
|
|
className="contact-form-input"
|
|
/>
|
|
</div>
|
|
|
|
<div className="contact-form-field">
|
|
<label htmlFor="contact-message" className="contact-form-label">
|
|
Message
|
|
</label>
|
|
<textarea
|
|
id="contact-message"
|
|
name="message"
|
|
required
|
|
rows={6}
|
|
placeholder="Tell us about your project..."
|
|
className="contact-form-textarea"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="contact-form-submit">
|
|
{submitted ? 'Message sent' : 'Send message'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|