Embed KirokuForms in WordPress

Prerequisites

• A KirokuForms account with at least one active form
• Your form's embed snippet — copy it from the KirokuForms dashboard under your form's Integrations tab
• A WordPress site where you can add custom HTML (self-hosted WordPress.org or WordPress.com Business plan or higher)

Basic Embed (Block Editor)

The Block Editor (Gutenberg) is the default WordPress editor since WordPress 5.0. Follow these steps to embed your form:

Step 1: Copy Your Embed Snippet

1. Go to your KirokuForms dashboard.
2. Select the form you want to embed.
3. Open the Integrations tab and find the Embed Snippet section.
4. Click Copy to copy the snippet to your clipboard.

The snippet looks like this:

<script
  src="https://www.kirokuforms.com/embed.js"
  data-kiroku-form-id="YOUR_FORM_ID"
  async
></script>

Step 2: Add a Custom HTML Block

1. Open the WordPress page or post where you want to add the form.
2. Click the + block inserter and search for Custom HTML.
3. Add the Custom HTML block.
4. Paste the embed snippet into the block.
5. Click Preview to verify the form renders correctly.
6. Publish or update the page.

Embedding in the Classic Editor

If you use the Classic Editor plugin, switch to the Text tab (not Visual) before pasting:

1. Open the page or post in the Classic Editor.
2. Click the Text tab in the top-right of the editor.
3. Paste the embed snippet where you want the form to appear.
4. Switch back to Visual to verify placement (the form will render as a placeholder in the visual editor).
5. Publish or update the page.

Page Builders (Elementor, Divi, etc.)

Elementor

1. Open the page in Elementor.
2. Drag an HTML widget onto the page.
3. Paste the embed snippet into the HTML code field.
4. Save and preview.

Divi

1. Open the page in Divi Builder.
2. Add a Code module to your section.
3. Paste the embed snippet into the code field.
4. Save and preview.

Other Page Builders

Most page builders have an HTML or code block. Look for modules named Custom HTML, Code, Raw HTML, or Script. Paste the embed snippet there.

Customization Options

The embed script supports several data- attributes to customize behavior and appearance.

Custom Theme Color

Override the primary color to match your WordPress theme:

<style>
  .kiroku-form {
    --kiroku-color-primary: #4f46e5;
  }
</style>
<script
  src="https://www.kirokuforms.com/embed.js"
  data-kiroku-form-id="YOUR_FORM_ID"
  async
></script>

Redirect After Submission

Send users to a thank-you page after they submit the form:

<script
  src="https://www.kirokuforms.com/embed.js"
  data-kiroku-form-id="YOUR_FORM_ID"
  data-kiroku-redirect="https://yoursite.com/thank-you"
  async
></script>

Inline CSS

By default the embed loads styles from an external stylesheet. Use inline CSS if your theme has strict Content Security Policy rules:

<script
  src="https://www.kirokuforms.com/embed.js"
  data-kiroku-form-id="YOUR_FORM_ID"
  data-kiroku-css="inline"
  async
></script>

Target a Specific Container

Render the form inside a specific element instead of the default location:

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

React Mode

For sites that already use React, use React mode for a smaller bundle (~15KB vs ~120KB for standalone HTML mode):

<script
  src="https://www.kirokuforms.com/embed.js"
  data-kiroku-form-id="YOUR_FORM_ID"
  data-kiroku-mode="react"
  async
></script>

How It Works

1. The embed.js script loads asynchronously — it does not block your page from rendering.
2. It fetches your form configuration from the KirokuForms API and renders the form in the page.
3. When a visitor submits the form, the data is sent directly to KirokuForms via HTTPS.
4. All configured webhooks, integrations, and approval workflows fire as usual. The submission payload includes "submittedVia": "embed" in the metadata:

{
  "eventType": "form.submission.new",
  "formId": "frm_abc123xyz789",
  "submissionId": "sub_def456uvw012",
  "timestamp": "2026-04-01T10:30:00Z",
  "data": {
    "name": "Arthur Dent",
    "email": "arthur.dent@example.com",
    "message": "Submitted from a WordPress page"
  },
  "metadata": {
    "submittedVia": "embed"
  }
}

CORS headers are configured to allow embedding from any origin, so the form works on any domain.

Troubleshooting

• Form does not appear: Check that you pasted the snippet in a Custom HTML block (Block Editor) or the Text tab (Classic Editor). The Visual editor strips <script> tags.
• Form appears but does not submit: Open the browser console (F12) and check for errors. The most common cause is an incorrect or inactive form ID.
• "Script not allowed" error: WordPress.com Free and Personal plans block custom scripts. Upgrade to a Business plan or use self-hosted WordPress.
• Content Security Policy (CSP) blocking the script: If your WordPress site has a strict CSP, add https://www.kirokuforms.com to the script-src and connect-src directives. Alternatively, use data-kiroku-css="inline" to avoid the external stylesheet request.
• Form styling conflicts with theme: The embed renders inside a scoped container with the .kiroku-form class. If your theme's CSS overrides form styles, use data-kiroku-css="inline" or add custom CSS overrides using the --kiroku-color-primary variable.
• Form loads slowly: The script is loaded with async, so it does not block page rendering. If the form itself is slow to appear, check your network connection to kirokuforms.com.