Contact Form Code for Vue.js

This is an example of a VueJS contact form, use this contact form with your project after adding your own FormBold API end-point to make it work. Vue.js is a progressive framework for building user interfaces. It combines the simplicity of JavaScript with the power of CSS to build websites faster, more efficiently, and with clean code.

<template>
  <form @submit.prevent="submitForm">
    <div>
      <input
        type="email"
        placeholder="Email"
        name="email"
        v-model="email"
        required
      />
    </div>
    <div>
      <input
        type="text"
        placeholder="Subject"
        name="subject"
        v-model="subject"
        required
      />
    </div>

    <div>
      <textarea
        name="message"
        rows="6"
        placeholder="Type your message"
        v-model="message"
        required
      ></textarea>
    </div>

    <button type="submit">Send Message</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        email: "",
        subject: "",
        message: "",
      };
    },
    methods: {
      async submitForm() {
        const response = await fetch("https://formbold.com/s/unique_form_id", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify({
            email: this.email,
            subject: this.subject,
            message: this.message,
          }),
        });
        const result = await response.json();
        if (response.ok) {
          alert(result.message);
          this.$el.reset();
        } else {
          alert(response.message || "Something went wrong");
        }
      },
    },
  };
</script>

Contact Form for Vue.js

Create a Form to Connect Apps