KirokuForms

Quick Start Guide

The fastest way to add a KirokuForm to your site is our Universal Embed Script. It handles rendering, validation, and secure submission automatically.

Prerequisites

  1. A KirokuForms Account.
  2. Your Form ID (found in your Form Dashboard → Settings).
  3. That's it! No API keys required for standard embeds.

Step 1: Add the Embed Code

Paste this snippet into your HTML wherever you want the form to appear. Update the data-kiroku-form-id with your actual ID.

index.html 
<div id="my-form-container"></div>

<script src="https://www.kirokuforms.com/embed.js" 
        data-kiroku-form-id="REPLACE_WITH_YOUR_FORM_ID" 
        data-kiroku-target="#my-form-container"
        async>
</script>

How it works

The script automatically fetches your form's configuration, renders the standard HTML form into the targeted container, and initializes client-side validation.

Step 2: Test It

  1. Open your HTML page in a browser.
  2. You should see your form rendered immediately.
  3. Fill it out and click submit. You'll see the success message you configured in your dashboard.

Alternative: React Mode

Building a Single Page App? Switch to data-kiroku-mode="react". The script will dynamically load React (if needed) and render a fully interactive component instead of static HTML.

React Mode Embed 
<div id="react-form-root"></div>
<script src="https://www.kirokuforms.com/embed.js" 
        data-kiroku-form-id="REPLACE_WITH_YOUR_FORM_ID"
        data-kiroku-target="#react-form-root"
        data-kiroku-mode="react"
        async>
</script>

Next Steps