No form submission with astro static generator

Support
1

Hi,

I didn’t success on making form working with astro.build.
In order to netlify to see the forma I had to create a dummyform.html in the public directory otherwise form is not seen. With this the form is seen but the message is not received on my dashboard. After submitting, my success page is well seen.

I read How to Integrate Netlify’s Form Handling in a React App and test a lot of differents configurations, not working.

I added the form-name in my form

Did I missed something ?

2

It’ll be hard for anyone to tell based only on the information provided.

Can you link to the form so others can test?

3

Hi,
The form is here : https://omcovering.netlify.app/contact

4

@Roozeec It may not be your issue but the only thing I can see from a quick check is that your dummyform.html doesn’t mention the bot-field:

https://omcovering.netlify.app/dummyform.html

image
image749×183 57.6 KB

I know it’s been processed, but I’d still expect the field to be there as per the documentation:

When Netlify parses the static HTML during post-processing, the build system automatically strips the netlify-honeypot attribute from the <form> tag, leaving the honeypot input field in place.

https://docs.netlify.com/forms/spam-filters/#honeypot-field

5

@nathanmartin Thanks, I added it but still nothing received in my dashboard.

6

@Roozeec Can you check if you see my test submission?

7

Yes, I received it ! I tried on my side, and not receieved … Don’t understand here …

8

@Roozeec Excellent, thanks for confirming.

I submitted that test with a cURL pointed at https://omcovering.netlify.app/dummyform.html

Try adjusting your form so that it submits to /dummyform instead of /contactmessage

9

ok, thanks !, I’ll try later on the day

10

@nathanmartin It is working now, here is what I did, it could help others

  • I renamed my html file in public directory : contactmessage_form.html
  • I set the action form to : contactmessage_form both in the html file and in the astro file

My contactmessage_form.html file is :

image
image1868×786 97 KB

I also added an immediate redirect to a url which take in account my layout where I thanks the user for added a message. If I don’t do this , I have a blank page (normal because no code , only the form code)

Thanks again for your help @nathanmartin !

11

Thanks for coming back and sharing your solution with the community.

12

@Roozeec The only bit that matters is that you post to a route where Netlify actually handles the POST, in this case your previous dummyform.html was a known .html file that actually exists, which is why my suggestion was the actual solution.

You cannot post to any routes which are handled by redirects or any kind of middleware / “server side generation”.

The various steps that you’ve gone through are icing for your project but they’re either superfluous or “not a great way” of handling it.

Instead of the meta refresh usually people using a framework like astro wouldn’t be directly posting to the form, but rather utilizing ajax and then redirecting directly from their JavaScript.