formrun guide

formrun guideでは、ユーザーの皆様に役立つTipsやFAQ、ニュース、ユーザーインタビューなどの情報をまとめてお伝えします

確認画面モードの設定方法

概要

このページでは、 formrun.js を利用した確認画面モード機能の設定方法を紹介します。

formrun.jsの概要や他のバリデーション機能については、別ページをご覧ください。

guide.form.run

確認画面モード機能の設定方法

formrun.jsの読み込み

このページの機能を利用する場合には、下記 formrun.js<head>内 で読み込み、 Formタグformrun というクラスを付与する必要があります。

<head>
  ...
  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
<body>
  ...
  <form class="formrun" action="https://form.run/api/v1/r/<フォーム設定ページで指定される値>" method="post">
  ...
  </form>
  ...
</body>

formrun.jsを利用する場合は、以前の sdk.jsとの併用はできません。

確認画面モードを有効にする

Formタグに data-formrun-confirm="true" 属性を指定します。

指定するとフォームに確認画面を設定することができます。

通常フォーム送信時には確認画面を経ずに直接データが送信されますが、 確認画面を設定すると送信前にユーザーが入力した項目を確認することができます。

確認画面を利用する場合、通常の送信ボタンの他に data-formrun-back-button を設定した「戻る」ボタンの設置が必須です。

<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-confirm="true">
  ...
  <a href="javascript:void(0)" class="btn btn-default" data-formrun-back-button>戻る</a>
  <button type="submit" class="btn btn-primary">確認</button>
</form>
備考
設置可能場所 Formタグ

確認画面時に要素を表示する

タグに data-formrun-show-if-confirm 属性を指定します。

指定すると、確認画面モードの時のみ要素を表示します。

<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-confirm="true">
  <div data-formrun-show-if-confirm>
    データをよく確認してから送信してください。
  </div>
  ...
</form>
備考
設置可能場所 ページ内の任意の場所

確認画面時に要素を非表示にする

タグに data-formrun-hide-if-confirm 属性を指定します。

指定すると、確認画面モードの時のみ要素を非表示します。

<!-- マークアップ例 -->
<form class="formrun" action="#" method="post" data-formrun-confirm="true">
  <div data-formrun-hide-if-confirm>
    データを入力して確認ボタンを押してください。
  </div>
  ...
</form>
備考
設置可能場所 ページ内の任意の場所

確認画面時にフォームの値を入力する

指定すると、確認画面モードの時に対象のフィールドの値を表示します。

data-formrun-show-if-confirm と併用することで、確認画面モードの時の表示をレイアウトすることができます。

<!-- マークアップ例 -->

<input type="text" name="お名前">
<div class="col-xs-9" data-formrun-show-if-confirm>
  <span data-formrun-confirm-value="お名前"></span>
</div>
備考
設置可能場所 Formタグ内の任意の場所

サンプルコード・動作デモ

See the Pen formrun.js (Confirm mode) by Masato TADA (@tady) on CodePen.