Anyone help me! How to complete the submission form from the NextJS + PayloadCMS series?
I think there is only a collection that is being set up.
Guide me on how to send a response from the form to the collection or something related??
Thank you in advance!
Hey @Duckinm — this is going to be covered in an upcoming video! You'll get access to the full source code, too. Next vid is coming out soon. Keep an eye out.
Sound good! Looking for it.
looking for updates...
My project is almost done but only have to achieve this.
We are all waiting on the next episode ;)
Let's see if I can help a little till then; did you simply try sending a fetch post with FormData to the Payload endpoint? What makes you think there's only one collection?
So you don't have to wait on the next video, I'll share a very basic example. Let's assume you have a form-submissions
collection like this: https://github.com/payloadcms/custom-website-series/blob/master/collections/FormSubmission.ts
import React, { useState } from 'react';
const ContactForm = () => {
const [submitted, setSubmitted] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
const { from, message } = e.target.elements;
const details = {
from: from.value,
message: message.value,
source: 'Contact',
};
const response = await fetch('/api/form-submissions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(details),
});
setSubmitted(true);
const result = await response.json();
if (result.status>= 400) {
setSubmitted(false);
// handle error
} else {
// handle success
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">
Name
<input
type="text"
id="name"
required
/>
</label>
</div>
<div>
<label htmlFor="from">
Email
<input
type="email"
id="from"
required
/>
</label>
</div>
<div>
<label htmlFor="message">
Message
<textarea
id="message"
required
/>
</label>
</div>
<button
type="submit"
disabled={submitted}
>
Submit
</button>
</form>
);
};
export default ContactForm;
There is a lot to improve upon in this example, but it should help you get an idea for a basic form. James will have good conventions to use for user feedback on submit, validation and reusability using form components, but this at least shows how to submit to the endpoint.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.