Skip to Content
Examples

Examples

Real-world code examples for integrating kollect with your projects.

Quick Examples

Basic Contact Form

<!DOCTYPE html>
<html>
<head>
  <title>Contact Us</title>
</head>
<body>
  <h1>Contact Us</h1>
 
  <form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
 
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
 
    <div>
      <label for="message">Message:</label>
      <textarea id="message" name="message" required></textarea>
    </div>
 
    <!-- Honeypot spam protection -->
    <input type="text" name="_gotcha" style="display:none">
 
    <button type="submit">Send Message</button>
  </form>
</body>
</html>

AJAX Submission

<form id="contact-form">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Submit</button>
  <div id="status"></div>
</form>
 
<script>
  document.getElementById('contact-form').addEventListener('submit', async function(e) {
    e.preventDefault();
 
    const status = document.getElementById('status');
    status.textContent = 'Sending...';
 
    const formData = new FormData(this);
 
    try {
      const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
        method: 'POST',
        body: formData
      });
 
      if (response.ok) {
        status.textContent = 'Thank you! Your message has been sent.';
        this.reset();
      } else {
        status.textContent = 'Error! Please try again.';
      }
    } catch (error) {
      status.textContent = 'Error! Please try again.';
    }
  });
</script>

Newsletter Signup

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <h2>Subscribe to our newsletter</h2>
 
  <input
    type="email"
    name="email"
    placeholder="Enter your email"
    required
  >
 
  <input type="hidden" name="_redirect_url" value="https://yoursite.com/thank-you">
  <input type="text" name="_gotcha" style="display:none">
 
  <button type="submit">Subscribe</button>
</form>

Framework Examples

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 (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="email" name="email" required />
        <textarea name="message" required />
        <input type="text" name="_gotcha" style={{ display: 'none' }} />
        <button type="submit">Submit</button>
      </form>
      {status && <p>{status}</p>}
    </div>
  );
}

Vue.js

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input
        v-model="form.email"
        type="email"
        name="email"
        required
      >
 
      <textarea
        v-model="form.message"
        name="message"
        required
      />
 
      <input type="text" name="_gotcha" style="display: none">
 
      <button type="submit">Submit</button>
    </form>
 
    <p v-if="status">{{ status }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        email: '',
        message: ''
      },
      status: ''
    }
  },
  methods: {
    async handleSubmit(e) {
      this.status = '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) {
          this.status = 'Success!';
          this.form.email = '';
          this.form.message = '';
        } else {
          this.status = 'Error! Please try again.';
        }
      } catch (error) {
        this.status = 'Error! Please try again.';
      }
    }
  }
}
</script>

Svelte

<script>
  let status = '';
 
  async function handleSubmit(e) {
    status = '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) {
        status = 'Success!';
        e.target.reset();
      } else {
        status = 'Error!';
      }
    } catch (error) {
      status = 'Error!';
    }
  }
</script>
 
<form on:submit|preventDefault={handleSubmit}>
  <input type="email" name="email" required />
  <textarea name="message" required />
  <input type="text" name="_gotcha" style="display: none" />
  <button type="submit">Submit</button>
</form>
 
{#if status}
  <p>{status}</p>
{/if}

Advanced Examples

Multi-Step Form

<form id="multi-step-form">
  <!-- Step 1: Personal Info -->
  <div class="step" data-step="1">
    <h2>Step 1: Personal Information</h2>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <button type="button" onclick="nextStep(2)">Next</button>
  </div>
 
  <!-- Step 2: Details -->
  <div class="step hidden" data-step="2">
    <h2>Step 2: Additional Details</h2>
    <input type="text" name="company">
    <textarea name="message" required></textarea>
    <button type="button" onclick="prevStep(1)">Back</button>
    <button type="submit">Submit</button>
  </div>
 
  <input type="text" name="_gotcha" style="display:none">
</form>
 
<script>
  function showStep(stepNumber) {
    document.querySelectorAll('.step').forEach(step => {
      step.classList.toggle('hidden', step.dataset.step != stepNumber);
    });
  }
 
  function nextStep(stepNumber) {
    showStep(stepNumber);
  }
 
  function prevStep(stepNumber) {
    showStep(stepNumber);
  }
 
  document.getElementById('multi-step-form').addEventListener('submit', async function(e) {
    e.preventDefault();
 
    const formData = new FormData(this);
 
    const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
      method: 'POST',
      body: formData
    });
 
    if (response.ok) {
      alert('Form submitted successfully!');
    }
  });
</script>
 
<style>
  .hidden { display: none; }
</style>

File Upload Form

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST" enctype="multipart/form-data">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
 
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
 
  <div>
    <label for="resume">Upload Resume:</label>
    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
  </div>
 
  <input type="text" name="_gotcha" style="display:none">
 
  <button type="submit">Submit Application</button>
