Form Submission need help!

Duckinm

2 years ago

1 3

• Selected Answer
  

  Duckinm

  2 years ago

  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.
• 

  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
  

  Duckinm

  2 years ago

  Sound good! Looking for it.

  

  Duckinm

  2 years ago

  looking for updates...

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

  

  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?

• 

  Duckinm

  2 years ago

  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.

  1 reply
  

  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.