Add forms to HTML

Build with AI

Paste this prompt into your AI coding tool or app builder. It points the agent to the Forminit setup guide, which wires your form and keeps your design. Your form's page in the dashboard has the same prompt with the Form ID filled in.

SETUP PROMPT

Connect my form to Forminit (forminit.com, a form backend). If I have no form yet, ask me which fields I want, then create it.

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Copy prompt

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 (Cloudflare Turnstile, reCAPTCHA, hCaptcha, honeypot)
• File uploads support
• Submission dashboard to manage responses

Requirements:

• Any HTML website
• A Forminit account and Form ID

---

Quick Start

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)

Caution

Public mode is required for client-side usage since there’s no server to securely store API keys.

---

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

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

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

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

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

<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

<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

<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

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)

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>

Note

JSON submission does not support file uploads. Use FormData for forms with file inputs.

---

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

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

1. View your submissions in the Forminit dashboard
2. Set up email notifications for new submissions
3. Add spam protection with Cloudflare Turnstile, reCAPTCHA, or hCaptcha
4. Explore webhook integrations for advanced workflows
5. Hosting a static site? See the form backend for static sites guide