はじめまして！デザイナーのさいとうです。
今回初めて活用ブログを書かせていただきます🙌
お問い合わせやアンケートのフォームで「該当する項目を、3つ選択してください」と、選択できる個数の上限を指定したい時、あると思います。
CMSサービス「MovableType.net」のフォーム機能ならびに、フォームサービス「MovableType.net フォーム」では、複数アイテムを選択できるチェックボックスを利用できます。
この記事では、そのチェックボックスで選択できるアイテムの最大数を指定するためのカスタマイズ方法についてご紹介します！
この方法を使えば、もしユーザーが上限数以上に選択したとしても、アラートのメッセージが表示されるので安心です😌
さっそくやっていきましょう✊
もくじ
1. フォームを新規作成
まずは、チェックボックスを含むフォームを新規作成しましょう。
必要項目を入力し、下部にある [保存] ボタンをクリックします。
今回はチェックボックスをカスタマイズしたいので、[項目変更] で [チェックボックス] の項目を必ず追加してください。
フォームの作成方法については、マニュアルで詳しく解説しているのでぜひ参考にしてください！
フォームが完成しても、設定ページは閉じずそのままにしておきましょう。この後、設定した内容をいくつか使用します。
2. フォームをページに設置する
次に、フォームを設置しましょう。フォームを置きたいページの編集画面を開きます。
今回は「ウェブページ」にアンケートを設置してみます。
先ほど作成したフォームの管理画面に戻り [基本設定] タブの中にある、埋め込みコードをコピーします。
アンケートを設置するウェブページに、コピーした埋め込みコードを貼り付けます。フォーマットは [なし] もしくは、ブロックエディタの [HTML] ブロックとして貼り付けてください。
[公開] ボタンを押すと、作成したフォームがページに表示されます。実際のウェブページを確認しましょう。
この時点では、「作品の良かった点」をいくらでも選択できる状態です。
3. カスタムスクリプトのテンプレートを作成
いよいよ本題のカスタマイズ設定を行ないます！作品の良かった点を 最大3つまで 指定できるように設定していきましょう。
フォーム用のカスタムスクリプトのテンプレートを作成します。ここでチェックボックスで選択できる数の制限指定や、アラートメッセージなどのバリデーションの設定を行ないます。
左サイドバーの [デザイン] > [テンプレート] から [インデックス・テンプレート] を新規作成して下記のコードを貼り付けます。
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つまでです";
}
},
});テンプレートの名前は フォーム選択数の上限指定、出力ファイルは form_multiple_selection_limiter.js などにしておきましょう
再度、先ほど作成したフォームの管理画面に戻り [項目変更] タブの中にある、チェックボックスの項目を開き [項目名] の内容をコピーします。
フォーム用のカスタムスクリプトの4行目のidにある、fooをコピーした内容に書き換えます。
このスクリーンショットの例で言えば、id = 今回の作品でよかった点を選択してください（最大3つまで）になります。
9行目のif (value.length > 3)の3を変更すると、選択できる上限数を設定できます。
コード10行目のreturnに書かれている選択できる項目は最大3つまでですの3の部分も必ず同じ数字に変えてください。アラート時に表示されるメッセージになります。
書き換えが完了したら [公開] または [更新] を押します。
4. カスタムスクリプトのテンプレートを読み込ませる
最後に、設定したバリデーションの設定を、作成したフォームに反映させる作業を行います。
フォームを設置したページのテンプレートを開きます。
今回はウェブページに設置したので、ウェブページのアーカイブ・テンプレートを開きます。
<head> 内に、下記のコードを貼り付けます。
<script src="<mt:BlogURL>form_multiple_selection_limiter.js" defer></script>
form_multiple_selection_limiter.jsと書かれている箇所は、カスタムスクリプトのテンプレートで設定した [出力ファイル] 名を記載してください。
このコードを埋め込むことで、カスタムスクリプトのテンプレートの内容とフォームを紐づけることができます。
貼り付けが完了したら、[更新] を押します。
これで、チェックボックスで選択できる項目の数が制限されているはずです！
5. 正常に動くか動作確認する
さっそくウェブページを更新し、動作確認してみましょう！
指定した数より多く選択して送信すると、アラートメッセージが表示され、送信できない状態になればカスタマイズ成功です！
この方法でフォームのチェックボックスの選択数に上限を設けることができます。ぜひお試し下さい！
