Netlify Form in Vue Not Working

[ruby]

Hello, I’m trying to use Netlify Forms in my Vue project to gather information from my contact page. I have looked all around to see if there’s anything I’m doing wrong but couldn’t find anything. I can see my form just fine in the Netlify dashboard but I don’t get any submissions when I fill out the form.

Here is a picture of my public index.html

This is the code I implemented in my Contact.vue page

This is what my contact page look like

This is what I get when I submit locally

And this is what I get when I submit on my hosted site

[Dennis]

For reference, you won’t be able to test form-handling locally since it requires some things to happen on our end. That said, have you checked out the post about debugging forms here: [Support Guide] Form problems, form debugging, 404 when submitting? If that doesn’t help you fix things, please link to your live form as well as the html version of your form and I’ll take a look.

[ruby]

Whoa, I never thought Dennis himself would respond to my call for help! Thank you for your time, I really appreciate it.

Yes, I have read your article about 404 issues on submit but still couldn’t get things to work. Sorry, I’m not the best programmer around but I’m doing my best.

You can find my form here (still need CSS for looks but just trying to get it working for now).

Here is the HTML version of the form.

[Dennis]

To be honest, I’m not quite sure why it’s not working. One thing to try is using a input field for your textarea instead: <input type="textarea" name="message"/>. Let me know if that makes a difference.

[ruby]

Hello, I’ve made the change suggested above and still can’t get it to work. I do plan on using the default (included) screen when the user submits their information if that helps.

[khalidabuhakmeh]

Hello Ruby,

I think I see the issue. If you view the source of the page and the rendered output of the page, you have two forms: 1 hidden, and the other seems to be injected by Vue at runtime.

If you look at the one that is hidden:

    <form name="simple-form" hidden method="post">
      <input type="hidden" name="form-name" value="simple-form" /><input
        type="text"
        name="name"
      />
      <input type="email" name="email" />
      <input type="textarea" name="message" />
      <button type="submit">Send</button>
    </form>

You will notice a hidden input field that is required by Netlify. This field is used to determine where to post to.

If you look at the injected version, you will notice it is missing.

<form name="simple-form" method="POST" data-netlify="true">
  <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: <input type="textarea" name="message"/></label>
  </p>
  <p><button type="submit">Send</button></p>
</form>

I’m guessing here, but I think you need that hidden input.

[ruby]

YES! Good catch! That was the problem. Thank you so much for answering my question. I really appreciate it!