Form Submission need help!

default discord avatar
Duckinm
2 years ago
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!

  • default discord avatar
    Duckinm
    2 years ago
  • discord user avatar
    jmikrut
    Payload Team
    2 years ago

    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
    default discord avatar
    Duckinm
    2 years ago

    Sound good! Looking for it.

    default discord avatar
    Duckinm
    2 years ago

    looking for updates...

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

    default discord avatar
    Ontopic
    2 years ago

    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?

  • default discord avatar
    Duckinm
    2 years ago
    1 reply
    discord user avatar
    DanRibbens
    Payload Team
    2 years ago

    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
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.