Skip to content
Forminit Forminit

Forminit + HTML Integration Guide

Copy AI Instructions

Copy and paste into ChatGPT, Claude, Cursor, or your preferred AI assistant. Includes everything needed to generate forms with Forminit.

Forminit works with any plain HTML website through our client-side JavaScript SDK. Simply add a script tag and start collecting form submissions without building a backend.

What you’ll get:

  • Accept form submissions without building a backend
  • Email notifications for new submissions
  • Spam protection (reCAPTCHA, hCaptcha, honeypot)
  • File uploads support
  • Submission dashboard to manage responses

Requirements:

  • Any HTML website
  • A Forminit account and Form ID

Quick Start

Section titled “Quick Start”

Step 1: Create a Form on Forminit

Section titled “Step 1: Create a Form on Forminit”
  1. Sign up or log in at forminit.com
  2. Create a new form
  3. Go to Form Settings → Set authentication mode to Public
  4. Copy your Form ID (e.g., YOUR-FORM-ID)

Step 2: Create Your HTML Form

Section titled “Step 2: Create Your HTML Form”

Add a form to your HTML page with Forminit field naming:

<form id="contact-form">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input 
      type="text" 
      id="firstName" 
      name="fi-sender-firstName" 
      placeholder="John" 
      required 
    />
  </div>

  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input 
      type="text" 
      id="lastName" 
      name="fi-sender-lastName" 
      placeholder="Doe" 
      required 
    />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      name="fi-sender-email" 
      placeholder="john@example.com" 
      required 
    />
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea 
      id="message" 
      name="fi-text-message" 
      placeholder="Your message..." 
      rows="5" 
      required
    ></textarea>
  </div>

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

<p id="form-status"></p>

Step 3: Add the Forminit SDK

Section titled “Step 3: Add the Forminit SDK”

Add the SDK script and form handler before </body>:

<script src="https://forminit.com/sdk/v1/forminit.js"></script>

<script>
  const forminit = new Forminit();
  const FORM_ID = 'YOUR-FORM-ID'; // ← Replace with your Form ID

  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');
  const button = form.querySelector('button[type="submit"]');

  form.addEventListener('submit', async function(event) {
    event.preventDefault();
    
    // Show loading state
    status.textContent = 'Sending...';
    status.className = 'status-loading';
    button.disabled = true;
    button.textContent = 'Sending...';

    const formData = new FormData(form);
    const { data, error } = await forminit.submit(FORM_ID, formData);

    button.disabled = false;
    button.textContent = 'Send Message';

    if (error) {
      status.textContent = error.message;
      status.className = 'status-error';
      return;
    }

    // Success
    status.textContent = 'Message sent successfully!';
    status.className = 'status-success';
    form.reset();
  });
</script>
</body>

That’s it! Your form is now connected to Forminit.

Complete HTML Page Example

Section titled “Complete HTML Page Example”

