--- title: "Add forms to HTML" description: "Add a form backend to any HTML website. Handle submissions, file uploads, and email notifications with no server required." url: https://forminit.com/docs/html/ --- # Add forms to HTML > **Build with AI:** give your AI coding tool your Form ID and this integration skill guide: https://forminit.com/skills/forminit-html/SKILL.md 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](https://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: ```html

``` --- ### Step 3: Add the Forminit SDK Add the SDK script and form handler before ``: ```html ``` That's it! Your form is now connected to Forminit. --- ## Complete HTML Page Example Here's a complete, copy-paste ready HTML page: ```html Contact Us

Contact Us

We'd love to hear from you. Fill out the form below and we'll get back to you soon.

``` --- ## 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](https://forminit.com/docs/form-blocks/). --- ## Complete Examples ### Contact Inquiry Form ```html

``` ### Newsletter Signup ```html

``` ### Feedback Form with Rating ```html
How would you rate your experience?

``` ### Job Application with File Upload ```html

``` --- ## Multiple Forms on One Page If you have multiple forms on the same page, use different Form IDs and element IDs: ```html

``` --- ## JSON Submission (Alternative) Instead of FormData, you can submit structured JSON: ```html ``` > **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:** ```javascript { 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:** ```javascript { 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: ```javascript 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](https://app.forminit.com) in the Forminit dashboard 2. Set up [email notifications](https://forminit.com/docs/email-notifications/) for new submissions 3. Add spam protection with [Cloudflare Turnstile](https://forminit.com/docs/cloudflare-turnstile/), [reCAPTCHA](https://forminit.com/docs/recaptcha/), or [hCaptcha](https://forminit.com/docs/hcaptcha/) 4. Explore [webhook integrations](https://forminit.com/docs/webhooks/) for advanced workflows 5. Hosting a static site? See the [form backend for static sites guide](https://forminit.com/blog/form-backend-for-static-sites/)