Formik already gives you values, validation, and submission state. Formbase accepts those values as JSON, or as FormData when you need to upload files.
Below are two patterns you can copy depending on your form type.
Build your Formik form
Use Formik as usual to manage values and validation.
Send the submission to Formbase
JSON submission
File uploads
import { Formik, Form, Field } from 'formik';
export default function ContactForm() {
return (
<Formik
initialValues={{ name: '', email: '', message: '' }}
onSubmit={async (values, { resetForm, setStatus }) => {
const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(values),
redirect: 'manual',
});
if (response.status === 303 || response.ok) {
setStatus('Submitted!');
resetForm();
return;
}
setStatus('Submission failed.');
}}
>
{({ isSubmitting, status }) => (
<Form>
<Field name="name" placeholder="Name" />
<Field name="email" type="email" placeholder="Email" />
<Field name="message" as="textarea" />
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Sending...' : 'Send'}
</button>
{status && <p>{status}</p>}
</Form>
)}
</Formik>
);
}
import { Formik, Form, Field } from 'formik';
export default function UploadForm() {
return (
<Formik
initialValues={{ name: '', resume: null }}
onSubmit={async (values, { setStatus }) => {
const formData = new FormData();
formData.append('name', values.name);
if (values.resume) formData.append('resume', values.resume);
const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
method: 'POST',
body: formData,
redirect: 'manual',
});
setStatus(response.status === 303 || response.ok ? 'Uploaded!' : 'Upload failed');
}}
>
{({ isSubmitting, setFieldValue, status }) => (
<Form encType="multipart/form-data">
<Field name="name" placeholder="Name" />
<input
name="resume"
type="file"
onChange={(event) => {
setFieldValue('resume', event.currentTarget.files?.[0] ?? null);
}}
/>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Uploading...' : 'Upload'}
</button>
{status && <p>{status}</p>}
</Form>
)}
</Formik>
);
}
FormData and set the file input manually in Formik.Client-side submissions receive a 303 redirect response. Treat it as success or submit from your server for JSON.
