Netlify forms not working in a Vue/gridsome app

Support
1

On 47hats-gridstone-blog-2019/contactme (https://www.47hats.com/contactme/), I have a simple contact form, based on Netlify code.

Site is gridsome 7.7

On submission I get a 404-Not Found on the page, with this URL: https://www.47hats.com/contactme/POST?name=Joe%20Smith&email=bob.waslsh%40gmail.com&message=this%20is%20a%20test.

I see 0 submissions.

What am I doing wrong?

Cheers,
Bob

2

That seems like an odd submission URL, and indeed, I can see that in our database your “action” parameter is set to “POST” rather than a path, which is the intention. Method must == POST, definitely! But action should be a path at which we’ll accept a POST, and at all other paths, we will 404 on POST requests. I’d suggest at least qualifying it (/POST) if that is your intention - but I don’t feel like it is.

Here’s some more details on how our form submissions work and how to debug them, which would be good reading as you troubleshoot since my spidey sense suggests that you have a misbehaving html representation of that form somewhere in your deploy and as mentioned in this post, the HTML file is how we set up our system to be ready to receive your POSTs :slight_smile:

If that doesn’t help, do please let me know the URL for your html file that contains the form definition (I think it must be somewhere else than the version you linked to, to have that action=POST situation…)

3

Hi there -

  1. I’ve been over the docs, over the discussions here, over your links.
  2. Still does not work: I see an increment in Netlify, but no submission.

Here is my code:

<template>
  <Layout :show-logo="false">
    <div class="post-card content-box" >
      <div class="post-card__header">
        <h3 class="h3__contactme">Got a Question? Fire away!</h3>
        <form name="contact_form" method="POST" action="/thanks/" data-netlify="true" data-netlify-honeypot="bot-field">
        <input type="hidden" name="form-name" value="contact">
        <p hidden=""><label>Don’t fill this out: <input name="bot-field"></label></p>
          <p class="form-top">
            <label class="fld__lbl">Your Name: <input type="text" name="name" id="name" class="fld"/></label>
          </p>
          <p class="form-top">
            <label class="fld__lbl">Your Email: <input type="email" name="email" id="email" class="fld"/></label>
          </p>
          
          <p class="form-top">
            <label class="fld__lbl">Message: <textarea name="message" id="message" rows="5" class="fld__lbl2"></textarea></label>
          </p>

          <p>
            <button class="fld__btn" type="submit">Send</button>
          </p>
        </form>
      </div>
    </div>

  </Layout>
</template>




<script>
export default {
  metaInfo: {
    title: "47hats",
    meta: [{ name: "author", content: "Bob Walsh" }]
  }
};
</script>

<style lang="scss">
.form-top {
  margin-top: 40px;
}

.h3__contactme {
  margin: 0.5rem;
}
.fld {
  width: 300px;
  font-size: 20px;
  max-width: 500px;
  text-align: left;
  margin-top: 10px;
  margin-left: 100px;
  padding: 10 10;
  vertical-align: top;

  &__lbl {
    padding-left: 20px;
    vertical-align: top;
  }

  &__lbl2 {
    margin-left: 110px;
    vertical-align: top;
    width: 400px;
    font-size: 20px;
  }
  &__image2 {
    width: 150px;
    height: 150px;
    margin-bottom: 1em;
    margin-top: 1em;
  }

  &__btn {
    float: right;
    border-width: 1px;
    border-radius: 4px;
    cursor: pointer;
    justify-content: center;
    padding-bottom: calc(0.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: calc(0.5em - 1px);
    text-align: center;
    white-space: nowrap;
    background-color: #48c774;
    border-color: transparent;
    color: #fff;
    margin-right: 100px;
    font-size: 25px;
    margin-bottom: 60px;
  }

  &__site-title {
    font-size: 1.5em;
  }

  &__links {
    margin-top: -0.5em;
    a {
      margin: 0 0.5em;
    }
  }
}
</style>

This is driving me nuts. I appreciate any help. Like a working gridsome/netlify form repo!

4

Solution found!
Ignore everything else when it comes to gridsome except this page: Add a form to Gridsome - Gridsome

2 Likes
5

thanks for sharing your solution @BobWalsh! this is super helpful for other users!

6

My question is what solution did you eventually find here? It’d be nice what particularly worked for you. Thanks.

7

To clarify, the gridsome.org docs do a far better job of explaining exactly what you need, if you are running gridsome as a Static Site Generator. That’s how I use gridsome, but it does introduce some issues. See: https://gridsome.org/docs/guide-forms/

8

Facing same issue here. Did you manage to solve it?

9

Hey @pmfeo,
If you want to share your site url and a link to your form on your live site, we’d be happy to take a look. Is the problem that you’re seeing a 404 when submitting the form?

10

Hi @jen

I solved this issue by including a static version of the form.

HOWEVER I’m facing issues with some form fields not pulling the form data. Please check this topic I opened recently: Form being captured but data from 2 fields is not being pulled

Thanks in advance.

1 Like
11

Thanks for sharing, @pmfeo ! We can continue this conversation in the other thread you opened :slight_smile: