Basic Installation

Learn how to integrate Kitoform with standard HTML forms.

Overview

Kitoform works with any HTML form by simply changing the action attribute. This makes it perfect for static sites, landing pages, and any website where you need to collect form submissions without managing a backend.

✨ Key Benefits

No server setup required
Works with static sites (Netlify, Vercel, GitHub Pages)
Built-in spam protection
File upload support
Real-time notifications and webhooks

Basic Setup

1. Create Your Form Endpoint

First, create a form endpoint in your Kitoform dashboard. You'll get a unique URL that looks like this:

https://connect.kitoform.com/f/YOUR_ENDPOINT_ID

2. Update Your HTML Form

Replace your form's action attribute with your Kitoform endpoint:

<!-- Basic Contact Form -->
<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
  <div>
    <label for="name">Full Name</label>
    <input type="text" name="name" id="name" required />
  </div>
  
  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" required />
  </div>
  
  <div>
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" />
  </div>
  
  <div>
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="5" required></textarea>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Form Examples

Newsletter Signup

Simple newsletter subscription form:

<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
  <input type="hidden" name="form_type" value="newsletter" />
  
  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" placeholder="Enter your email" required />
  </div>
  
  <div>
    <label>
      <input type="checkbox" name="marketing_consent" value="yes" required />
      I agree to receive marketing emails
    </label>
  </div>
  
  <button type="submit">Subscribe</button>
</form>

Event Registration

Event registration with multiple field types:

<form action="https://connect.kitoform.com/f/YOUR_ENDPOINT_ID" method="POST">
  <input type="hidden" name="form_type" value="event_registration" />
  <input type="hidden" name="event_name" value="Tech Conference 2024" />
  
  <div>
    <label for="full_name">Full Name</label>
    <input type="text" name="full_name" id="full_name" required />
  </div>
  
  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" required />
  </div>
  
  <div>
    <label for="company">Company</label>
    <input type="text" name="company" id="company" />
  </div>
  
  <div>
    <label for="job_title">Job Title</label>
    <input type="text" name="job_title" id="job_title" />
  </div>
  
  <div>
    <label for="ticket_type">Ticket Type</label>
    <select name="ticket_type" id="ticket_type" required>
      <option value="">Select ticket type</option>
      <option value="general">General Admission - $99</option>
      <option value="vip">VIP - $199</option>
      <option value="student">Student - $49</option>
    </select>
  </div>
  
  <div>
    <label for="dietary_requirements">Dietary Requirements</label>
    <textarea name="dietary_requirements" id="dietary_requirements" rows="3"></textarea>
  </div>
  
  <button type="submit">Register Now</button>
</form>

Configuration Options

Hidden Fields

Use hidden fields to add metadata to your submissions:

<!-- Add metadata with hidden fields -->
<input type="hidden" name="form_type" value="contact" />
<input type="hidden" name="source" value="homepage" />
<input type="hidden" name="campaign" value="summer_2024" />

<!-- Add current page URL -->
<input type="hidden" name="page_url" id="page_url" />
<script>
  document.getElementById('page_url').value = window.location.href;
</script>

Redirections

Configure redirections after form submission in your dashboard, or use a hidden field:

<!-- Redirect to a specific page after submission -->
<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />

Custom Response Message

Override the default success message:

<!-- Custom success message -->
<input type="hidden" name="_subject" value="New contact form submission" />
<input type="hidden" name="_response" value="Thanks for your message! We'll get back to you soon." />

Best Practices

✅ Do's

Use meaningful name attributes for form fields
Include proper validation attributes (required, type="email", etc.)
Add hidden fields for tracking and metadata
Test your forms thoroughly before going live

❌ Don'ts

Don't use generic field names like "field1", "input2"
Don't forget to test file uploads if you're using them
Don't expose sensitive information in hidden fields

Next Steps

📁 File Upload

Learn how to handle file uploads in your forms

🛡️ Spam Protection

Add reCAPTCHA and advanced spam filtering

📎 File Uploads

Handle file uploads with your forms

🔗 Webhooks

Connect your forms to external services