• TOP
  • 記事一覧
  • WordPressを使用したステップフォームの実装ガイド「kintone連携」「条件分岐」についても解説

WordPressを使用したステップフォームの実装ガイド「kintone連携」「条件分岐」についても解説

更新日：2025/01/15

ステップフォームとは？

ステップフォームとは、一つの長いフォームを複数の短いステップに分割して表示する形式のフォームです。以下のような場合に特に効果的です：

  • 複雑な情報収集が必要な場合（保険の見積もり、住宅ローン審査など）
  • ユーザーの心理的負担を軽減したい場合
  • 前の回答によって次の質問が変わる場合（条件分岐）

WordPressでの実装方法

WordPressで実装する場合、固定ページのテンプレートファイルを使用する方法が一般的です。この方法のメリットは：

  1. WordPressの管理画面から内容を編集可能
  2. プラグインとの連携が容易
  3. テーマの機能を活用可能
  4. SEO対策が行いやすい

テンプレートファイルの構成

themes/your-theme/
  ├── page-step1.php  # ステップ1用テンプレート
  ├── page-step2.php  # ステップ2用テンプレート
  └── page-result.php # 結果表示用テンプレート

Step 1: 基本構造（page-step1.php）

<?php
session_start();

if ($_POST) {
    $_SESSION['form'] = $_POST;
    header('Location: page-step2.php');
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>お問い合わせ Step1</title>
    <style>
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .step { margin: 20px 0; }
        .options { margin: 20px 0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="step">Step 1 / 3</div>
        <form method="POST">
            <h2>ご希望のサービスを選択してください</h2>
            <div class="options">
                <label>
                    <input type="radio" name="service" value="web" required>
                    Webサイト制作
                </label>
            </div>
            <button type="submit">次へ</button>
        </form>
    </div>
</body>
</html>

WordPressでの実装のポイント

  1. テンプレート管理
    • Template Nameを指定して固定ページと紐付け
    • WordPressのテンプレート階層を活用
    • header.php、footer.phpの共通部分を活用
  2. WordPressの関数活用
    • get_template_directory()でテーマディレクトリを取得
    • wp_redirect()でリダイレクト
    • home_url()でURLを生成
  3. テーマ構造との統合
    • テーマのCSSクラスを活用
    • 共通の関数やヘルパーを活用
    • プラグインとの連携を考慮

ヘルパー関数の例（form_function.php）

<?php
// フォームデータの取得
function getData($key) {
    return isset($_SESSION['form'][$key]) ? $_SESSION['form'][$key] : '';
}

// エラーメッセージの取得
function getError($key) {
    return isset($_SESSION['error'][$key]) ? $_SESSION['error'][$key] : '';
}

WordPress実装時の注意点

  1. WordPressの設定
    • パーマリンク設定の確認
    • テンプレート名の適切な設定
    • プラグインとの競合確認
  2. セキュリティ対策
    • nonceの利用
    • 権限チェック
    • サニタイズ処理
  3. SEO対策
    • 適切なタイトルとメタ情報
    • ステップページのインデックス制御
    • リダイレクト設定
  4. 保守性
    • テーマ構造との整合性
    • 共通処理の関数化
    • 設定の外部化

WordPress × kintoneの連携

ステップフォームで収集した情報をkintoneに連携することで、お問い合わせ管理や案件管理が効率化できます。

kintone連携のメリット

  1. 案件の進捗管理が容易
  2. 条件に応じた自動振り分け
  3. ステータス管理の自動化
  4. データの一元管理

実装例（kintone連携部分）

<?php
// kintone連携用クラス
class KintoneConnect {
    private $apiToken;
    private $domain;
    private $app_id;

    public function __construct($domain, $app_id, $apiToken) {
        $this->domain = $domain;
        $this->app_id = $app_id;
        $this->apiToken = $apiToken;
    }

    public function createRecord($data) {
        $url = "https://{$this->domain}.cybozu.com/k/v1/record.json";
        
        // APIリクエスト処理
        $curl = curl_init($url);
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
        // ... 以下APIリクエストの詳細設定
    }
}

フォームの条件分岐実装

ステップフォームでは、ユーザーの回答に応じて異なる質問を表示する条件分岐が重要です。

条件分岐の実装パターン

選択による分岐

<?php if ($_SESSION['form']['service'] === 'web'): ?>
    <!-- Webサイト制作向けの質問 -->
<?php elseif ($_SESSION['form']['service'] === 'app'): ?>
    <!-- アプリ開発向けの質問 -->
<?php endif; ?>

予算による分岐

switch($_SESSION['form']['budget']) {
    case 'low':
        // 50万円以下の場合の選択肢
        break;
    case 'mid':
        // 50-100万円の場合の選択肢
        break;
    case 'high':
        // 100万円以上の場合の選択肢
        break;
}

複数条件での分岐

if ($_SESSION['form']['service'] === 'web' && 
    $_SESSION['form']['budget'] === 'high') {
    // 大規模Webサイト向けオプション表示
}

まとめ

ステップフォームは、複雑なフォームをユーザーフレンドリーに実装するための効果的な方法です。シンプルな実装から始めて、必要に応じて機能を追加していくことで、保守性の高い実装が可能です。

特に重要なのは、以下の点です：

  1. ユーザーの負担を考慮した設計
  2. 適切なバリデーション
  3. セッション管理の適切な実装
  4. 分かりやすいUI/UX

これらの点に注意を払いながら実装することで、使いやすいステップフォームを作成することができます。

新規記事

すべてを見る
人気記事ランキング
SEOサンプル記事
話題のキーワードから探す