Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <ValidationObserver v-slot="{ invalid }" ref="form">
    <template v-if="!subscribed">
      <h4>Let's keep in touch</h4>
      <form action="">
        <div class="footer-form-row">

          <ValidationProvider v-slot="{errors}" rules="required">
            <div class="input-wrapper">
              <input type="email" style="margin-bottom: 12px" v-model="form.email" class="form-control"
                     placeholder="Enter your mail address">

              <span class="validation-err-msg"
                    v-for="err in $getFormInputErrors(errors,'email',form)"
                    v-html="err">
            </span>
            </div>
          </ValidationProvider>

          <div class="btn-wrapper">
            <button type="submit" :disabled="invalid || !form.isReady"
                    @click.prevent="subscribe"
                    class="btn btn-subscribe">
              <b-spinner class="mr-1" small v-if="!form.isReady"></b-spinner>

              Subscribe
            </button>
          </div>
        </div>
      </form>

    </template>

    <h5 v-else class="text-success" v-html="message"></h5>
  </ValidationObserver>
</template>

<script>
export default {
  name: "SubscribeForm",
  data() {
    return {
      form: this.$form({
        email: ''
      }),
      subscribed: '',
      message: ''
    }
  },
  methods: {
    subscribe() {
      this.form.post('orders/subscribe').then(({data}) => {
        this.subscribed = true;
        this.message = data.message;
      }).catch(err => {
        console.log(err);
      });
    }
  }
}
</script>

<style scoped>

</style>