Netlify forms not working (Astro)

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.

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. :slight_smile:

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:
image

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!

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)
image

This is how the component looks like now for reference:

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.