One challenge with static sites is when you'd like to add a form, since there aren't any databases to handle the submission process as well as an SMTP server to take care of alerting us when someone submits a form. We can solve this with Formspree, a form API service.

A Simple Form - Contact Us

Formspree provides a service for you to add a form onto your static site and delivers an email with the form data to any email you provide.

<template>
  <form @submit.prevent="submitForm">
    <label>
      <span>Email</span>
      <input type="email" name="email" v-model="email" />
    </label>
    <label>
      <span>Message</span>
      <textarea name="message" v-model="message"></textarea>
    </label>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      message: '',
      endpoint: 'https://formspree.io/YOUR-EMAIL@SOMETHING.com',
    }
  },
  methods: {
    async submitForm() {
      const data = {
        email: this.email,
        message: this.message,
      }
      const response = await this.$axios.post(this.endpoint, data)
    },
  },
}
</script>