Netlify built-in form handling

Hello, is it possible to have a form like this one below in the URL to work with the Netlify built-in form handling? Thanks in advance…

https://rococo-kelpie-4411df.netlify.app/ (Click Start Here)

Hey there, @leads4life :wave:

Thanks for reaching out! I do not believe that this will be possible. Netlify forms are static, and it looks like you have linked a dynamic form in the URL above. You can read more about this here:

Is there an example of the form mentioned above?

What is interesting is that I got some of the form to work—only the fields with the text boxes and the radio buttons within the form handler.

Hi, @leads4life. The form handling at Netlify works like this (if forms processing is enabled for a site - which is optional):

  • at the end of the build our service looks at all files in the publish directory
  • for all HTML files (determined by file extension) the content is parsed looking for <form> tags
  • if the form meets our requirements a backend form handler is created for all inputs defined in the form

So, the trick in this case would be creating a pure HTML version of the form which defines all possible inputs in the HTML itself. You don’t need to include all inputs for all form submissions (unless you mark an input as required in the HTML definition). It is okay to send only some of the inputs and to omit others. The submission will receive any of the inputs you do send in the submission, provided you defined them in the HTML first.

What doesn’t work is submitting fields (inputs) that are not defined in the HTML. Those fields get ignored and won’t appear in the form submission details at Netlify.

I think this is why some fields work and other do not. Some are in the HTML and others are dynamically generated in the browser by javascript. The dynamic fields are not in the HTML and therefore don’t exist in the build system. They only exist in the browser after it runs the javascript.

So, the trick to getting this to work will be to put a pure HTML version of the form with every field possible somewhere. Note, the HTML form does not have to be visible to the user in the browser. You can even define the form in a completely different HTML file and then block access to that file using redirects. The purpose of the form is only to force Netlify’s build system to create the form handler correctly. It is the build system that builds the form handler. The HTML form therefore does not need to be visible. It can be used for the creation of the backend handler as long as the form is in the deploy somewhere (anywhere).

To summarize:

  • make sure there is a pure HTML form somewhere in the deploy
  • in that HTML form be certain that any and all possible fields (<input> tags ) are created

If there are other questions about this, please let us know.