Basic example
import { useState } from 'react'
export default function ContactForm() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [message, setMessage] = useState('')
const [loading, setLoading] = useState(false)
const [success, setSuccess] = useState(false)
const [error, setError] = useState('')
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setLoading(true)
setError('')
try {
const res = await fetch('https://submito.dev/api/v1/your-endpoint-slug/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'your-api-key',
},
body: JSON.stringify({ name, email, message }),
})
const result = await res.json()
if (result.ok) {
setSuccess(true)
setName(''); setEmail(''); setMessage('')
} else {
setError(result.error ?? 'Something went wrong.')
}
} catch {
setError('Network error. Please try again.')
} finally {
setLoading(false)
}
}
if (success) {
return <p>Thank you! Your message has been sent.</p>
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Your name"
value={name}
onChange={e => setName(e.target.value)}
required
/>
<input
type="email"
placeholder="Your email"
value={email}
onChange={e => setEmail(e.target.value)}
required
/>
<textarea
placeholder="Your message"
value={message}
onChange={e => setMessage(e.target.value)}
required
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
<button type="submit" disabled={loading}>
{loading ? 'Sending…' : 'Send message'}
</button>
</form>
)
}
Using environment variables (Next.js)
Store your credentials in.env.local:
NEXT_PUBLIC_SUBMITO_API_KEY=your-api-key
NEXT_PUBLIC_SUBMITO_ENDPOINT=https://submito.dev/api/v1/your-endpoint-slug/submit
const res = await fetch(process.env.NEXT_PUBLIC_SUBMITO_ENDPOINT!, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': process.env.NEXT_PUBLIC_SUBMITO_API_KEY!,
},
body: JSON.stringify({ name, email, message }),
})
NEXT_PUBLIC_ variables are exposed to the browser. This is acceptable for a submission-only key since it cannot read or delete your data.