问题描述
我目前使用的业务通过formsubmit.co使形式通过电子邮件接收该输入数据,而不必建立了后端来存储和发送数据,而不是formsubmit手柄的存储和发送,在其网站上他们声称所有你需要做的是与您的电子邮件,设置方法为POST和对所有输入名称,选择等...
沿设置action属性指向其网站我与他们现场演示测试服务,它似乎工作就好了,这样使我相信在某个地方我窗体本身的问题所在。
应该发生什么,当用户点击提交时,输入的数据应该通过电子邮件发送给我,但至今这还没有发生。
我目前正在使用与 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','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 函数中,提交开始工作。