Create a Contact Form with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a contact form app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create contact-form

and select all the default options to create the project.

Create the Contact Form

To create the contact form app, we write:

<template>
  <form @submit.prevent="submit" @reset="onReset">
    <div>
      <label>name</label>
      <input v-model="name" />
    </div>

    <div>
      <label>email</label>
      <input v-model="email" />
    </div>

    <div>
      <label>message</label>
      <textarea v-model="message"></textarea>
    </div>

    <button type="submit">submit</button>
    <button type="reset">reset</button>
  </form>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "",
      email: "",
      message: "",
    };
  },
  computed: {
    formValid() {
      const { name, email, message } = this;
      return (
        name.length > 0 &&
        /(.+)@(.+){2,}.(.+){2,}/.test(email) &&
        message.length > 0
      );
    },
  },
  methods: {
    onReset() {
      this.name = "";
      this.email = "";
      this.message = "";
    },
    submit() {
      if (!this.formValid) {
        return;
      }
      if (!localStorage.getItem("messages")) {
        localStorage.setItem("messages", JSON.stringify([]));
      }
      const messages = JSON.parse(localStorage.getItem("messages"));
      const { name, email, message } = this;
      messages.push({
        name,
        email,
        message,
      });
      localStorage.setItem("messages", JSON.stringify(messages));
    },
  },
};
</script>

We create a form with the form element.

And we add the submit event handler with the @submit directive.

The prevent modifier lets us do client-side form submission instead of server-side.

The @reset directive listens to the reset event which is emitted when we click on a button with the type attribute set to reset .

So when we click on the reset button, the reset event is emitted.

We add the inputs with v-model to bind the inputted values to the reactive properties.

The reactive properties are defined in the object we return in the data method.

The button withn type attribute set to submit runs the submit event handler when we click it.

We have the formValid compuyed property to check if each value is valid.

We check the name and message have length bigger than 0.

And that email is an email.

The onReset method resets the reactive properties to empty strings.

The submit method checks if all the values are valid with tyhe formValid computed property.

Then we store the entered form values in local storage.

We check if the local storage entry with key messages is present.

Otherwise, we create it with the initial value being an empty array.

Then we push a new item in it after getting the value with localStorage.getItem and parsing it into an object with JSON.parse .

Then we store the messages array with the message entry pushed into local storage with localStorate.setItem .

Conclusion

We can create a contact form easily with Vue 3 and JavaScript.