{"Get in touch"}

{"Name"}{" "}

{errors.name}

{"Email"}{" "}

{errors.email}

{"Phone"}

{errors.phone}

{"Subject"}{" "}

{errors.subject}

{"Message"}{" "}

<p className="fg-error" id="fg-message-error">{errors.message}</p>
      </div>
      <div className="fg-trap" aria-hidden="true"><label>Leave this empty <input type="text" name="botcheck" tabIndex={-1} autoComplete="off" /></label></div>
      <button type="submit" disabled={busy}>{"Send"}</button>
      <p className="fg-status" role="status">{status}</p>
      <p className="fg-credit"><a href={"https://formgong.com/en/?ref=badge&utm_source=badge&utm_medium=form&utm_campaign=generator"} target="_blank" rel="noopener">{"Form by Formgong"}</a></p>
    </form>
  );
}
```

A single-file component that does the same as the React one.

``` js
<script setup>
import { onMounted, reactive, ref } from "vue";

async function onSubmit(event) {
  const form = event.currentTarget;
  for (const name of Object.keys(errors)) delete errors[name];
  for (const field of form.elements) {
    if (field.name && !(field.name in errors) && !field.checkValidity()) errors[field.name] = field.validationMessage;
  }
  const first = Object.keys(errors)[0];
  if (first) { form.querySelector(`[name="${first}"]`).focus(); return; }
  busy.value = true;
  status.value = "Sending…";
  try {
    const response = await fetch(endpoint, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) });
    const data = await response.json().catch(() => ({}));
    if (data.success === true) {
      form.reset();
      status.value = "Thank you. Your message was sent.";
    } else {
      status.value = data.message || "Could not send. Please try again.";
    }
  } catch {
    status.value = "Could not reach the server. Check your connection and try again.";
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <form id="fg-form" :action="endpoint" method="POST" novalidate :aria-busy="busy" @submit.prevent="onSubmit">
    <h2>Get in touch</h2>
    <input type="hidden" name="access_key" value="fk_your_access_key">
    <input type="hidden" name="_lang" value="en">
    <div class="fg-field">
      <label for="fg-name">Name <span aria-hidden="true">*</span></label>
      <input type="text" id="fg-name" name="name" autocomplete="name" required aria-describedby="fg-name-error" :aria-invalid="errors.name ? 'true' : undefined">
      <p class="fg-error" id="fg-name-error">{{ errors.name }}</p>
    </div>
    <div class="fg-field">
      <label for="fg-email">Email <span aria-hidden="true">*</span></label>
      <input type="email" id="fg-email" name="email" autocomplete="email" required aria-describedby="fg-email-error" :aria-invalid="errors.email ? 'true' : undefined">
      <p class="fg-error" id="fg-email-error">{{ errors.email }}</p>
    </div>
    <div class="fg-field">
      <label for="fg-phone">Phone</label>
      <input type="tel" id="fg-phone" name="phone" autocomplete="tel" aria-describedby="fg-phone-error" :aria-invalid="errors.phone ? 'true' : undefined">
      <p class="fg-error" id="fg-phone-error">{{ errors.phone }}</p>
    </div>
    <div class="fg-field">
      <label for="fg-subject">Subject <span aria-hidden="true">*</span></label>
      <select id="fg-subject" name="subject" required aria-describedby="fg-subject-error" :aria-invalid="errors.subject ? 'true' : undefined"><option value="">Choose…</option><option value="A question">A question</option><option value="A quote">A quote</option><option value="Support">Support</option></select>
      <p class="fg-error" id="fg-subject-error">{{ errors.subject }}</p>
    </div>
    <div class="fg-field">
      <label for="fg-message">Message <span aria-hidden="true">*</span></label>
      <textarea id="fg-message" name="message" required aria-describedby="fg-message-error" :aria-invalid="errors.message ? 'true' : undefined" rows="4">