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 renders a fully interactive component on the client, with a small Preact runtime bundled in (no external React download), 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>

Multiple Forms on One Page

Add as many forms as you need. Repeat the snippet once per form, each with its own data-kiroku-form-id and a data-kiroku-target container. Every form stays isolated, with its own state and submissions, and the script loads only once.

Two Forms on One Page 
<div id="form-one"></div>
<script src="https://www.kirokuforms.com/embed.js"
        data-kiroku-form-id="FORM_ONE_ID"
        data-kiroku-target="#form-one"
        async></script>

<div id="form-two"></div>
<script src="https://www.kirokuforms.com/embed.js"
        data-kiroku-form-id="FORM_TWO_ID"
        data-kiroku-target="#form-two"
        async></script>

Building a single-page app with many forms? Load the script once and call KirokuEmbed.init() for each form instead. The examples page shows both patterns.

Next Steps