フォームの実装

GleamFormにフォームを接続する方法は非常にシンプルです。HTMLフォームのaction属性に、GleamFormのエンドポイントURLを設定するだけです。

基本的な実装

HTMLフォーム

<form action="https://f.littlegleam.com/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="お名前" required>
  <input type="email" name="email" placeholder="メールアドレス" required>
  <textarea name="message" placeholder="メッセージ" required></textarea>
  <button type="submit">送信</button>
</form>

JavaScript（Fetch API）を使用した実装

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  const response = await fetch('https://f.littlegleam.com/f/your-form-id', {
    method: 'POST',
    headers: {
      'Accept': 'application/json', // JSONレスポンスを要求
    },
    body: formData
  });
  
  const data = await response.json();
  
  if (data.success) {
    alert('送信が完了しました！');
    form.reset();
    
    // カスタムリダイレクトURLがある場合は遷移
    if (data.next) {
      window.location.href = data.next;
    }
  } else {
    alert(data.error || '送信に失敗しました。もう一度お試しください。');
  }
});

フレームワーク別の実装例

React

import { useState } from 'react';

function ContactForm() {
  const [status, setStatus] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const response = await fetch('https://f.littlegleam.com/f/your-form-id', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      setStatus('送信が完了しました！');
      e.target.reset();
    } else {
      setStatus('送信に失敗しました。');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="お名前" required />
      <input type="email" name="email" placeholder="メールアドレス" required />
      <textarea name="message" placeholder="メッセージ" required />
      <button type="submit">送信</button>
      {status && <p>{status}</p>}
    </form>
  );
}

Vue.js

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.name" type="text" name="name" placeholder="お名前" required />
    <input v-model="form.email" type="email" name="email" placeholder="メールアドレス" required />
    <textarea v-model="form.message" name="message" placeholder="メッセージ" required />
    <button type="submit">送信</button>
    <p v-if="status">{{ status }}</p>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  name: '',
  email: '',
  message: ''
});
const status = ref('');

const handleSubmit = async () => {
  const formData = new FormData();
  formData.append('name', form.value.name);
  formData.append('email', form.value.email);
  formData.append('message', form.value.message);
  
  const response = await fetch('https://f.littlegleam.com/f/your-form-id', {
    method: 'POST',
    body: formData
  });
  
  if (response.ok) {
    status.value = '送信が完了しました！';
    form.value = { name: '', email: '', message: '' };
  } else {
    status.value = '送信に失敗しました。';
  }
};
</script>

ファイルアップロード

ファイルアップロードにも対応しています：

<form action="https://f.littlegleam.com/f/your-form-id" method="POST" enctype="multipart/form-data">
  <input type="text" name="name" placeholder="お名前" required>
  <input type="file" name="attachment" accept="image/*,application/pdf">
  <button type="submit">送信</button>
</form>

:::note プラン制限 ファイルアップロード機能はProプランまたはBusinessプランでのみ利用できます。

• Proプラン: 2GBまでのストレージ容量
• Businessプラン: 10GBまでのストレージ容量 無料プランではファイルアップロードはできません。 :::

レスポンス処理

GleamFormでは、リクエストの種類に応じて適切な形式でレスポンスを返します。

レスポンス形式の判定

リクエストが以下のいずれかに該当する場合、JSON形式のレスポンスが返されます：

• X-Requested-With: XMLHttpRequest ヘッダーが含まれている（XHRリクエスト）
• Accept: application/json ヘッダーが含まれている

それ以外の場合は、HTMLページが返されます。

JSONレスポンス（XHR/AJAXリクエスト）

成功時 (200 OK)

{
  "success": true,
  "message": "フォームを送信しました。ありがとうございます。",
  "next": "https://example.com/thanks"
}

• success: 送信が成功した場合は true
• message: 成功メッセージ
• next: フォーム設定で指定されたリダイレクトURL（オプション）

エラー時 (422 Unprocessable Entity)

{
  "error": "データが送信されませんでした。",
  "details": "詳細なエラー情報（オプション）"
}

• error: エラーメッセージ
• details: 追加のエラー情報（オプション）

HTMLレスポンス（通常のフォーム送信）

通常のHTMLフォームから送信した場合（Accept: application/jsonヘッダーがない場合）：

成功時

• フォーム設定でカスタムリダイレクトURLが指定されている場合：そのURLにリダイレクト
• カスタムリダイレクトURLがない場合：成功ページ（/f/{form_id}/success）にリダイレクト（PRGパターン）

エラー時

• エラーページが表示されます
• エラーページには「戻る」ボタンとフォームへのリンクが表示されます

実装例の改善

エラーハンドリングを含む完全な実装例：

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  
  try {
    const response = await fetch('https://f.littlegleam.com/f/your-form-id', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
      },
      body: formData
    });
    
    const data = await response.json();
    
    if (data.success) {
      // 成功時の処理
      alert(data.message);
      form.reset();
      
      // カスタムリダイレクトURLがある場合は遷移
      if (data.next) {
        window.location.href = data.next;
      }
    } else {
      // エラー時の処理
      alert(data.error || '送信に失敗しました。もう一度お試しください。');
    }
  } catch (error) {
    // ネットワークエラーなどの処理
    alert('送信に失敗しました。接続を確認して再度お試しください。');
  }
});

次のステップ

• 通知設定 - メールやSlackへの通知設定
• 自動返信 - 自動返信メールの設定