Netlify does not recognize my form with Nuxt

Support
1

I would like to have a simple subscribe form on my blog. I have set it up, but Netlify does not recognize the form.

I have spent two days searching forums and trying everything in the book, still no luck. I would appreciate assistance with getting my form set up.

My netlify site is gleeful-brioche-1c6a9a

2

@JayStoll Did you run through this guide:

Specifically this section:

1 Like
3

Thank you, Nathan.

I notice that I had an @ symbol in my HTML form. I removed that, but the form is still not recognized.

here is the HTML dummy form

<body>
    <form 
    type="hidden"
    name="subscribe"
    method="post" 
    id="myForm" 
    data-netlify="true"
    data-netlify-honeypot="bot-field">
        <input type="hidden" name="form-name" value="subscribe" />
        <p>
            <label>Your Name: <input type="text" name="name" /></label>
        </p>
        <p>
            <label>Your Email: <input type="email" name="email" /></label>
        </p>
        <p>
            <label>Message: <textarea name="message"></textarea></label>
        </p>
            <p>
                <button type="submit">Subscribe</button>
            </p>
    </form>
</body>

and this is what the javascript version looks like.

<form 
            name="subscribe" 
            method="post"
            id="myForm" 
            data-netlify="true"
            data-netlify-honeypot="bot-field"
            @submit.prevent="submitForm">
                <input type="hidden" name="form-name" value="subscribe" />
                <p>
                    <label>Your Name: <input type="text" name="name" /></label>
                </p>
                <p>
                    <label>Your Email: <input type="email" name="email" /></label>
                </p>
                <p>
                    <label>Message: <textarea name="message"></textarea></label>
                </p>
                    <p>
                        <button type="submit">Subscribe</button>
                    </p>
            </form>
4

One issue I see @JayStoll is data-netlify-honeypot="bot-field" is in the form element however there appears no element inside the form with the corresponding name bot-field.

The data-netlify-honeypot="bot-field" and data-netlify="true" attributes are also not required on the JavaScript version of the form.

5

thank you.

I believe the problem is that my HTML form is not being sent to Netlify at all. I am suspicious that my static folder is not configured properly, and I have not been able to figure out how to configure it so that nuxt uses it.

the other problem that I am having is that I’m also getting a 'No match found for location with path “/favicon.ico” This would point to the same issue. Would you have insight on how to hook up the static folder so that pages in it get used correctly?

6

If you can share the public repository you are working with, I can take a look.

7

Hi, @JayStoll. One of the requirements for the forms handling at Netlify is a pure static HTML version of the form (without server-side rendering or client-side javascript).

I don’t see any HTML files deployed and the main page of the site is using server-side rendering. Do you have a pure HTML version of the form somewhere if you download the deploy? If not, that is the issue and you must create an HTML file with the form to resolve this. However, if you do have an HTML file with the form, please let us know.

If there are other questions, please let us know.

1 Like
8

Hi @jasiqli,

You should be able to see the code here. I currently have an /index.html with the dummy form to trigger Netlify. earlier I had this same file in /static/dummy-form. That did not work either.

I believe my problem might be that Nuxt is not using my /static folder properly because the /favicon.ico is also not working and I have not been able to link to any files in the static folder. I don’t know enough about Nuxt to understand how to correct this.

I appreciate any insight.
Thank you.

9

Looking through the .nuxt Directory Structure documentation I suggest the public directory (known as static in Nuxt 2; the project uses Nuxt 3) is the one you want to use. Quote

The public/ directory is directly served at the server root and contains public files that have to keep their names (e.g. robots.txt) or likely won’t change (e.g. favicon.ico).

This is the location you’ll want to put a file that contains the <form> currently in the index.html. The reason—as you can observe by running npm run build and npm run generate locally is Nuxt overwrites the content of index.html removing the <form> and the build system can’t detect what is not there.

So…

  • Rename static to public
  • Create form.html in public which contains the static HTML form for the build system to detect
  • Test locally
  • Commit, push and redeploy
10

Ah… that makes sense. I will take those steps.

Thank you so much.

11

Thank you so much. That fixed both the form and the favicon. Netlify now recognizes the form. It has not yet successfully received any submissions which I have not figured out yet, though.