JavaScript Form Submission

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.

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="your@email.com" 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": "sub_abc123"
}

An error response:

{
  "success": false,
  "error": "Invalid form ID"
}

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. This is required for JavaScript fetch submissions; it’s what enables proper CORS handling and gives you a structured response to work with.

---

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