Form submissions not received

Support
,
1

Netlify site https://wvhdesign.netlify.app

The site is generated using Eleventy and is using EleventyEdge for the contact form. Form submissions are not being received though the edge functions run and set a cookie on form submit reading this cookie on all paths. It may be worth noting that the Edge Function logs are still blank and never load.

contact form

<form
  action="/contact/"
  data-netlify="true"
  id="contact-form"
  method="post"
  name="contact"
  netlify-honeypot="bot-field"
>

netlify.toml

[[edge_functions]]
  function = "contact"
  path = "/contact/"

[[edge_functions]]
  function = "eleventy-edge"
  path = "/*"

contact.js correctly sets a cookie and redirects back to the page correctly

context.cookies.set({
  name: 'submitted',
  path: '/',
  value: true,
  expires,
  httpOnly: true,
  sameSite: 'Lax',
  secure: true,
})

return new Response(null, {
  status: 303,
  headers: {
    location: `/#contact`
  }
})

Thinking that the issue may be with the Response code I tried status 302 instead of 303 without success; though I understood 303 to be correct according to the spec as the response changes the method to GET the new location?

I have also tried deleting the contact form using the Netlify UI and redeploying the site though now the form is no longer recognized; there are no longer any active forms shown.

3

Hi @mphstudios

You are returning a Response from the function, so that is the end of it. No further processing happens.

Removing the Response will allow the form to submit. But to do this successfully you will need to have it running on an actual page, e.g. /thanks, or /submission. If the path doesn’t exist, a 404 is returned and the form won’t submit.

4

coelmay, thank you. I am trying to have the page reload when the form is submitted and the second edge function makes the cookie available to render the form or the success message on the same page. Follwing your suggestion I added a /contact/index.html page that has a meta refresh tag, the form action is set to this page, ‘/contact/’ though I am getting a 404. It is not clear however if this is now a cache issue and the CDN or Edge functions are cached. The form is also no longer parsed and is missing after I deleted it using the UI the form is no longer listed in the Active forms or returned using the the Forms API. I have tried disabling and re-enabling forms then deploying again without the form being picked up.

5

I get a 404 on that page too @mphstudios which means you didn’t create that path/file as intended.

If you are wanting the user to land at the same place, better they never leave. Use a fetch request to submit the form and a show a success message somewhere on the page. (See Submit HTML forms with AJAX in Netlify Docs.) This way you can check the form is successfully submitted before setting the cookie. Check out How to Set Cookie and Update Cookie with JavaScript | Tabnine so you don’t need to use an edge function.

I believe that you will need to rename the form in order for Netlify to pick it up.

6

Thank you @coelmay, replacing the edge functions and template tag to render the form on the edge allows the form to be parsed by Netlify (I was able to use the same form name) and submit the form without redirecting to another page.

A client side script to submit the form using fetch POST request is a better solution however it would be nice to see Netlify implement a 303 redirect when the form action URL is missing or explicitly set to be same URL as the referer, to allow submitting a form to its own page URL. This would be in keeping with native browser behavoir when the action not set and with RFC7231

If a server responds to a POST or other non-idempotent request with a 303 See Other response and a value for the location header, the client is expected to obtain the resource mentioned in the location header using the GET method.

Being able to call a method on edge function context to process the form data and send a modified reponse, a 303 in this case, would also allow this to be done in an edge function as I had originally tried.

Thank you again for your help to understand how to achieve this feature.