Pređi na sadržaj
FFormhook
← Svi vodiči

Vodič

Nuxt kontakt forma (backend nije potreban)

Nuxtu ne treba serverska ruta da primi unose sa kontakt forme. Ubacite običnu HTML formu u Nuxt stranicu, ili - ako želite klijentski feedback - koristite Vue 3 <script setup> handler sa $fetch i ref-om koji prati status slanja.

Koristite običnu HTML formu

API ruta vam nije potrebna. Forma šalje POST direktno na Formhook i vaš framework nikada ne mora da dodirne unos.

contact.html
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <!-- honeypot: bots fill this; humans don't see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />

  <!-- optional: send users to a thank-you page after a native POST -->
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

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

Ili pošaljite fetch-om u Nuxt

Koristite ovu verziju ako želite klijentska stanja uspeha/greške bez ponovnog učitavanja stranice.

pages/contact.vue
<!-- pages/contact.vue -->
<script setup lang="ts">
type Status = "idle" | "sending" | "ok" | "error";
const status = ref<Status>("idle");

async function onSubmit(e: Event) {
  e.preventDefault();
  status.value = "sending";

  const form = e.target as HTMLFormElement;
  const data = Object.fromEntries(new FormData(form));

  try {
    await $fetch("https://formhook.app/f/YOUR_API_KEY", {
      method: "POST",
      body: data,
    });
    status.value = "ok";
    form.reset();
  } catch {
    status.value = "error";
  }
}
</script>

<template>
  <p v-if="status === 'ok'">Thanks - we'll be in touch.</p>
  <form v-else @submit="onSubmit">
    <input type="email" name="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message" required />
    <input type="text" name="_gotcha" tabindex="-1" hidden />
    <button type="submit" :disabled="status === 'sending'">
      {{ status === "sending" ? "Sending…" : "Send" }}
    </button>
    <p v-if="status === 'error'">Something went wrong. Please try again.</p>
  </form>
</template>

Kako radi

Snipet sa običnom formom radi u svakoj Nuxt stranici (pages/contact.vue) bez odgovarajuće server/api rute. Za klijentska stanja uspeha/greške, drugi snipet koristi $fetch - Nuxtov ugrađeni fetch omotač - i ref koji pokreće status mašinu stanja. Oba idu direktno na formhook.app/f/YOUR_API_KEY.

Šta se dešava dalje

  • Unos stiže u vašu Formhook kontrolnu tablu u roku od sekunde.
  • Push obaveštenje stiže na svaki uređaj na kom ste ga uključili.
  • Odgovorite direktno iz kontrolne table (Pro i više) - bez Nuxt server API-ja ili integracije za transakcione imejlove.

Isporučite svoju Nuxt kontakt formu danas.

Registrujte se besplatno, napravite formu, nalepite API ključ. Pet minuta.

Počnite besplatno

Besplatni paket: 5 formi · 250 unosa mesečno · Bez kreditne kartice.

Nuxt kontakt forma - FAQ

Da li moram da pišem Nitro serversku rutu za formu?
Ne. Forma šalje direktno na Formhook, što znači da vaš Nuxt sajt može da ostane potpuno statički ako to želite. Bez /server/api/contact.ts za održavanje.
Da li ovo radi sa `nuxt generate` (statički sajt)?
Da. Kontakt forma je samo HTML POST - nju ne zanima da li je ostatak vašeg Nuxt sajta renderovan statički ili na edge-u.
Gde da stavim API ključ? Da li je bezbedno commitovati ga?
API ključ je identifikator po formi, a ne tajna u klasičnom smislu - ionako je izložen u HTML-u svakog posetioca. Tretirajte ga kao javni identifikator endpointa i oslonite se na Formhookove limite po formi, CORS listu i Turnstile prekidač za zaštitu.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.