Movable Type.net フォーム

マニュアル

チェックボックスで選択できる上限数を指定する

チェックボックスで選択できるアイテムの最大数を指定することができます。
ここでは、JS ファイルを作成しそれをウェブサーバーにアップロードして、チェックボックスで選択できるアイテムの最大数を指定する例をご紹介します。

フォームの新規作成

  1. チェックボックスを含むフォームを新規作成します。
  2. 左サイドバー [フォーム] - [新規] を選択し、新規フォームを作成します。

基本設定

  1. 「基本設定」の必要項目を入力し、下部にある [保存] ボタンをクリックします。

項目変更

  1. 「項目変更」の [フォームの項目変更] で右側にある項目をドラッグ＆ドロップで追加し、選択が完了したら [保存] をクリックします。
    今回はチェックボックスをカスタマイズしたいので、 [チェックボックス] の項目を必ず追加してください。

    2. フォームが完成しても、設定ページは閉じずそのままにしておきましょう。この後、設定した内容をいくつか使用します。

フォームをページに設置する

作成したフォームを設置します。フォームを設置したいページの編集画面を開きます。

  1. 先ほど作成したフォームの管理画面に戻り [基本設定] タブの中にある、埋め込みコードをコピーします。
  2. フォームを設置したいページに、コピーした埋め込みコードを貼り付けます。
  3. 以下はアンケートフォームをページに埋め込んだ例です。

    4. この時点では、「作品の良かった点」をいくらでも選択できる状態です。
    次の手順で選択できる個数を指定します。

JS ファイルの作成

作品の良かった点を 最大3つまで 指定できるようにカスタマイズ設定を行います。

フォーム用の JS ファイルを作成します。ここでチェックボックスで選択できる数の制限指定や、アラートメッセージなどのバリデーションの設定を行います。

  1. JS ファイルを新規作成して、下記のコードを貼り付けます。

    window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() { MTNetFormDataLayer.push(arguments); }
MTNetForm("validator", {
  id: "foo",
  validator: function(value) {
    if (value.length < 1) {
      return "1つ以上選択してください";
    }
    if (value.length > 3) {
      return "選択できる項目は最大3つまでです";
    }
  },
});
  2. ファイル名は form_multiple_selection_limiter.js など任意のファイル名を設定します。

  3. 再度、先ほど作成したフォームの管理画面に戻り [項目変更] タブの中にある、チェックボックスの項目を開き [項目名] の内容をコピーします。

  4. フォーム用のカスタムスクリプトの4行目のidにある、fooをコピーした内容に書き換えます。
    このスクリーンショットの例で言えば、id: "今回の作品でよかった点を選択してください（最大3つまで）"となります。
  5. 9行目のif (value.length > 3)の3を変更すると、選択できる上限数を設定できます。
  6. コード10行目のreturnに書かれている選択できる項目は最大3つまでですの3の部分も必ず同じ数字に変えてください。アラート時に表示されるメッセージになります。

  7. 書き換えが完了したら保存します。

作成した JS ファイルをウェブサーバーにアップロードする

最後に、設定したバリデーションを、作成したフォームに反映させる作業を行います。

  1. フォーム設置予定のウェブサイトがあるウェブサーバーへ作成した JS ファイルをアップロードしてください。アップロード手順の詳細については、ご契約のウェブサーバーの FAQ やマニュアル、サポートなどをご参照ください
  2. フォームを設置しているページの<head> 内に、下記のコードを貼り付けます。

    <script src="https://フォームを設置しているウェブサイトのドメイン/form_multiple_selection_limiter.js" defer></script>
  3. form_multiple_selection_limiter.jsと書かれている箇所は、作成した JS ファイル名を記載してください。

    4. このコードを埋め込むことで、作成した JS ファイルの内容とフォームを紐づけることができます。

    これで、チェックボックスで選択できる項目の数が制限されるようになります。

動作確認（エラー例）

指定した数より多く選択して送信すると、アラートメッセージが表示され、送信できない状態になります。

マニュアル 一覧
資料ダウンロード まずは - 無料トライアル
MovableType.net フォーム