</form>

Form with Client-Side Validation

<form id="validated-form">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <span class="error" id="email-error"></span>
  </div>
 
  <div>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
    <span class="error" id="phone-error"></span>
  </div>
 
  <div>
    <label for="message">Message (min 10 characters):</label>
    <textarea id="message" name="message" minlength="10" required></textarea>
    <span class="error" id="message-error"></span>
  </div>
 
  <button type="submit">Submit</button>
</form>
 
<script>
  const form = document.getElementById('validated-form');
 
  form.addEventListener('submit', async function(e) {
    e.preventDefault();
 
    // Clear previous errors
    document.querySelectorAll('.error').forEach(el => el.textContent = '');
 
    // Validate
    let isValid = true;
 
    const email = document.getElementById('email').value;
    if (!email.includes('@')) {
      document.getElementById('email-error').textContent = 'Invalid email';
      isValid = false;
    }
 
    const phone = document.getElementById('phone').value;
    if (!/^[0-9]{10}$/.test(phone)) {
      document.getElementById('phone-error').textContent = 'Phone must be 10 digits';
      isValid = false;
    }
 
    const message = document.getElementById('message').value;
    if (message.length < 10) {
      document.getElementById('message-error').textContent = 'Message too short';
      isValid = false;
    }
 
    if (!isValid) return;
 
    // Submit
    const formData = new FormData(this);
 
    const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
      method: 'POST',
      body: formData
    });
 
    if (response.ok) {
      alert('Success!');
      this.reset();
    }
  });
</script>
 
<style>
  .error {
    color: red;
    font-size: 0.875rem;
  }
</style>

Conditional Fields

<form id="conditional-form">
  <div>
    <label>I am a:</label>
    <select name="user_type" id="user_type" onchange="toggleFields()">
      <option value="">Select...</option>
      <option value="individual">Individual</option>
      <option value="business">Business</option>
    </select>
  </div>
 
  <!-- Individual fields -->
  <div id="individual-fields" class="hidden">
    <input type="text" name="full_name" placeholder="Full Name">
  </div>
 
  <!-- Business fields -->
  <div id="business-fields" class="hidden">
    <input type="text" name="company_name" placeholder="Company Name">
    <input type="text" name="tax_id" placeholder="Tax ID">
  </div>
 
  <div>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
  </div>
 
  <button type="submit">Submit</button>
</form>
 
<script>
  function toggleFields() {
    const userType = document.getElementById('user_type').value;
 
    document.getElementById('individual-fields').classList.toggle(
      'hidden',
      userType !== 'individual'
    );
 
    document.getElementById('business-fields').classList.toggle(
      'hidden',
      userType !== 'business'
    );
  }
 
  document.getElementById('conditional-form').addEventListener('submit', async function(e) {
    e.preventDefault();
 
    const formData = new FormData(this);
 
    await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
      method: 'POST',
      body: formData
    });
 
    alert('Form submitted!');
  });
</script>
 
<style>
  .hidden { display: none; }
</style>

Platform-Specific Examples

Webflow

<!-- Add to Webflow Custom Code (Page or Site-wide) -->
<script>
  document.querySelector('form').addEventListener('submit', async function(e) {
    e.preventDefault();
 
    const formData = new FormData(this);
 
    const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
      method: 'POST',
      body: formData
    });
 
    if (response.ok) {
      // Show Webflow success state
      this.style.display = 'none';
      document.querySelector('.w-form-done').style.display = 'block';
    } else {
      // Show Webflow error state
      document.querySelector('.w-form-fail').style.display = 'block';
    }
  });
</script>

WordPress

<?php
// Add to your theme's functions.php or custom plugin
 
function custom_contact_form() {
    ?>
    <form id="contact-form" method="POST">
        <input type="email" name="email" required>
        <textarea name="message" required></textarea>
        <input type="text" name="_gotcha" style="display:none">
        <button type="submit">Submit</button>
        <div id="form-status"></div>
    </form>
 
    <script>
        document.getElementById('contact-form').addEventListener('submit', async function(e) {
            e.preventDefault();
 
            const status = document.getElementById('form-status');
            status.textContent = 'Sending...';
 
            const formData = new FormData(this);
 
            const response = await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
                method: 'POST',
                body: formData
            });
 
            if (response.ok) {
                status.textContent = 'Success!';
                this.reset();
            } else {
                status.textContent = 'Error!';
            }
        });
    </script>
    <?php
}
 
// Use shortcode: [custom_contact_form]
add_shortcode('custom_contact_form', 'custom_contact_form');

More Examples

Browse additional examples:

Last updated on
API ReferenceGetting Started with kollect