Nuxt contact form without a server route

<template>
  <form action="https://smallwerk.com/formlane/api/submit" method="POST">
    <input type="hidden" name="access_key" value="fl_YOUR_ACCESS_KEY" />
    <input type="hidden" name="subject" value="New message from my Nuxt site" />
    <input type="hidden" name="redirect" value="https://example.com/thanks" />

    <!-- Honeypot: hidden from people, leave it unchecked -->
    <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />

    <label for="name">Name</label>
    <input id="name" type="text" name="name" required />

    <label for="email">Email</label>
    <input id="email" type="email" name="email" required />

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Send</button>
  </form>
</template>

<script setup lang="ts">
const ENDPOINT = "https://smallwerk.com/formlane/api/submit";

// Formlane's `message` is always English, so show your own text per error code.
const MESSAGES: Record<string, string> = {
  rate_limited: "Too many messages in a short time. Please try again in a few minutes.",
  limit_reached: "This form can't take more messages this month. Please email us directly.",
  origin_not_allowed: "This form isn't allowed on this website.",
  invalid_key: "This form isn't set up correctly.",
};

const status = ref<"idle" | "sending" | "sent" | "error">("idle");
const errorText = ref("");

async function handleSubmit(event: Event) {
  const form = event.currentTarget as HTMLFormElement;
  status.value = "sending";

  try {
    const res = await fetch(ENDPOINT, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const json = await res.json();

    if (json.success) {
      status.value = "sent";
      form.reset();
    } else {
      status.value = "error";
      errorText.value = MESSAGES[json.error] ?? "Something went wrong. Please try again.";
    }
  } catch {
    status.value = "error";
    errorText.value = "Network error. Please try again.";
  }
}
</script>

<template>
  <p v-if="status === 'sent'">Thanks! Your message has been sent.</p>

  <form v-else :action="ENDPOINT" method="POST" @submit.prevent="handleSubmit">
    <input type="hidden" name="access_key" value="fl_YOUR_ACCESS_KEY" />
    <input type="hidden" name="subject" value="New message from my Nuxt site" />

    <!-- Honeypot: hidden from people, leave it unchecked -->
    <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />

    <label for="name">Name</label>
    <input id="name" type="text" name="name" required />

    <label for="email">Email</label>
    <input id="email" type="email" name="email" required />

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit" :disabled="status === 'sending'">
      {{ status === "sending" ? "Sending…" : "Send" }}
    </button>

    <p v-if="status === 'error'" role="alert">{{ errorText }}</p>
  </form>
</template>

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: { formlaneKey: "fl_YOUR_ACCESS_KEY" },
  },
});

<script setup lang="ts">
const { public: { formlaneKey } } = useRuntimeConfig();
</script>

<template>
  <input type="hidden" name="access_key" :value="formlaneKey" />
</template>

<script setup lang="ts">
import type { FormError, FormSubmitEvent } from "@nuxt/ui";

const ENDPOINT = "https://smallwerk.com/formlane/api/submit";

const state = reactive({ name: "", email: "", message: "" });
type Schema = typeof state;

const botcheck = ref(false); // honeypot, never checked by people
const sent = ref(false);
const errorText = ref("");

function validate(state: Partial<Schema>): FormError[] {
  const errors: FormError[] = [];
  if (!state.name) errors.push({ name: "name", message: "Required" });
  if (!state.email) errors.push({ name: "email", message: "Required" });
  if (!state.message) errors.push({ name: "message", message: "Required" });
  return errors;
}

async function onSubmit(event: FormSubmitEvent<Schema>) {
  const body = new FormData();
  body.append("access_key", "fl_YOUR_ACCESS_KEY");
  body.append("subject", "New message from my Nuxt site");
  for (const [key, value] of Object.entries(event.data)) body.append(key, String(value ?? ""));
  if (botcheck.value) body.append("botcheck", "on");

  try {
    const res = await fetch(ENDPOINT, {
      method: "POST",
      headers: { Accept: "application/json" },
      body,
    });
    const json = await res.json();
    if (json.success) {
      sent.value = true;
    } else {
      errorText.value = json.error === "rate_limited"
        ? "Too many messages in a short time. Please try again in a few minutes."
        : "Something went wrong. Please try again.";
    }
  } catch {
    errorText.value = "Network error. Please try again.";
  }
}
</script>

<template>
  <p v-if="sent">Thanks! Your message has been sent.</p>

  <UForm v-else :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
    <!-- Honeypot: hidden from people, leave it unchecked -->
    <input v-model="botcheck" type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />

    <UFormField label="Name" name="name">
      <UInput v-model="state.name" />
    </UFormField>

    <UFormField label="Email" name="email">
      <UInput v-model="state.email" type="email" />
    </UFormField>

    <UFormField label="Message" name="message">
      <UTextarea v-model="state.message" :rows="5" />
    </UFormField>

    <UButton type="submit">Send</UButton>
    <p v-if="errorText" role="alert">{{ errorText }}</p>
  </UForm>
</template>