Hi all,
I have read about some similar problems with forms using Gridsome, but am unable to determine the issue. I have followed the samples available to me, but with no luck. The form will not show up in the “Forms” section of my site when deployed. It appears Netlify isn’t recognizing the form. At this point, I’m hoping someone can spot something I’m missing.
Here is my form code within the SSG - Gridsome:
<form name="contact" method="POST" v-on:submit.prevent="handleSubmit" action="/thank-you/" 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>
<label for="firstName">First name</label>
<input type="text" placeholder="First Name" name="firstName" v-model="formData.firstName" required>
<label for="lastName">Last name</label>
<input type="text" placeholder="Last Name" name="lastName" v-model="formData.lastName" required>
<label for="email">Work email</label>
<input type="email" placeholder="your.email@company.com" name="email" v-model="formData.email" required>
<button type="submit">Submit</button>
</div>
export default {
data() {
return {
expanded: false,
formData: {}
}
},
methods: {
encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
.join('&')
},
handleSubmit(e) {
fetch('/thank-you/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: this.encode({
'form-name': e.target.getAttribute('name'),
...this.formData,
}),
})
.then(() => this.$router.push('/thank-you/'))
.catch(error => alert(error))
}
}
}
Any insight would be appreciated.