Da li mi treba backend ili Node server za ovu Vue kontakt formu?

Ne. Forma šalje POST direktno na Formhook, pa vaša Vue aplikacija može da ostane čist statički SPA. Buildujte Viteom, deployujte dist/ folder na bilo koji CDN.

Mogu li ovo da koristim sa Pinia / Vue Router stanjem?

Da - snipet je samostalan SFC, ali možete da podignete status stanje u Pinia ili da koristite Vue Router za navigaciju na posebnu rutu zahvalnice posle uspeha.

Šta ako koristim Options API umesto ?

Isti fetch obrazac radi u methods.onSubmit handleru sa data() { return { status: 'idle' } }. Razlikuje se samo sintaksa - Formhooku je svejedno koji Vue stil koristite.

← Svi vodiči

Vodič

Vue kontakt forma (backend nije potreban)

Vue je klijentski framework, ali kontakt formi koju isporučujete ne treba backend na vašoj strani. Koristite običan HTML form action u bilo kom Vue šablonu, ili Vue 3 SFC sa <script setup> i fetch-om za inline UX uspeha/greške.

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 Vue

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

src/components/ContactForm.vue

<!-- src/components/ContactForm.vue -->
<script setup lang="ts">
import { ref } from "vue";

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));

  const res = await fetch("https://formhook.app/f/YOUR_API_KEY", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });

  status.value = res.ok ? "ok" : "error";
  if (res.ok) form.reset();
}
</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

Obična HTML forma radi u svakom Vue šablonu - to je samo markup. Za inline tok uspeha/greške, SFC snipet koristi <script setup> sa status mašinom stanja na ref-u i fetch pozivom ka formhook.app/f/YOUR_API_KEY. Object.fromEntries(new FormData(form)) serijalizovan kao JSON je najčistiji oblik payloada; Formhook prima i form-encoded i multipart.

Š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) - posebno korisno za SPA deploye bez mogućnosti slanja imejlova.

Isporučite svoju Vue 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.

Vue kontakt forma - FAQ

Da li mi treba backend ili Node server za ovu Vue kontakt formu?: Ne. Forma šalje POST direktno na Formhook, pa vaša Vue aplikacija može da ostane čist statički SPA. Buildujte Viteom, deployujte dist/ folder na bilo koji CDN.
Mogu li ovo da koristim sa Pinia / Vue Router stanjem?: Da - snipet je samostalan SFC, ali možete da podignete status stanje u Pinia ili da koristite Vue Router za navigaciju na posebnu rutu zahvalnice posle uspeha.
Šta ako koristim Options API umesto <script setup>?: Isti fetch obrazac radi u methods.onSubmit handleru sa data() { return { status: 'idle' } }. Razlikuje se samo sintaksa - Formhooku je svejedno koji Vue stil koristite.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.