Form not vorking in VueJs 3

Support
1

I am implementing a contact form with in my VueJS 3 app using the Netlify contact form. Following the documentation or videos online it sounds easy, just need to add below tags to the form.
But when I try to “submit” a test form in my [Preformatted text](https://majestic-lily-784120.netlify.app), I get a black page or a 404 error.
My code in Vue looks like something like this:

            <form name="contact-form" action=/thank-you method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
              <input type="hidden" name="contact-form" value="contact-form" />
              <div class="grid md:grid-cols-2 md:gap-6">
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="first_name" id="floating_first_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                    <label for="first_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">First name</label>
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="last_name" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                    <label for="last_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Last name</label>
                </div>
              </div>
              <div class="relative z-0 w-full mb-6 group">
                  <input type="email" name="email" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                  <label for="email" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email address</label>
              </div>

              <div class="relative z-0 w-full mb-6 group">
                  <textarea type="text" name="textarea" id="floating_ext_area" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                  <label for="textarea" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Your Message</label>
              </div>

              <button type="submit" class="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candy font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
            </form>

and in my index.html i’ve done the trick that was in the guide and the form looks something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <form netlify netlify-honeypot="bot-field" hidden name="contact-form" value="contact-form" method="POST" action=/thank-you >
      <input type="text" name="first_name" />
      <input type="text" name="last_name" />
      <input type="text" name="textarea" />
      <textarea name="textarea"></textarea>
      <button type="submit"></button>
    </form>
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

What more can I do?

2

Hi @LaScheggia,

Thanks for reaching out and welcome to Netlify’s Support Forums!

We have a Support Guide on common form issues to help with troubleshooting:

Could you review the guide to see if that helps with resolving the issue?

If you continue to have issues, could you provide us with a link to your live form. Thank you.

3

This is the link to the page where the form is https://majestic-lily-784120.netlify.app/contacts

That guide? I spent 3 hours on it, nothing worked

4

@LaScheggia You’ll need to debug you own code as it is outside the scope of support. I will leave this thread open so other community members can help. It would help if you share your repo.