Netlify forms not working (Astro)

[joaosalgueiro]

Literally copied the code from GitHub - netlify-templates/astro-toolbox: Netlify ❤️ Astro: a simple template to give you the code you need to use Netlify features with Astro. to the app I’m working on at my company and while all works great in my personal account, nothing shows up in Forms in the app I’m working on.

[SamO]

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form.

[joaosalgueiro]

Hey, I have searched a lot about this already and currently asking in the Astro Discord as well, and what I’ve learned till now is that… it’s very much a question of luck and the people who got it fixed don’t know how they got it fixed.

I’ve tried it in an SSG Astro app, SSR, SSR with Hybrid Rendering - form rendered statically, React component, AJAX request… just nothing works.

Deployed at https://mzsite.netlify.app/
Attached an image of my Astro form currently

SSR astro config:

[gualter]

Hi @joaosalgueiro

I’m on my phone so this reply will be a bit limited. My own site (https://gualter.pt) runs on astro and has this form implemented:

        <form 
           name="contact" 
           method="POST" 
           id="my-contact-form" 
           data-netlify="true" 
         > 
           <div class="flex flex-wrap"> 
             <div class="col-span-12 grow form-group mb-2"> 
               <input 
                 type="text" 
                 class="form-control" 
                 name="name" 
                 id="name" 
                 placeholder={t("contact.name")} 
                 required 
               /> 
             </div> 
           </div> 
           <div class="flex flex-wrap"> 
             <div class="col-span-12 grow form-group mb-2"> 
               <input 
                 type="email" 
                 class="form-control" 
                 name="email" 
                 id="email" 
                 placeholder={t("contact.email")} 
                 required 
               /> 
             </div> 
           </div> 
           <div class="flex flex-wrap"> 
             <div class="col-span-12 grow form-group mb-2"> 
               <textarea 
                 class="form-control" 
                 name="message" 
                 placeholder={t("contact.message")} 
                 required></textarea> 
             </div> 
           </div> 
           <p id="submitBtn"> 
             <button type="submit">{t("contact.submitBtn")}</button> 
           </p> 
         </form>

It’s the form present on the contact static page.

Hope this helps!

[joaosalgueiro]

I hoped so too, but nope, literally nothing, the page reloads, nothing on Netlify’s Forms page…
The only way I managed to get something to show up on Netlify’s Forms and in the build logs was deleting the already existing form in Netlify’s forms page and using the homepage form component with “export const prerender = true” (to build the form statically)

This is how the component looks like now for reference:

[luke]

Hi, @joaosalgueiro. The link to the path you shared is not a static HTML file. The HTML is returned by a serverless function. We require a static HTML file with the form definition for the form handler to be created.

You can see the function returning the HTML here:

https://app.netlify.com/sites/mzsite/functions

This means, there is no HTML form for the build system to process. This is a requirement for the Forms feature as covered in our documentation here:

https://docs.netlify.com/forms/setup/

Quoting the very top of that page:

Netlify comes with built-in form handling that’s enabled by default. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.

If you don’t have the form in an HTML file, there is nothing to process during the build and no form handler is created.

The solution for this will be to copy/paste that form into an HTML file and then deploy that HTML file with other static files being deployed with this site.

Visitors do not need to use the HTML form. The HTML file is just used to create the form handler.

The form being returned by your serverless function can be used for submitting the form. Note, it is important to keep the name of the form and the list of inputs in the HTML file in sync with the serverless function version. However, if they do match, the function form will work for the form submission.

Again, though, for the creation of the form handler, a static HTML file containing the <form> tag and its <input> tags is always required.

Also, you can even make a redirect rule that makes the HTML file with the form return a 404 for site visitors. Even if the form HTML file is a 404, the form handler will still be created (again, provided the file exists).

This is because our build system is looking at the static files in the publish directory and not the deployed site itself. For this reason, the HTML file version form does not need to be accessible to visitors. However, it must be in the publish directory when the build completes or our form processing will not see it. Again, when the HTML is generated by a function (which yours is) there is no static HTML file in the publish directory.

​Please let us know if there are other questions or if there are difficulties making the static HTML file with the form.

[delux220]

I followed this, and I am still having trouble getting my Astro contact form working.

I have a /contact2.html in the public directory. The endpoint and the form name match what is in my astro contact form. The html file seems to get the form registered in Netlify, but submissions still do not come in. I’ve experimented with removing the ReCaptcha to see if that was blocking requests. Nothing.

Any assistance is appreciated.

[SamO]

Hi, we’d love to be of help. Can you share the link to your form?

[delux220]

Sure, thanks. here is the link:

Contact

I took out the recaptcha components in case that was the issue.

The only reason Netlify seems to acknowledge the form is because I placed the form also as an HTML file in the public directory:

https://gpkfa.netlify.app/contact2.html

[Melvin]

Hi @delux220,

Doesn’t seem your form is build correctly as I’m unable to enter any information into the fields. Additionally, there’s no submit button.

Could you double check your HTML form and ensure it’s all correct. We have a Support Guide here that may help:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed April 2024 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the requested information that we request at the end of this guide in a new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: such as contact forms and sign-up forms. Seeing as there are many types of forms, im…

[delux220]

I think you clicked the second link which is the HTML file I created just so that Netlify recognizes that there is a form. The first link is the Astro page, with the actual usable form.

Contact

[Melvin]

Hi @delux220,

Thanks for clarifying.

I created a very simple Netlify form on Astro here:

MelvinPeepers/astro-js-form/blob/main/src/pages/index.astro

Note that I can’t see your code.

I do see that the form submits from this page, but doesn’t show a submission in the UI. You’ll want to check out this section of the Support Guide:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed April 2024 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the requested information that we request at the end of this guide in a new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: such as contact forms and sign-up forms. Seeing as there are many types of forms, im…

1. The endpoint that you’re submitting to has a redirect. For example, if you’re using JavaScript to submit like: fetch('/'... and you’ve a redirect rule like /* /foo 301!, submissions would probably not work. This is because the submissions are being “consumed” by the redirect rule. Instead, you cans set the endpoint to any other page that doesn’t redirect. Note: 200 rewrites could cause problems too.
2. You’re using some kind of server side rendering to render the endpoint. For example, if you’re rendering the page that you’ve set as the endpoint using a serverless function, you’d not seem the submission in the UI. The solution is similar, set the endpoint to a page or an asset (like /favicon.ico) that already exists.
3. We use Akismet on all form submissions . If you see the form in the app.netlify.com UI, but you don’t see any of your test submissions, double check that you aren’t sending junk info in your test submissions or submitting over and over again from the same IP address (which looks spammy and may be hidden in our UI until you choose to view the spam submissions ).

[delux220]

My form has the same important parts that your example does.

• data-netlify=“true”
• name=“form-name”
• hidden input for form-name

Can you tell me more about the second point?

Being that this is Astro, the pages are all serverside rendered right? I am submitting via fetch post to “/” and I get a 200 response, but it is the homepage at https://gpkfa.netlify.app/

Update: I also added the astro from the example, and it doesn’t recognize the form. See here

Update 2: I think it could be because my Astro site uses SSR. All of the pages pull dynamic content from an API via SSR. Is there another way I can use Netlify Forms with SSR?

Update 3: The form needs to be a static HTML in /public, so Netlify recognizes the form. Then the endpoint needs to also be a non SSR but a valid path, so that it doesn’t 404. So I have endpoint /great-success and put a great-success empty file in /public. Great success!

[Melvin]

Hi @delux220,

Thanks for following up and letting us know the progress and solution. I just tried the form and see that the test submission was received.

[AnthonyW]

I solved this by adding:

export const prerender = true;

to the astro page to make it SSG instead of SSR. (My output is server.)

Sharing in case it helps anyone else.