Skip to Content
Getting Started with kollect

Getting Started with kollect

Get your first form up and running in under 5 minutes.

Table of Contents

  1. Quick Start
  2. Create Your First Form
  3. Integrate with Your Website
  4. View Submissions
  5. Next Steps

Quick Start

1. Sign Up

Visit kollect.app/sign-up  and create your free account.

2. Create a Form

Once logged in, click “Create New Form” in your dashboard.

3. Get Your Form Endpoint

You’ll receive a unique form endpoint like:

https://kollect.app/f/abc123xyz

4. Connect Your HTML Form

Point your form’s action attribute to your kollect endpoint:

<form action="https://kollect.app/f/abc123xyz" method="POST">
  <input type="email" name="email" required>
  <input type="text" name="name" required>
  <textarea name="message"></textarea>
  <button type="submit">Submit</button>
</form>

5. Done! 🎉

Submissions will now appear in your dashboard in real-time.

Create Your First Form

From the Dashboard

  1. Navigate to Dashboard 
  2. Click “Create New Form” button
  3. Enter a form name (e.g., “Contact Form”)
  4. Click “Create”

Your form is created instantly with a unique endpoint URL.

Form Configuration

After creating your form, you can configure:

  • Form Name: Identify your form in the dashboard
  • Redirect URL: Where to send users after submission
  • Honeypot Field: Custom spam protection field name (default: _gotcha)
  • Origin Whitelist: Restrict submissions to specific domains
  • Enable/Disable: Turn form on or off without changing code

Integrate with Your Website

Basic HTML Form

The simplest integration:

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <label>Email</label>
  <input type="email" name="email" required>
 
  <label>Message</label>
  <textarea name="message" required></textarea>
 
  <button type="submit">Send</button>
</form>

With Redirect

Redirect users after submission:

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <input type="hidden" name="_redirect_url" value="https://yoursite.com/thank-you">
 
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>

AJAX Submission

For modern SPA experiences:

async function handleSubmit(e) {
  e.preventDefault();
 
  const formData = new FormData(e.target);
 
  const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
    method: 'POST',
    body: formData
  });
 
  if (response.ok) {
    alert('Form submitted successfully!');
  }
}
 
document.querySelector('form').addEventListener('submit', handleSubmit);

With React

import { useState } from 'react';
 
export default function ContactForm() {
  const [status, setStatus] = useState('');
 
  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('Sending...');
 
    const formData = new FormData(e.target);
 
    try {
      const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
        method: 'POST',
        body: formData
      });
 
      if (response.ok) {
        setStatus('Success! Thank you for your message.');
        e.target.reset();
      } else {
        setStatus('Error! Please try again.');
      }
    } catch (error) {
      setStatus('Error! Please try again.');
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Submit</button>
      {status && <p>{status}</p>}
    </form>
  );
}

View Submissions

Real-Time Dashboard

  1. Navigate to Dashboard → Forms 
  2. Click on your form name
  3. View all submissions in the table

Submissions appear instantly with real-time updates (look for the 🟢 indicator).

Submission Data

Each submission includes:

  • All form field values
  • Timestamp
  • Origin URL
  • User agent information

Filtering & Search

  • Search by any field value
  • Filter by date range
  • Export to CSV (coming soon)

Next Steps

Now that you have your first form working, explore more features:

🛡️ Spam Protection

Learn about honeypot fields and bot detection

🔔 Notifications

Set up email notifications for new submissions

🔗 Webhooks

Send data to other services with webhooks (coming soon)

🎨 Framework Guides

Integration guides for:

📊 Advanced Features

Common Issues

Form Not Submitting

Check:

  • Form action attribute is correct
  • Method is POST not GET
  • Form is enabled in dashboard
  • Origin is whitelisted (if configured)

Submissions Marked as Spam

Possible causes:

  • Honeypot field was filled
  • Check the honeypot field name in settings (default: _gotcha)
  • Ensure real users don’t see or fill the honeypot field

Not Receiving Real-Time Updates

Try:

  • Check the connection indicator (🟢/🔴)
  • Refresh the page
  • Check browser console for errors

Getting Help

Last updated on
ExamplesIntegration Guides