Skip to main content

​
Installation Guide

ZeroForms works with any platform. Choose your integration method below. The simplest way to add ZeroForms to your website.

​
Basic Setup

<script src="https://api.zeroforms.dev/forms.js" data-key="your-access-key"></script>
Add this script to your HTML page’s <body> tag, and ZeroForms will automatically handle all forms.

​
Example

<!DOCTYPE html>
<html>
<body>
  <h1>Contact Form</h1>
  <form>
    <input type="text" name="name" placeholder="Your Name" required />
    <input type="email" name="email" placeholder="Your Email" required />
    <button type="submit">Send</button>
  </form>

  <script src="https://api.zeroforms.dev/forms.js" data-key="zf_your_key"></script>
</body>
</html>

​
2. React

Integrate ZeroForms into your React application.

​
Installation

npm install zeroforms-react

​
Usage

import { useZeroForms } from 'zeroforms-react';

export default function ContactForm() {
  const { submit } = useZeroForms('your-access-key');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const result = await submit(formData);
    if (result.success) {
      alert('Thank you! We received your submission.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <button type="submit">Send</button>
    </form>
  );
}

​
3. Vue.js

Add ZeroForms to your Vue application.

​
Installation

npm install zeroforms-vue

​
Usage

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" type="text" placeholder="Your Name" required />
    <input v-model="form.email" type="email" placeholder="Your Email" required />
    <button type="submit">Send</button>
  </form>
</template>

<script setup>
import { useZeroForms } from 'zeroforms-vue';
import { ref } from 'vue';

const form = ref({ name: '', email: '' });
const { submit } = useZeroForms('your-access-key');

const handleSubmit = async () => {
  const result = await submit(form.value);
  if (result.success) {
    form.value = { name: '', email: '' };
  }
};
</script>

​
4. Next.js

Integrate ZeroForms in your Next.js application.

​
Installation

npm install zeroforms-react

​
API Route

// pages/api/submit.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const response = await fetch('https://api.zeroforms.dev/api/submit', {
    method: 'POST',
    headers: {
      'x-access-key': process.env.ZEROFORMS_ACCESS_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(req.body),
  });

  const data = await response.json();
  res.status(response.status).json(data);
}

​
5. API Direct Integration

Call the ZeroForms API directly from your backend.

​
Submit a Form

curl -X POST https://api.zeroforms.dev/api/submit \
  -H "x-access-key: your-access-key" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "John Doe",
    "email": "john@example.com",
    "message": "Hello!"
  }'
Choose the integration method that best fits your stack and follow the example above.

​
Configuration

​
Basic Script Parameters

<script 
  src="https://api.zeroforms.dev/forms.js" 
  data-key="your-access-key"
  data-form-id="optional-form-id"
  data-webhook-url="optional-webhook-url"
></script>
ParameterTypeDescription
data-keystringYour access key (required)
data-form-idstringSpecific form ID to use
data-webhook-urlstringCustom webhook endpoint

​
Troubleshooting

​
Script not loading?

  • Check that your access key is correct
  • Ensure the script URL is accessible
  • Check browser console for errors

​
Forms not submitting?

  • Verify your form has a submit button
  • Check network tab for failed requests
  • Ensure access key has permission for this form

Still stuck?

Check our troubleshooting guide for more help.