I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. According to their website, all you have to do is set the action attribute to point towards their site along with your email, specify the method as POST, and ensure that all inputs and selectors have appropriate names.
After testing the service with their live demo and finding it functioning properly, I suspect that the issue lies within my form itself.
The expected outcome is that when a user clicks submit, the input data should be sent to me via email. However, this hasn't happened yet.
Currently, I am using Vue.js integrated with Bootstrap. Here's the form:
Form:
Vue.component('bootstrap-form', {
template: `
<div>
<b-form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcbdacccb8f8c8786ffd8d2ded6d391dcd0d2">[email protected]</a>" method="POST" role="form" @submit="onSubmit" v-if="show" class="bootstrap-form">
<b-form-group id="input-group-1" label="Your Name:" label-for="input-1">
<b-form-input
name="name"
id="input-1"
v-model="form.name"
placeholder="Enter name"
required
></b-form-input>
</b-form-group>
<b-form-group
id="input-group-2"
label="Email address:"
label-for="input-2"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-2"
name="email"
v-model="form.email"
type="email"
placeholder="Enter email"
required
></b-form-input>
</b-form-group>
<b-form-group
id="input-group-3"
label="Phone Number:"
label-for="input-3"
description="We'll never share your number with anyone else."
>
<b-form-input
id="input-3"
name="telephone"
v-model="form.telephone"
type="tel"
placeholder="XXX-XXX-XXXX"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-4" label="Regarding:" label-for="input-4">
<b-form-select
name="option"
id="input-4"
v-model="form.option"
:options="options"
required
></b-form-select>
</b-form-group>
<b-form-group v-if="this.form.option == 'Shower Doors'" id="input-group-5" label="Shower Doors:" label-for="input-5">
<b-form-select
id="input-5"
name="shower doors"
v-model="form.showerDoor"
:options="showerDoors"
required
></b-form-select>
</b-form-group>
<b-form-group v-if="this.form.option == 'Other'" id="input-group-6" label="Inquiry:" label-for="input-6">
<b-form-textarea
id="input-6"
name="inquiry"
v-model="form.other"
required
></b-form-textarea>
</b-form-group>
<b-form-group v-if="this.form.submitted == true" id="input-group-7"
description="Thank you, We'll be in Contact soon!"
></b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</div>
`,
data() {
return {
form: {
email: '',
name: '',
telephone: '',
option: null,
showerDoor: null,
submitted: false
},
options: [{ text: 'Select One', value: null }, 'Shower Doors', 'Mirrors', 'Glass Shelves', 'Other'],
showerDoors: [{ text: 'Select One', value: null }, 'Sliding Shower & Tub Doors', 'Swinging Shower Doors', 'Splash Guard/Spray Screen', 'Custom'],
show: true
}
},
methods: {
onSubmit(event) {
event.preventDefault()
console.log(JSON.stringify(this.form));
this.form.submitted = true
this.form.email = ''
this.form.name = ''
this.form.telephone = ''
this.form.option = null,
this.form.showerDoor = null,
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
})