form action isn't responding within vue-bootstrap form

Viewed 534

I am currently using a service by formsubmit.co which enables forms to receive the input data via email without having to build out the backend to store and send data, instead formsubmit handles the storing and sending, on their site they claim all you need to do is set the action attribute to point to their site along with your email, set method to POST & have names for all inputs, selectors etc...

I tested the service with their live demo and it seems to work just fine, so that makes me believe the issue lies somewhere in my form itself.

What should happen, is when user clicks submit, the input data should be emailed to me, but so far that has yet to happen.

I am currently using Vue.js integrated with Bootstrap. Here is the form.

Form:


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
        })
      }
    }
})


1 Answers

After speaking with formSubmit, they led me to try the form submission with the inclusion of AJAX.

After entering

$.ajax({
    url: "https://formsubmit.co/ajax/your@email.com",
    method: "POST",
    data: {
        name: "FormSubmit",
        message: "I'm from Devro LABS"
    },
    dataType: "json"
});

within my onSubmit func, the submissions began to work.

Related