Like what we’re doing? Star us on GitHub!

Form Submission need help!

Duckinm
last year
1 3

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!

  • Duckinm
    last year
  • jmikrut
    Payload Team
    last year

    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.

    3 replies
    Duckinm
    last year

    Sound good! Looking for it.

    Duckinm
    last year

    looking for updates...

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

    Ontopic
    last year

    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
    last year
    1 reply
    DanRibbens
    Payload Team
    last year

    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.

Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More