# VeratekForm Full LLM Documentation

> Serverless HTML form backend API for developers, JAMstack sites, static web pages, and frontend frameworks. Zero backend code required.

VeratekForm is a modern, serverless form processing platform designed to handle contact forms, lead generation, feedback surveys, and application submissions for web developers. It replaces traditional server-side PHP scripts (`mail()`), Node.js email services, and complex database setups with a secure, highly available API endpoint.

---

## 1. Quickstart & Core Concept

When you create a form in the VeratekForm dashboard, you receive a unique endpoint URL in the format:
`https://veratekform.com/f/{form_id}`

To start receiving submissions, simply paste this URL into the `action` attribute of your HTML form and set the method to `POST`. Every input field inside your form MUST have a unique `name` attribute (e.g., `name="email"`, `name="message"`). VeratekForm parses these field names to build the structured JSON payload stored in your dashboard and emailed to your notification addresses.

### 60-Second Quickstart Example
```html
<form action="https://veratekform.com/f/your_form_id" method="POST">
  <label for="name">Full Name</label>
  <input type="text" id="name" name="name" required />

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

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

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

---

## 2. Standard HTML Integration & Custom Redirects

For traditional static websites without client-side JavaScript, VeratekForm natively handles standard form POST submissions. Upon a successful submission, VeratekForm renders a built-in confirmation page by default.

### Custom Redirect URL (`_redirect`)
If you want to redirect your visitors to a custom thank-you page on your own domain after submission, include a hidden input field named `_redirect` inside your form:

```html
<form action="https://veratekform.com/f/your_form_id" method="POST">
  <!-- Redirect user to custom thank you page -->
  <input type="hidden" name="_redirect" value="https://yourdomain.com/thank-you" />

  <input type="text" name="fullName" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="email@domain.com" required />
  <button type="submit">Submit</button>
</form>
```

---

## 3. Frontend Frameworks & JAMstack Integration

In modern JAMstack architectures (React, Next.js, Vue, Astro, Gatsby, SvelteKit), web pages are distributed via CDNs without a backend origin server. VeratekForm acts as the external API backend. You can submit form data asynchronously using the browser `fetch()` API.

### Important AJAX Requirement
When making asynchronous requests via `fetch` or `axios`, always include the HTTP header:
`Accept: application/json`
This instructs VeratekForm to return a structured JSON response (e.g., `{ "success": true, "message": "Submission received" }`) instead of an HTML redirect response.

### React / Next.js Client Component Example
```jsx
'use client';
import { useState } from 'react';

