Troubleshooting Netlify Forms Integration on Kruidenpower.nl

Support
1

Hello everyone,

I have recently set up a form on one of my websites using Netlify Forms, and it worked seamlessly! I was so impressed that I decided to implement this solution across all of my websites. However, I encountered an issue when setting it up on Contact - Kruidenpower – the forms aren’t showing up on the Netlify Forms back-end form page, even though I followed multiple posts addressing similar issues with Netlify not detecting the form.

To simplify the debugging process, I’ve copied the example code provided on the Netlify Forms documentation page:

<form name="contact" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" /></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

This basic form can be found at https://kruidenpower.nl/test. The original form I’m using is slightly more complex and can be viewed at Contact - Kruidenpower. I thought it would be more efficient to debug the simpler form first!

Any insights or suggestions on resolving this issue would be greatly appreciated. Thank you in advance for your help!

2

I see you are using Nuxt for this project. Is this what you have used on other projects as well?

As outlined in the Work with JavaScript-rendered forms documentation the build system won’t find these forms. Thus you need to ensure there is a HTML located in the output directory (the directory that is published) that contains form that matches that of the JS-rendered form.

1 Like
3

Hi @Schotsl,

Thanks for reaching out!

Along with the information provided by @jasiqli, I found and am including this Netlify Forum post from @bksiefert where they include a video on setting up Netlify forms with Nuxt that may help you.

Let us know if you continue to have issues.

1 Like
4

Thank you for the responses! My other website, which had a successful form integration, was also built on Nuxt 3 (the same version as https://kruidenpower.nl). Therefore, I don’t believe that Nuxt 3 is the root cause of the issue. However, to err on the side of caution, I’ve incorporated the code from this Netlify community post: Nuxt 3 Contact Form Solution. I’ve updated the form at Contact - Kruidenpower accordingly, but unfortunately, the form still doesn’t appear in the back-end. :disappointed:

Any further suggestions or insights on how to resolve this issue would be greatly appreciated. Thanks again for your help!

6

You’re using Nuxt in SSR mode - the form doesn’t exist in site’s output, but is generated during the runtime. You need to add a static HTML version of the form in the public directory.

7

I finally found the cause of the issue! It was confusing that one site had an SSR problem while the other didn’t, especially considering that both sites had the same Nuxt configuration.

As it turns out, the difference lay in the package.json file. On the working Nuxt website, the build command was set to nuxt build. However, on the problematic website, it was set to nuxt generate. After changing the command to nuxt build, the issue was resolved!

Thank you to everyone who offered their help! :slight_smile:

1 Like