Customer satisfaction survey

Measure customer satisfaction (CSAT).

Why these fields

Name: Name captures a short, searchable answer but remains optional.
Email: Email provides a validated reply address but remains optional.
How satisfied are you?: How satisfied are you? keeps answers consistent for filtering and routing but remains optional.
Comments: Comments leaves room for context and detail but remains optional.

Fields

NametextEmailemailHow satisfied are you?selectCommentstextarea

Preview

Code

<!-- components/CustomerSatisfactionSurveyForm.vue — auto-imported by Nuxt. -->
<script setup lang="ts">
import { ref } from "vue";

const sent = ref(false);

async function onSubmit(e: Event) {
  const form = e.target as HTMLFormElement;
  const res = await fetch("https://forms.formward.eu/f/your-form-id", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form),
  });
  if (res.ok) {
    sent.value = true;
    form.reset();
  }
}
</script>

<template>
  <p v-if="sent">Thanks! Your message has been sent.</p>
  <form v-else @submit.prevent="onSubmit">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" />
    <label for="satisfaction">How satisfied are you?</label>
    <select name="satisfaction" id="satisfaction">
      <option value="Very satisfied">Very satisfied</option>
      <option value="Satisfied">Satisfied</option>
      <option value="Neutral">Neutral</option>
      <option value="Dissatisfied">Dissatisfied</option>
      <option value="Very dissatisfied">Very dissatisfied</option>
    </select>
    <label for="comments">Comments</label>
    <textarea name="comments" id="comments"></textarea>
    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
    <button type="submit">Send</button>
  </form>
</template>

Customize before publishing

Remove fields you do not need and mark only essential answers as required.
Replace placeholder wording with terms your audience already understands.
Add your privacy notice, retention details and expected response time.
Test keyboard focus, validation errors and the confirmation state on mobile.

Use this with Formward

Create a form, copy your endpoint, and replace https://forms.formward.eu/f/your-form-id in the code above.

Get started free →