Vue.js

Overview

You can create a dynamic contact form using Vue.js with FormsLite.io. This approach allows you to handle form submissions and validations seamlessly without reloading the page.

Example Code

Here is a sample contact form using Vue.js with FormsLite.io. Modify it according to your needs.

Vue.js Setup

<script setup lang="ts">
import { ref } from "vue";

const ACCESS_KEY = "ACCESS_KEY";
const name = ref("");
const email = ref("");
const message = ref("");

const submitForm = async () => {
  const response = await fetch("https://api.formslite.io/submission", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      access_key: ACCESS_KEY,
      name: name.value,
      email: email.value,
      message: message.value,
    }),
  });
  const result = await response.json();
  if (result.success) {
    console.log(result);
  } else {
    console.log("Something went wrong!");
  }
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <input type="text" name="name" v-model="name" required />
    <input type="email" name="email" v-model="email" required />
    <textarea name="message" v-model="message" required rows="3"></textarea>
    <button type="submit">Send Message</button>
  </form>
</template>

Summary

Using Vue.js with FormsLite.io allows you to create an interactive and responsive contact form. The provided example demonstrates how to set up the form, handle submission, and provide feedback to users. Customize the code to fit your specific requirements and enhance your form's functionality.