title: Next.js getting validation failed sending form data to contact form 7 API
body: <p>I am trying to send data to the Contact Form 7 API but get an error when sending the form:</p>
  <pre><code>{into: &quot;#&quot;, status: &quot;validation_failed&quot;, message: &quot;One or more fields have an error. Please check and try again.&quot;, posted_data_hash: &quot;&quot;, invalid_fields:
  </code></pre>
  <p>The input fields on the form have all the correct name values e.g. <code>name=&quot;your-name&quot;</code></p>
  <p>I am sending form data like so:</p>
  <pre><code>  async function handleSubmit(e) {
      e.preventDefault();
  
      const formData = {};
  
      Array.from(e.currentTarget.elements).forEach((field) =&gt; {
        if (!field.name) return;
        formData[field.name] = field.value;
      });
  
      await fetch(
        &quot;https://domain.tld/cms/wp-json/contact-form-7/v1/contact-forms/1234/feedback&quot;,
        {
          body: JSON.stringify(formData),
          headers: {
            &quot;content-type&quot;: &quot;multipart/form-data&quot;,
          },
          method: &quot;POST&quot;,
        }
      )
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
          console.log(data);
        })
        .catch((error) =&gt; {
          console.error(&quot;Error:&quot;, error);
        });
    }
  </code></pre>
  <p>I've tried it in Postman and it works and get status message send. I have no idea what I am doing wrong here.</p>
  <p>Here's the form:</p>
  <pre><code>&lt;Form onSubmit={handleSubmit}&gt;
      &lt;Form.Group controlId=&quot;your-name&quot;&gt;
        &lt;Form.Control
          required
          type=&quot;text&quot;
          placeholder=&quot;Your name&quot;
          name=&quot;your-name&quot;
        /&gt;
        &lt;Form.Control.Feedback type=&quot;invalid&quot;&gt;
          Please enter your name
        &lt;/Form.Control.Feedback&gt;
      &lt;/Form.Group&gt;
      &lt;Form.Group controlId=&quot;your-email&quot;&gt;
        &lt;Form.Control
          required
          type=&quot;email&quot;
          placeholder=&quot;Your email address&quot;
          name=&quot;your-email&quot;
        /&gt;
        &lt;Form.Control.Feedback type=&quot;invalid&quot;&gt;
          Please enter your email
        &lt;/Form.Control.Feedback&gt;
      &lt;/Form.Group&gt;
      &lt;Form.Group controlId=&quot;your-message&quot;&gt;
        &lt;Form.Control
          as=&quot;textarea&quot;
          cols={30}
          rows={6}
          placeholder=&quot;Write your message...&quot;
          name=&quot;your-message&quot;
        /&gt;
      &lt;/Form.Group&gt;
      &lt;Button
        type=&quot;submit&quot;
        variant=&quot;primary&quot;
        size=&quot;lg&quot;
      &gt;
        Send Message
        &lt;span&gt;&lt;/span&gt;
      &lt;/Button&gt;
    &lt;/Form&gt;
  </code></pre>