JavaScript forms

Use JavaScript to submit your form without a page reload. This gives you full control over validation, error handling, and what happens after a successful submission.

Allowed Origins

Browsers only let your page read Formkove’s response if your site is allowed to. Before submitting with fetch(), open your form’s Settings → Allowed Origins & Redirects and add every origin your form runs on, separated by commas:

https://example.com, https://www.example.com, http://localhost:5173

• A full origin (https://example.com) matches exactly that scheme, host and port.
• A bare domain (example.com) matches it and all its subdomains.
• * allows any site (not recommended).

Without this, the browser reports a CORS error and your fetch() fails, even though the endpoint URL is correct.

HTML

<form id="contact-form">

    <!-- Honeypot spam check (must match configured field name in dashboard settings) -->
    <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

    <input type="text" name="name" placeholder="Your name" required>
    <input type="email" name="email" placeholder="[email protected]" required>
    <textarea name="message" placeholder="What's on your mind?" required></textarea>

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

</form>

<div id="form-result"></div>

JavaScript

const form = document.getElementById('contact-form');
const result = document.getElementById('form-result');

form.addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    result.textContent = "Sending...";

    try {
        const response = await fetch('https://app.formkove.com/api/forms/YOUR_FORM_ID/submissions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        });

        const json = await response.json();

        if (response.ok) {
            result.textContent = "Message sent!";
            form.reset();
        } else {
            result.textContent = json.error || "Something went wrong. Please try again.";
        }
    } catch (err) {
        result.textContent = "Network error. Check your connection and try again.";
    }
});

What the Response Looks Like

A successful submission returns a 201 Created status with the following body:

{
  "success": true,
  "id": "550e8400-e29b-41d4-a716-446655440000"
}

An error response:

{
  "success": false,
  "error": "Form not found"
}

Error Handling Tips

• Show user-friendly messages: don’t dump raw JSON errors to the screen
• Reset on success: form.reset() clears the form so users don’t double-submit
• Handle network failures: the catch block covers timeout and connection errors
• Validate before sending: use HTML5 required attributes or custom JS validation

Why JSON, Not form-data?

The Content-Type: application/json header tells Formkove you’re sending a JSON body. Together with Accept: application/json, it makes Formkove answer with JSON and a status code instead of a redirect, so you get a structured response to work with. Remember to add your site to Allowed Origins.

---

For all response codes and field reference, see API Reference.