How to add contact form using Vue.js

Vue.js is a popular framework to create web user interfaces. In this guide we aim to show you how to add a contact form to your Vue.js site.

Create your form endpoint in FormBackend

Go create a login and create a new form endpoint in FormBackend. Give it a name you can remember for example: “Vue Contact Form” or something similar for this tutorial. It can always be changed later and is only used for you to remember your form.

Create a new Vue.js app

We’ll start from scratch by creating a new Vue.js app. If you already have one you can skip to the next step. We’re basically following what the Vue.js quickstart guide does.

Go ahead and run the following in your terminal

npm init vue@latest

This will run create-vue which will ask you some questions about how you want to setup your application. It doesn’t really have any impact on how we’re going to do things with FormBackend so pick whatever you’re the most comfortable with.

Go to the new directory of your app, ours is called formbackend-vuejs

cd formbackend-vuejs

Let’s install the dependencies

npm install

and start the local development web server

npm run dev

If you visit the URL it prints (http://localhost:5173) you should see the following:

Visiting the Vue.js development server URL in your browser

Create a contact form endpoint in FormBackend

Log in to your FormBackend account and visit the forms index page. Go ahead and create a new form and give it a name you can remember it by.

After your form has been created, you’ll see the “Submissions” page which is where new submissions will appear. If you navigate to the “Set up” page you can see the unique URL for your form. We’ll copy that!

Add the contact form to your Vue.js app

Now that we have the form endpoint in FormBackend, we can add the form to your Vue.js app. Open up src/App.vue and replace everything with:

We’ll add the following code to it:

<template>
  <body>
    <h1>Contact Form</h1>
    <form accept-charset="UTF-8" action="https://www.formbackend.com/f/{your-identifier}" method="POST">
      <div class="form-fields">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required>
      </div>

      <div class="form-fields">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
      </div>

      <div class="form-fields">
        <label for="message">Message</label>
        <textarea id="message" name="message" required></textarea>
      </div>

      <button type="submit">Send message</button>
    </form>
  </body>
</template>

<style scoped>
  h1 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .form-fields {
    margin-bottom: 1rem;
  }
  label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 0.9rem;
  }
  input[type="text"], input[type="email"], textarea {
    border: 1px solid #ccc;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 4px;
  }
  body { display: block }
  button[type="submit"] {
    background-color: rgb(67 56 202);
    color: white;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 500;
  }
</style>

Notice the action-attribute on the form itself, you need to paste in the unique URL for your form that you copied in the previous step and paste that in here.

This form only has three fields. But you can add as many or as few as you want. As long as they have a unique name attribute which is how we store them in our database and how you can recognize the fields when you view a submission.

If you visit http://localhost:5173 in your browser you should see your form:

The final contact form

After filling it out and hitting the submit button, you’ll be taken to FormBackend’s submission success page. If you navigate to the Submissions tab for the form you created in FormBackend earlier you should see the submission you just added.

We can do more!

If you want to send an email to the submitter when they submit your form, you can navigate to the Notifications tab and go to the “Send email to the submitter” section. This way you can let the submitter know that you received their submission and will get back to them shortly.

You can also send an email to yourself with the information that was submitted by your form.

Or you can integrate with third-parties using webhooks, integrate with Zapier or send the submissions to Google Sheets or Slack using our native integrations.

Every submission is of course checked to see if it’s spam and if it is it’s filtered into the spam inbox and won’t send you notifications (unless you specifically allow it).