export default function NextjsContactForm() {
  const [status, setStatus] = useState('idle'); // 'idle' | 'submitting' | 'success' | 'error'

  const onSubmit = async (e) => {
    e.preventDefault();
    setStatus('submitting');
    const formData = new FormData(e.currentTarget);

    try {
      const res = await fetch('https://veratekform.com/f/your_form_id', {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json'
        }
      });

      if (res.ok) {
        setStatus('success');
        e.currentTarget.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <input name="email" type="email" required placeholder="Email Address" className="border p-2 rounded w-full" />
      <textarea name="message" required placeholder="Your Message" className="border p-2 rounded w-full" />
      <button type="submit" disabled={status === 'submitting'} className="bg-indigo-600 text-white px-4 py-2 rounded">
        {status === 'submitting' ? 'Sending...' : 'Send Message'}
      </button>
      {status === 'success' && <p className="text-green-600 font-bold">Thank you! Your message has been sent.</p>}
      {status === 'error' && <p className="text-red-600 font-bold">An error occurred. Please try again.</p>}
    </form>
  );
}
```

### Vue 3 Composition API Example
```html
<script setup>
import { ref } from 'vue';

const status = ref('idle');
const formRef = ref(null);

const submitForm = async () => {
  status.value = 'submitting';
  const formData = new FormData(formRef.value);

  const res = await fetch('https://veratekform.com/f/your_form_id', {
    method: 'POST',
    body: formData,
    headers: { 'Accept': 'application/json' }
  });

  if (res.ok) {
    status.value = 'success';
    formRef.value.reset();
  } else {
    status.value = 'error';
  }
};
</script>

<template>
  <form ref="formRef" @submit.prevent="submitForm">
    <input name="email" type="email" required placeholder="Email Address" />
    <textarea name="message" required placeholder="Your Message"></textarea>
    <button type="submit" :disabled="status === 'submitting'">
      {{ status === 'submitting' ? 'Sending...' : 'Send via Vue' }}
    </button>
    <p v-if="status === 'success'">Thank you! Your message has been sent.</p>
  </form>
</template>
```

### Astro (Zero JS / Static Islands) Example
```html
---
// Component: AstroContactForm.astro (Static HTML Mode - Zero JS)
const formEndpoint = "https://veratekform.com/f/your_form_id";
const redirectUrl = "https://yourdomain.com/thank-you";
---

<form action={formEndpoint} method="POST" class="astro-form">
  <input type="hidden" name="_redirect" value={redirectUrl} />
  
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

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

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

  <button type="submit">Submit from Astro</button>
</form>
```

---

## 4. Real-time Webhooks & JSON Payload Schema

VeratekForm allows you to stream submission events in real-time to automation workflows (Slack, Discord, Zapier, Make, n8n) or your custom backend API endpoints via HTTP POST webhooks.

### Webhook JSON Payload Schema
When a valid submission is processed, VeratekForm sends an HTTP POST request to your webhook URL with the following JSON structure:
```json
{
  "event": "submission.created",
  "submission_id": "sub_9876543210abcdef",
  "form_id": "form_1234567890",
  "created_at": "2026-07-04T12:00:00Z",
  "data": {
    "name": "Jane Doe",
    "email": "jane@example.com",
    "subject": "Partnership Inquiry",
    "message": "Hello, we would like to integrate VeratekForm into our platform."
  },
  "metadata": {
    "ip_country": "DE",
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36...",
    "referrer": "https://yourdomain.com/contact"
  }
}
```

---

## 5. AI Spam Protection & CAPTCHA-less Defense

VeratekForm eliminates automated bots and form spam without requiring users to solve visual CAPTCHA puzzles (like reCAPTCHA or hCaptcha), preserving high conversion rates.

### How Spam Protection Works
1. **Behavioral & Semantic Analysis**: Machine learning models analyze submission speed, field semantics, and text entropy to identify synthetic or AI-generated spam.
2. **Honeypot Trap Fields**: You can optionally add hidden honeypot fields that bots fill out automatically but humans cannot see.
3. **IP Reputation & Rate Limiting**: Submissions originating from known spam botnets, proxies, or abusive IP ranges are filtered automatically.
4. **Silent Rejection**: Identified spam is silently discarded or placed into the Spam Inbox in your dashboard without breaking the user experience.

---

## 6. Security, CORS Policies & Allowed Domains

To protect your form endpoints from abuse by unauthorized third-party websites, VeratekForm provides robust domain control features.

### Allowed Domains (CORS Whitelist)
In your form settings, you can define a list of Allowed Domains (e.g., `yourdomain.com`, `staging.yourdomain.com`). Once configured:
- Browsers sending cross-origin AJAX requests from unauthorized domains will be rejected via CORS headers.
- Standard form POST submissions originating from unlisted HTTP `Referer` or `Origin` headers will be blocked with a 403 Forbidden error.

### GDPR & Data Encryption
- **Encryption in Transit**: All API requests and webhook payloads are encrypted using TLS 1.3.
- **Encryption at Rest**: Submission data is stored securely in enterprise PostgreSQL databases.
- **Data Ownership**: Users retain 100% ownership of their data with instant CSV/Excel export tools and one-click deletion capabilities.

---

## 7. Frequently Asked Questions (FAQ)

### Q: How fast can I integrate VeratekForm into my website?
A: You can integrate VeratekForm in under 60 seconds. Simply create an endpoint URL in your dashboard and paste it into the action attribute of your standard HTML form.

### Q: Do I need server-side code like PHP or Node.js to use VeratekForm?
A: No server-side code is required. VeratekForm acts as your serverless form backend, processing POST requests directly from user browsers or frontend JavaScript.

### Q: Why are name attributes required on HTML form inputs?
A: We use the name attribute of each input field as the key in the JSON payload saved to your database and sent via email notifications. Without valid name attributes, form data cannot be indexed or captured.

### Q: Can I use VeratekForm without writing any JavaScript?
A: Yes! Pure HTML forms work natively with VeratekForm. When a user submits the form, the browser automatically sends a POST request to our serverless endpoint without needing any client-side JavaScript.

### Q: How do I redirect users to a custom thank-you page after submission?
A: Include a hidden input field named `_redirect` with your custom URL as the value (e.g., `<input type="hidden" name="_redirect" value="https://yourdomain.com/thanks" />`). VeratekForm will automatically redirect the user upon successful validation.

### Q: How do I handle form submissions asynchronously in React or Next.js?
A: Use the standard browser Fetch API inside your onSubmit event handler with method set to POST, passing a FormData object or JSON body. Set the Accept header to `application/json` to receive a structured JSON response instead of a redirect.

### Q: How does VeratekForm block spam without requiring a CAPTCHA?
A: We analyze submission patterns, IP reputation, honeypot traps, request headers, and content semantics using machine learning models to detect automated bots without creating visual friction for real humans.

### Q: How do I prevent unauthorized websites from submitting data to my form ID?
A: In your form settings, configure the Allowed Domains (CORS whitelist). Once enabled, VeratekForm will reject submissions originating from any domain or origin not explicitly listed.