Here’s a complete, copy-paste ready HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; max-width: 500px; margin: 2rem auto; padding: 0 1rem; }
    .form-group { margin-bottom: 1rem; }
    label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
    input, textarea, select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
    input:focus, textarea:focus, select:focus { outline: none; border-color: #007bff; }
    button { background: #007bff; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
    button:hover { background: #0056b3; }
    button:disabled { background: #ccc; cursor: not-allowed; }
    .status-loading { color: #666; }
    .status-success { color: #28a745; }
    .status-error { color: #dc3545; }
  </style>
</head>
<body>
  <h1>Contact Us</h1>
  <p>We'd love to hear from you. Fill out the form below and we'll get back to you soon.</p>

  <form id="contact-form">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" name="fi-sender-firstName" placeholder="John" required />
    </div>

    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" name="fi-sender-lastName" placeholder="Doe" required />
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="fi-sender-email" placeholder="john@example.com" required />
    </div>

    <div class="form-group">
      <label for="message">Message</label>
      <textarea id="message" name="fi-text-message" placeholder="Your message..." rows="5" required></textarea>
    </div>

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

  <p id="form-status"></p>

  <script src="https://forminit.com/sdk/v1/forminit.js"></script>
  <script>
    const forminit = new Forminit();
    const FORM_ID = 'YOUR-FORM-ID'; // ← Replace with your Form ID

    const form = document.getElementById('contact-form');
    const status = document.getElementById('form-status');
    const button = form.querySelector('button[type="submit"]');

    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      status.textContent = 'Sending...';
      status.className = 'status-loading';
      button.disabled = true;
      button.textContent = 'Sending...';

      const formData = new FormData(form);
      const { data, error } = await forminit.submit(FORM_ID, formData);

      button.disabled = false;
      button.textContent = 'Send Message';

      if (error) {
        status.textContent = error.message;
        status.className = 'status-error';
        return;
      }

      status.textContent = 'Message sent successfully!';
      status.className = 'status-success';
      form.reset();
    });
  </script>
</body>
</html>

Form Field Reference

Section titled “Form Field Reference”

For a complete list of available form blocks (text, email, phone, file, rating, select, etc.) and field naming patterns, see the Form Blocks documentation.

Complete Examples

Section titled “Complete Examples”

Contact Inquiry Form

Section titled “Contact Inquiry Form”
<form id="contact-form">
  <input type="text" name="fi-sender-firstName" placeholder="First name" required />
  <input type="text" name="fi-sender-lastName" placeholder="Last name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  
  <select name="fi-select-subject" required>
    <option value="">Select a subject</option>
    <option value="general">General Inquiry</option>
    <option value="support">Support</option>
    <option value="sales">Sales</option>
    <option value="partnership">Partnership</option>
  </select>
  
  <textarea name="fi-text-message" placeholder="Your message" required></textarea>
  
  <button type="submit">Send</button>
</form>

<p id="form-status"></p>

Newsletter Signup

Section titled “Newsletter Signup”
<form id="newsletter-form">
  <input type="email" name="fi-sender-email" placeholder="Enter your email" required />
  <button type="submit">Subscribe</button>
</form>

<p id="newsletter-status"></p>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  const forminit = new Forminit();
  const FORM_ID = 'YOUR-NEWSLETTER-FORM-ID'; // ← Your newsletter Form ID

  const form = document.getElementById('newsletter-form');
  const status = document.getElementById('newsletter-status');

  form.addEventListener('submit', async function(event) {
    event.preventDefault();
    status.textContent = 'Subscribing...';

    const formData = new FormData(form);
    const { data, error } = await forminit.submit(FORM_ID, formData);

    if (error) {
      status.textContent = error.message;
      return;
    }

    status.textContent = 'Thank you for subscribing!';
    form.reset();
  });
</script>

Feedback Form with Rating

Section titled “Feedback Form with Rating”
<form id="feedback-form">
  <input type="email" name="fi-sender-email" placeholder="Email (optional)" />
  
  <fieldset>
    <legend>How would you rate your experience?</legend>
    <label><input type="radio" name="fi-rating-experience" value="1" /> 1</label>
    <label><input type="radio" name="fi-rating-experience" value="2" /> 2</label>
    <label><input type="radio" name="fi-rating-experience" value="3" /> 3</label>
    <label><input type="radio" name="fi-rating-experience" value="4" /> 4</label>
    <label><input type="radio" name="fi-rating-experience" value="5" /> 5</label>
  </fieldset>
  
  <textarea name="fi-text-feedback" placeholder="Tell us more (optional)"></textarea>
  
  <button type="submit">Submit Feedback</button>
</form>

<p id="feedback-status"></p>

Job Application with File Upload

Section titled “Job Application with File Upload”
<form id="application-form">
  <input type="text" name="fi-sender-firstName" placeholder="First name" required />
  <input type="text" name="fi-sender-lastName" placeholder="Last name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  <input type="tel" name="fi-sender-phone" placeholder="Phone (+1234567890)" />
  
  <input type="url" name="fi-url-linkedin" placeholder="LinkedIn profile URL" />
  <input type="url" name="fi-url-portfolio" placeholder="Portfolio URL" />
  
  <select name="fi-select-position" required>
    <option value="">Select position</option>
    <option value="frontend">Frontend Developer</option>
    <option value="backend">Backend Developer</option>
    <option value="fullstack">Full Stack Developer</option>
    <option value="designer">UI/UX Designer</option>
  </select>
  
  <label>
    Resume (PDF)
    <input type="file" name="fi-file-resume" accept=".pdf" required />
  </label>
  
  <label>
    Cover Letter (optional)
    <input type="file" name="fi-file-cover_letter" accept=".pdf,.doc,.docx" />
  </label>
  
  <textarea name="fi-text-why_join" placeholder="Why do you want to join us?"></textarea>
  
  <button type="submit">Submit Application</button>
</form>

<p id="application-status"></p>

Multiple Forms on One Page

Section titled “Multiple Forms on One Page”

If you have multiple forms on the same page, use different Form IDs and element IDs:

<!-- Contact Form -->
<form id="contact-form">
  <input type="text" name="fi-sender-firstName" placeholder="First name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  <textarea name="fi-text-message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>
<p id="contact-status"></p>

<!-- Newsletter Form -->
<form id="newsletter-form">
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  <button type="submit">Subscribe</button>
</form>
<p id="newsletter-status"></p>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  const forminit = new Forminit();

  // Contact form handler
  const contactForm = document.getElementById('contact-form');
  const contactStatus = document.getElementById('contact-status');
  
  contactForm.addEventListener('submit', async function(e) {
    e.preventDefault();
    contactStatus.textContent = 'Sending...';
    
    const { error } = await forminit.submit('YOUR-CONTACT-FORM-ID', new FormData(contactForm));
    
    if (error) {
      contactStatus.textContent = error.message;
      return;
    }
    
    contactStatus.textContent = 'Message sent!';
    contactForm.reset();
  });

  // Newsletter form handler
  const newsletterForm = document.getElementById('newsletter-form');
  const newsletterStatus = document.getElementById('newsletter-status');
  
  newsletterForm.addEventListener('submit', async function(e) {
    e.preventDefault();
    newsletterStatus.textContent = 'Subscribing...';
    
    const { error } = await forminit.submit('YOUR-NEWSLETTER-FORM-ID', new FormData(newsletterForm));
    
    if (error) {
      newsletterStatus.textContent = error.message;
      return;
    }
    
    newsletterStatus.textContent = 'Subscribed!';
    newsletterForm.reset();
  });
</script>

JSON Submission (Alternative)

Section titled “JSON Submission (Alternative)”

Instead of FormData, you can submit structured JSON:

<script>
  const forminit = new Forminit();
  const FORM_ID = 'YOUR-FORM-ID';
  
  const form = document.getElementById('contact-form');
  
  form.addEventListener('submit', async function(event) {
    event.preventDefault();
    
    const { data, error } = await forminit.submit(FORM_ID, {
      blocks: [
        {
          type: 'sender',
          properties: {
            email: document.getElementById('email').value,
            firstName: document.getElementById('firstName').value,
            lastName: document.getElementById('lastName').value,
          },
        },
        {
          type: 'text',
          name: 'message',
          value: document.getElementById('message').value,
        },
      ],
    });
    
    if (error) {
      document.getElementById('form-status').textContent = error.message;
      return;
    }
    
    document.getElementById('form-status').textContent = 'Message sent!';
    form.reset();
  });
</script>

Handling Form Submission Response

Section titled “Handling Form Submission Response”

The SDK returns { data, redirectUrl, error }:

On success:

{
  data: {
    hashId: "7LMIBoYY74JOCp1k",      // Unique submission ID
    date: "2026-01-01 21:10:24",      // Timestamp
    blocks: {                          // Submitted values
      sender: {
        firstName: "John",
        lastName: "Doe",
        email: "john@example.com"
      },
      message: "Hello from my website!"
    }
  },
  redirectUrl: "https://forminit.com/thank-you"
}

On error:

{
  error: {
    error: "ERROR_CODE",
    code: 400,
    message: "Human-readable error message"
  }
}

Redirect After Submission

Section titled “Redirect After Submission”

If you prefer to redirect users to a thank-you page:

form.addEventListener('submit', async function(event) {
  event.preventDefault();

  const formData = new FormData(form);
  const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);

  if (error) {
    status.textContent = error.message;
    return;
  }

  // Redirect to your thank-you page
  window.location.href = '/thank-you.html';
  // Or use Forminit's redirect URL:
  // window.location.href = redirectUrl;
});

Next Steps

Section titled “Next Steps”
  1. View your submissions in the Forminit dashboard
  2. Set up email notifications for new submissions
  3. Explore webhook integrations for advanced workflows