Using netlify forms without an actual form?

I’m using react and dynamically render different views to extract multiple different types of data from the user (I don’t have a single/traditional form). After this is collected, there are multiple things that need to be done and the data then encrypted. In the end, I’m left with a single string.

Now, as of right now, I’ve only copied the AJAX example from the docs.This is how it looks:

const response = await fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: encode({
      'form-name': "some random string",
      data: encrypted,
    }),
  });

Now multiple questions here.

  1. Is this even possible?
  2. If it is, I would appreciate some advice as this code only results in a the server responded with a status of 404()
  3. If not, what would you recommend me to do?

As the documentation of forms suggests, you cannot work with dynamically rendered form (more on this below). Netlify Forms can only work with forms that were present during the build time.

So for dynamically rendered forms, you can include a seperate HTML file which will have the form fields the dynamically rendered form will have. But if your fields are also rendering dynamically (no fixed fields), maybe Netlify forms won’t work.

1 Like

Could I perhaps have a hidden form somewhere and then populate that with the data before I want to send it to netlify?

Because in the end I’m technically left with one singular string, that wouldn’t be a terrible drag. Not sure if that would work though?

According to the text here: How to Integrate Netlify’s Form Handling in a React App, as long as Netlify was able to detect the presence of your form and its fields somewhere in your code during the build time, the form would work regardless of where it exists later. I haven’t myself tried it though, it’s just my understanding.

Hi, @DzhideX. I do believe it will be possible to get this working.

The answer @hrishikesh has given is correct. Our forms handler (the backend system that accept the stores the form submission) creates a form handler endpoint by examining all HTML files in the deploy for <form> tags and then creating a form handler for any forms found.

The key thing to remember is that the form handler can only accept <input> fields that are defined in HTML.

So, in your example, you would need a form with an input named “data” with the same form name as will be used in your POST action. That HTML form can even be in a file which no one can access (because, for example, you wrote a redirect rule to block access to it). As long as the file exists in the deploy with that HTML form, the forms processing will create the form hander.

My point being, you don’t need to ever use the HTML form after the deploy. However, it must exist during the deploy because the HTML form is what causing our build system to create the form handler.

Once the handler exists, you can submit form submission using the pure HTML for or using AJAX (or other javascript) to submit a form. The form handler doesn’t know where the submission is coming from. As long as the form submission matches the definition in the HTML form, the submission will be successful.

There is more information about this here:

​Please let us know if there are other question or if it doesn’t work as expected.

Got it to work with a hidden form as suggested!

Thank you both for your guidance and help. Much appreciated!!!