SPIRALで作成した複数ステップにまたがるフォームでは、
通常ユーザーは一つ前のステップにしか戻ることができません。
例えば、ステップ4からステップ1に直接戻るような、任意のステップへの移動は標準機能では提供されていません。
また、セキュリティ上の理由から、特定のステップURLへの直接POSTも許可されていません。
この記事では、JavaScriptを使用してこの制約を回避し、任意のステップへ戻る機能を実装する方法を紹介します。
このスクリプトを導入することで、ユーザーは確認画面などから入力内容を修正したいステップへ直接戻ることができ、
フォームの利便性が大幅に向上します。
注意点
・ SPIRALの今後のアップデートにより、この方法が利用できなくなる可能性があります。
・ スクリプト内の設定値 `pageName` は、ご自身のページ設定（ページの識別名）に合わせて変更する必要があります。
実装の概要
今回のコードは、ブラウザの `localStorage` とSPIRALの標準の「戻る」ボタンの動作を組み合わせて、任意のステップへの移動を実現します。処理の流れは以下の通りです。
2. JavaScriptがクリックを検知し、戻りたい先のステップ番号（例: "1"）を `localStorage` に保存します。
3. スクリプトがSPIRALの標準の「戻る」ボタンを自動的にクリックし、1つ前のステップへの画面遷移を開始します。
4. ページが読み込まれるたびにスクリプトが実行され、`localStorage` に保存された目標のステップ番号と現在のステップ番号を比較します。
5. 目標のステップに到達するまで、自動で「戻る」ボタンのクリックを繰り返します。
6. 目標のステップに到達したら、`localStorage` の情報を削除し、自動戻り処理を停止します。
実装手順
実装は、戻るボタンを設置するHTMLコードと、実際の処理を行うJavaScriptコードをフォームに設定するだけで完了します。
1. HTMLコード
任意のステップに戻るためのボタンを、確認画面などの戻る操作の起点としたいページに設置します。ポイントは、戻りたいステップ番号を `data-back-to` 属性に指定することです。
<!-- ★ step1に戻る -->
<button type="button"
class="sp-go-back-step"
data-back-to="1">
step1に戻る
</button>
<!-- ★ step2に戻る -->
<button type="button"
class="sp-go-back-step"
data-back-to="2">
step2に戻る
</button>
<!-- ★ step3に戻る -->
<button type="button"
class="sp-go-back-step"
data-back-to="3">
step3に戻る
</button>
2. JavaScriptコード
以下のJavaScriptコードを、複数ステップフォームの全ページで読み込まれるように設定します。
SPIRALのページ設定のJSタブなどに配置するのが一般的です。
pageNameを適切に設定してください。
これは、フォームを設置するページの識別名を表す値です。
//設定値
const pageName = "poststep"; //ページの識別名
// ===============================
// 現在のステップ番号をURLから取得
// ===============================
function getCurrentStepFromUrl() {
var params = new URLSearchParams(window.location.search || '');
var stepId = params.get('_ifbs-' + pageName); // 例: s4_Step4
console.log(stepId);
if (!stepId) return null;
var m = stepId.match(/^s(\d+)_/); // s4_Step4 → 4 抜き出し
if (!m) return null;
var n = parseInt(m[1], 10);
return isNaN(n) ? null : n;
}
// ===============================
// 自動戻り処理
// ===============================
function spiralAutoBackIfNeeded() {
var currentStep = getCurrentStepFromUrl();
if (!currentStep) return;
var targetStep = null;
try {
var v = localStorage.getItem('spiralBackToStep');
if (v != null && v !== '') {
targetStep = parseInt(v, 10);
}
} catch (e) {}
if (!targetStep || isNaN(targetStep)) return;
// 目的ステップに到達した or それより前に行ったら終了
if (currentStep <= targetStep) {
try { localStorage.removeItem('spiralBackToStep'); } catch (e) {}
return;
}
// まだ後ろにいる → previousを押す
var prevBtn = document.querySelector('.sp-form-prev-button');
if (prevBtn) {
prevBtn.click(); // SPIRALの戻るPOSTを発動
} else {
// ボタンが無い場合は諦める
try { localStorage.removeItem('spiralBackToStep'); } catch (e) {}
}
}
// ===============================
// step4 の戻る専用ボタンを拾う
// ===============================
document.addEventListener('DOMContentLoaded', function () {
// step1/2/3 に戻るボタンが押されたら、targetStepを保存して「普通の一つ戻るPOST」へ誘導
document.querySelectorAll('.sp-go-back-step').forEach(function(btn) {
btn.addEventListener('click', function () {
var target = btn.getAttribute('data-back-to');
if (target) {
try {
localStorage.setItem('spiralBackToStep', target);
} catch (e) {}
}
// 最初の「戻る1回」を発動させるために既存の previous ボタンを押す
var prevBtn = document.querySelector('.sp-form-prev-button');
if (prevBtn) {
prevBtn.click();
}
});
});
// ページ表示ごとに、必要なら自動で previous を連打
spiralAutoBackIfNeeded();
});
実行結果
上記の設定を終えたフォームでは、例えばステップ4の確認画面で「ステップ1の入力に戻る」ボタンをクリックすると、
ステップ3、ステップ2へと自動的に画面が遷移し、最終的にステップ1の入力画面が表示されます。
まとめ
この実装により、入力途中で前のステップに戻りたいユーザーのストレスを軽減し、フォームの離脱率改善にも繋がる可能性があります。ぜひご活用ください。
