Developer Code Examples

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

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

/* Example: Customizing KirokuForms Embed with CSS Variables */
/* This applies if you are using a KirokuForms embed that respects these variables. */
/* Place this in your global CSS or a <style> tag on your page. */

/* :root or a specific wrapper for the KirokuForms embed */
.kiroku-form-custom-theme {
  --kiroku-color-primary: #F97316; /* Human Orange */
  --kiroku-color-text: #334155;    /* Kiroku Slate */
  --kiroku-color-border: #9ca3af;  /* Gray-400 */
  --kiroku-color-background: #F8FAFC; /* Kiroku White */
  --kiroku-border-radius: 0.5rem;  /* 8px */
  --kiroku-font-family: 'Georgia', serif; /* Example custom font */
  --kiroku-font-size: 1.1rem;

  /* Button specific overrides */
  --kiroku-button-text-color: white;
  --kiroku-button-hover-bg-color: #fb923c; /* Lighter orange */
}

<form id="allFieldsForm">
  <div>
    <label for="fullName">Full Name:</label>
    <input type="text" id="fullName" name="fullName" required />
  </div>

  <div>
    <label for="contactEmail">Email Address:</label>
    <input type="email" id="contactEmail" name="contactEmail" required />
  </div>

  <div>
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="100" />
  </div>

  <div>
    <label for="comments">Comments:</label>
    <textarea id="comments" name="comments" rows="5"></textarea>
  </div>

  <div>
    <label for="serviceType">Service Type:</label>
    <select id="serviceType" name="serviceType">
      <option value="">--Please choose an option--</option>
      <option value="support">Support</option>
      <option value="sales">Sales</option>
      <option value="feedback">Feedback</option>
    </select>
  </div>

  <div>
    <p>Preferred Contact Method:</p>
    <input type="radio" id="contactEmailRadio" name="contactMethod" value="email" checked />
    <label for="contactEmailRadio">Email</label><br/>
    <input type="radio" id="contactPhoneRadio" name="contactMethod" value="phone" />
    <label for="contactPhoneRadio">Phone</label>
  </div>

  <div>
    <p>Interests:</p>
    <input type="checkbox" id="interestTech" name="interests" value="technology" />
    <label for="interestTech">Technology</label><br/>
    <input type="checkbox" id="interestDesign" name="interests" value="design" />
    <label for="interestDesign">Design</label>
  </div>

  <div>
    <label for="appointmentDate">Appointment Date:</label>
    <input type="date" id="appointmentDate" name="appointmentDate" />
  </div>

  <button type="submit">Submit Detailed Form</button>
</form>
<script>
  // Basic JS submission logic (similar to quickstart) would go here,
  // targeting "allFieldsForm" and posting to /api/forms/YOUR_FORM_ID/submit
  // with an API Key.
</script>

// React Component Example (generated by customIntegrationExamples.ts)
// Remember to replace YOUR_FORM_ID and YOUR_API_KEY
import React, { useState } from 'react';

interface FormData {
  name: string;
  email: string;
  message: string;
}

interface SubmissionStatus {
  type: 'idle' | 'loading' | 'success' | 'error';
  message?: string;
}

function KirokuFormReactExample() {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    email: '',
    message: ''
  });
  
  const [status, setStatus] = useState<SubmissionStatus>({ type: 'idle' });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus({ type: 'loading' });

    try {
      const response = await fetch('/api/forms/YOUR_FORM_ID/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY',
          'Accept': 'application/json'
        },
        body: JSON.stringify(formData)
      });

      const result = await response.json();

      if (response.ok) {
        setStatus({ 
          type: 'success', 
          message: 'Form submitted successfully!' 
        });
        setFormData({ name: '', email: '', message: '' });
      } else {
        setStatus({ 
          type: 'error', 
          message: result.error?.message || 'Submission failed' 
        });
      }
    } catch (error) {
      setStatus({ 
        type: 'error', 
        message: 'Network error. Please try again.' 
      });
    }
  };

  return (
    <div className="max-w-md mx-auto">
      <form onSubmit={handleSubmit} className="space-y-4">
        <h3 className="text-lg font-semibold">React Form Example</h3>
        
        <div>
          <label htmlFor="name" className="block text-sm font-medium">
            Name:
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            required
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
          />
        </div>

        <div>
          <label htmlFor="email" className="block text-sm font-medium">
            Email:
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            required
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
          />
        </div>

        <div>
          <label htmlFor="message" className="block text-sm font-medium">
            Message:
          </label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            rows={4}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
          />
        </div>

        <button 
          type="submit" 
          disabled={status.type === 'loading'}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
        >
          {status.type === 'loading' ? 'Submitting...' : 'Submit React Form'}
        </button>

        {status.message && (
          <div className={`p-3 rounded-md ${
            status.type === 'success' 
              ? 'bg-green-50 text-green-800' 
              : 'bg-red-50 text-red-800'
          }`}>
            {status.message}
          </div>
        )}
      </form>
    </div>
  );
}

export default KirokuFormReactExample;

// Example: Server-Side Submission with Node.js and Express
// 1. Frontend HTML (posts to your backend)
// <form action="/your-backend-submit-route" method="POST">
//   <input type="email" name="email" />
//   <button type="submit">Submit via Backend</button>
// </form>

// 2. Backend Express Route (e.g., server.js)
const express = require('express');
const fetch = require('node-fetch'); // or another HTTP client
const app = express();
app.use(express.urlencoded({ extended: true })); // To parse form data

const KIROKU_FORM_ID = 'YOUR_FORM_ID';
const KIROKU_API_KEY = 'YOUR_SECRET_API_KEY'; // Keep this secret on the server!

app.post('/your-backend-submit-route', async (req, res) => {
  const submissionData = req.body; // Contains { email: '...' }

  try {
    const kirokuResponse = await fetch(`https://www.kirokuforms.com/api/forms/${KIROKU_FORM_ID}/submit`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${KIROKU_API_KEY}`,
        'Accept': 'application/json'
      },
      body: JSON.stringify(submissionData)
    });

    const result = await kirokuResponse.json();

    if (kirokuResponse.ok) {
      // Handle success (e.g., redirect user, show success message)
      res.status(200).send(`Successfully submitted to KirokuForms: ${JSON.stringify(result)}`);
    } else {
      // Handle error from KirokuForms
      console.error('KirokuForms API Error:', result);
      res.status(kirokuResponse.status).send(`Error submitting to KirokuForms: ${result.error?.message || 'Unknown error'}`);
    }
  } catch (error) {
    console.error('Error in backend submission:', error);
    res.status(500).send('Internal server error.');
  }
});

// app.listen(3000, () => console.log('Your backend server running on port 3000'));