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

kintoneを30日間無料で試してみる
下記kintoneのページのヘッダーメニューから「試してみる」を選択

試用環境は全ての機能を30日間使うことができます(契約しなければ30日後に削除される)
KintoneアプリにAPIを利用してWordPressからデータをPOSTする方法
アプリの「設定」画面に移動
- アプリの画面右上の「歯車アイコン」をクリックし、「アプリの設定」を開きます。

APIトークンを作成
- 「APIトークン」という設定項目を探してクリックします。
- 「生成」ボタンを押して、新しいAPIトークンを生成します。
必要な権限を付与
フィールド確認
アプリに追加したフィールドの「フィールドコード」を確認します。

kintone連携 アプリIDの確認
kintoneのアプリ画面を開き、URLを確認してください。
「https://[サブドメイン].cybozu.com/k/」に続いて表示されている末尾の数字がアプリIDです。
必要情報まとめ
リクエストに必要な情報を以下のように整理しておきます。
- サブドメイン:
example.kintone.com
- アプリID
- APIトークン
- フィールドコード
function post_to_kintone() {
// Kintoneの情報を設定
$kintone_subdomain = 'example'; // Kintoneのサブドメイン
$app_id = '123'; // KintoneアプリのID
$api_token = 'your_api_token_here'; // APIトークン
// POSTするデータ
$data = [
'app' => $app_id,
'record' => [
'フィールドコード1' => ['value' => '値1'],
'フィールドコード2' => ['value' => '値2'],
]
];
// cURLを使用してKintoneにPOST
$url = "https://{$kintone_subdomain}.kintone.com/k/v1/record.json";
$headers = [
'X-Cybozu-API-Token: ' . $api_token,
'Content-Type: application/json',
];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
// レスポンスを確認
if ($http_code === 200) {
return 'データ送信成功: ' . $response;
} else {
return 'エラー発生: ' . $response;
}
}
// WordPressのショートコードとして登録
add_shortcode('post_to_kintone', 'post_to_kintone');
上記コードをfunctions.php
に追加したら、以下のショートコードをWordPressの任意のページや投稿に追加します。これで、ショートコードを配置したページにアクセスすると、KintoneにデータをPOSTします。
[post_to_kintone]
以下のコードでは、具体的なフィールドコードと値を埋めた例を示します。
$data = [
'app' => $app_id, // KintoneアプリID
'record' => [
'title' => ['value' => 'テストのタイトル'], // テキストフィールドの値
'date' => ['value' => '2025-01-22'], // 日付フィールドの値 (YYYY-MM-DD形式)
'price' => ['value' => 12345] // 数値フィールドの値
]
];
ステップフォームとは?
ステップフォームとは、一つの長いフォームを複数の短いステップに分割して表示する形式のフォームです。以下のような場合に特に効果的です:
- 複雑な情報収集が必要な場合(保険の見積もり、住宅ローン審査など)
- ユーザーの心理的負担を軽減したい場合
- 前の回答によって次の質問が変わる場合(条件分岐)
WordPressでの実装方法
WordPressで実装する場合、固定ページのテンプレートファイルを使用する方法が一般的です。この方法のメリットは:
- WordPressの管理画面から内容を編集可能
- プラグインとの連携が容易
- テーマの機能を活用可能
- 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での実装のポイント
- テンプレート管理
- Template Nameを指定して固定ページと紐付け
- WordPressのテンプレート階層を活用
- header.php、footer.phpの共通部分を活用
- WordPressの関数活用
get_template_directory()
でテーマディレクトリを取得wp_redirect()
でリダイレクトhome_url()
でURLを生成
- テーマ構造との統合
- テーマの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実装時の注意点
- WordPressの設定
- パーマリンク設定の確認
- テンプレート名の適切な設定
- プラグインとの競合確認
- セキュリティ対策
- nonceの利用
- 権限チェック
- サニタイズ処理
- SEO対策
- 適切なタイトルとメタ情報
- ステップページのインデックス制御
- リダイレクト設定
- 保守性
- テーマ構造との整合性
- 共通処理の関数化
- 設定の外部化
WordPress × kintoneの連携
ステップフォームで収集した情報をkintoneに連携することで、お問い合わせ管理や案件管理が効率化できます。
kintone連携のメリット
- 案件の進捗管理が容易
- 条件に応じた自動振り分け
- ステータス管理の自動化
- データの一元管理
実装例(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サイト向けオプション表示
}
まとめ
ステップフォームは、複雑なフォームをユーザーフレンドリーに実装するための効果的な方法です。シンプルな実装から始めて、必要に応じて機能を追加していくことで、保守性の高い実装が可能です。
特に重要なのは、以下の点です:
- ユーザーの負担を考慮した設計
- 適切なバリデーション
- セッション管理の適切な実装
- 分かりやすいUI/UX
これらの点に注意を払いながら実装することで、使いやすいステップフォームを作成することができます。

-
検索
(例) debug search etc.. -
カテゴリー