Formspark logo
VuePress logo

A backend for your VuePress forms

Keep full control over the look and feel of your VuePress forms.

VuePress is a minimalistic Vue-powered static site generator.

Getting started with VuePress is simple

Start collecting data in a matter of clicks.

Let Formspark take care of the servers, databases, and analytics.

Set up any form in seconds.

VueOut of the box Vue support

JamstackCompatible with Jamstack

markup
<!-- .vuepress/components/ContactForm.vue -->
<!-- Components in this directory are globally available, so a markdown
     page can use <ContactForm /> directly. -->
<template>
  <form @submit.prevent="onSubmit">
    <textarea v-model="message" />
    <button type="submit" :disabled="submitting">Send</button>
  </form>
</template>

<script>
const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

export default {
  name: "ContactForm",
  data() {
    return {
      message: "",
      submitting: false,
    };
  },
  methods: {
    async onSubmit() {
      this.submitting = true;
      try {
        await fetch(FORMSPARK_ACTION_URL, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify({ message: this.message }),
        });
        this.message = "";
      } finally {
        this.submitting = false;
      }
    },
  },
};
</script>
Tags:
Vue
JavaScript
Jamstack
Start collecting submissions with Formspark

Formspark is a reliable backend for your forms.

Keep full control over the look and feel of your forms.

Let Formspark take care of the rest.

No credit card required