Create and Deploy Vue.js Forms using Formcarry with Vercel

Create and deploy a project to recieve form submissions using Vue.js, Formcarry, and Vercel.

Formcarry provides HTML Form processing for front-end developers and designers.

In this guide, you will discover how to process a simple contact form on your Vue.js project using Formcarry and then deploy your project with Vercel.

Before getting started, sign up for a free Vercel and Formcarry account.

Step 1: Set Up Your Vue.js Project

Create a Vue.js project using npm, then move into the directory, with the following command:

npx @vue/cli create -d my-formcarry-project && cd my-formcarry-project

After the initialization, run the following command to start a local Vue.js development server:

npm run serve

Step 2: Create Your Form on Formcarry

Visit your Formcarry Dashboard and create a new form.

The Formcarry dashboard with a button to add a new form.

With your form created, you can then copy the form's endpoint from the form overview page. This will be used in your project as a place to send form data.

The Formcarry form overview page showing the form endpoint.

Step 3: Create Your First Form Component

Now that you have a Formcarry form, create a /src/components/Form.vue file in your Vue.js project with the following contents.

Note: Make sure to replace Your-Form-Endpoint with the endpoint that you have copied in Step 2.
<template>
  <div class="form">
    <h1 v-if="!status">Send a message!</h1>

    <form v-if="!status" @submit="sendForm">
      <input
        type="email"
        name="email"
        v-model="email"
        placeholder="Enter your email..."
        required
      />
      <input
        type="text"
        name="message"
        v-model="message"
        placeholder="Leave a message..."
        required
      />
      <button type="submit">Send</button>
    </form>

    <h1 v-if="status === 'success'">Thank you, we got your submission!</h1>
    <h1 v-if="status === 'error'">
      Oops, something went wrong. Please try again.
    </h1>
  </div>
</template>

<script>
  export default {
    name: 'Form',
    data: function() {
      return {
        status: null,
        email: null,
        message: null
      }
    },
    methods: {
      sendForm: function(event) {
        event.preventDefault()

        fetch('Your-Form-Endpoint', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json'
          },
          body: JSON.stringify({ email: this.email, message: this.message })
        })
          .then(response => response.json())
          .then(response => {
            if (response.code === 200) {
              this.status = 'success'
            } else {
              // Formcarry error
              this.status = 'error'
            }
          })
          // network error
          .catch(() => (this.status = 'error'))
      }
    }
  }
</script>

<style>
  .form form {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 480px;
    padding: 24px;
    margin: 0 auto;
  }

  .form input {
    margin-bottom: 16px;
  }
</style>

Creating a Form component in a Vue.js project.

Next, replace your App.vue file's contents with the following:

<template>
  <div id="app">
    <form />
  </div>
</template>

<script>
  import Form from './components/Form.vue'

  export default {
    name: 'App',
    components: {
      Form
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

An App.vue file using the previously created Form.vue component.

Note: Alternatively, use your new Form component in an existing Vue.js file.

You are now ready to deploy your project live and start recieving form submissions.

Step 3: Deploy With Vercel

To deploy your Vue.js + Formcarry app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://my-formcarry-site.now.sh



Written By
Written by nusualabuganusualabuga