Form Submission need help!

[Duckinm]

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!

[jmikrut]

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.

[Duckinm]

Sound good! Looking for it.

[Duckinm]

looking for updates...

My project is almost done but only have to achieve this.

[Ontopic]

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?

[Duckinm]

Okay, Let me do that first! if I stucked. Could you please give me some advice?

…

On 2 Aug 2564 BE 8:34 PM +0700, Ontopic ***@***.***>, wrote: We are all waiting on the next episode ;) Did you simply try sending a fetch post with FormData to the Payload endpoint? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[DanRibbens]

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.

[Duckinm]

Oh! Thank a lot for your help! Didn’t thought about the code example before. Actually OnTopic gave me an idea and I’m trying to use it with react hook form. Btw this example would make me do it faster. Thank again!

…

On 2 Aug 2564 BE 10:31 PM +0700, Dan Ribbens ***@***.***>, wrote: 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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.