Use <Form> and default content type 'content-type': 'application/x-www-form-urlencoded',

[JackHowa]

Hi! Really into this library but struggling to replicate a native form request and use react hook form validation. The native form request that I'm working on replicating uses the default encoding content type 'application/x-www-form-urlencoded'.

Yet the default for the <Form> component is multipart/form-data; boundary=----WebKitFormBoundary. Then, in the docs, there's a recommendation to opt out of FormData by using content-type json. However, I'm not looking to use json: I'm looking to replicate the url encoded content. Yet, when I use that content type, the request is not adjusted to that type.

Unfortunately, I can't use fetch due to content security restrictions.

I understand that <Form> is a beta component. I've read through similar discussion about <Form> https://github.com/orgs/react-hook-form/discussions/9856

[JackHowa]

I may just have to use some way of validating the form and then allowing the form to submit. is this a pattern within rhf?

I'm now wondering if fixing the content-type usage and using url encoded body would fix this given the csp constraint of using fetch: https://github.com/react-hook-form/react-hook-form/pull/9735/files#diff-3141588a73e90d115af4c8ba465ba5a776a5d401d6d460a49d8f58b1193173d9R141

  function submit(responseObject) {
    const formData = new URLSearchParams();
    formData.append('email', responseObject.data.email);

    fetch('/api/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: formData.toString(),
    });
  }

[Moshyfawn]

Does using the encType prop work for you?

<Form
  encType="application/x-www-form-urlencoded" 
>