我目前正在使用formsubmit.co的一项服务，该服务使表单能够通过电子邮件接收输入数据，而无需构建后端来存储和发送数据，相反，formsubmit处理存储和发送，在他们的网站上，他们声称你所需要做的就是将action属性设置为指向他们的网站和你的电子邮件，将方法设置为POST&具有所有输入、选择器等的名称…
我用他们的现场演示测试了这项服务，它似乎运行得很好，所以这让我相信问题出在我的表单本身。
应该发生的是，当用户点击提交时，输入数据应该通过电子邮件发送给我，但到目前为止，这还没有发生。
我目前正在使用与Bootstrap集成的Vue.js。这是表格。
形式：
Vue.component('bootstrap-form', {
template: `
<div>
<b-form action="https://formsubmit.co/test0389@gmail.com" 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
})
}
}
})
在与formSubmit交谈后，他们让我尝试了包含AJAX的表单提交。
进入后
$.ajax({
url: "https://formsubmit.co/ajax/your@email.com",
method: "POST",
data: {
name: "FormSubmit",
message: "I'm from Devro LABS"
},
dataType: "json"
});
在我的onSubmit函数中，提交开始工作。