マニュアル

フォームの入力項目に文字数制限を設定する

項目の編集方法

フォーム機能では、「一行テキスト」と「複数行テキスト」項目についてはそれぞれの項目の編集画面「最大文字数」にて設定が可能です。具体的な手順は以下になります。

左サイドバーの [フォーム] - [一覧] をクリックする
該当するフォームの名前をクリックし [項目変更] タブを開く
各項目の上にある編集ボタンをクリックする

「最大文字数」項目に制限を設定したい文字数を入力する

「完了」ボタンをクリックする

カスタムスクリプトの設置方法

「一行テキスト」と「複数行テキスト」項目以外では、カスタムスクリプトを利用することで文字数制限を設定することが可能です。具体的な手順は以下になります。

カスタムスクリプト用の JS ファイルを作成します。
具体的なスクリプト例はこの後の項目で紹介します。
作成した JS ファイルをサーバーへアップロードします。
アップロード手順の詳細についてはご契約のウェブサーバーの FAQ やマニュアル、サポートなどご参照ください
以下のように指定することによって、スクリプトファイルを表示したいページ内で読み込みます。
```
<script src="https://ソースコードをアップしたサーバーのドメイン/custom-script.js"></script>
```
上記で指定する URL のソースコードをアップしたサーバーのドメインの部分には、ソースコードをアップしたサーバーのドメインを入れます。JS ファイル名がcustom-script.jsではない場合、ファイル名を指定してください。

必ずフォームを設置しているページ内（iframe のソースを貼っているページ）に script を埋め込みます。 script は、フォームの「埋め込みコード」より上に設置してください。

文字数を制限する方法

以下で、具体的なスクリプトの例を紹介します。

項目を指定して文字数で制限する

まずは、特定の項目を指定して文字数制限を行う方法です。
今回はお名前、メールアドレス、内容の３つのフォームの項目のうち、内容について140文字で制限をします。

作成した JS ファイルに、以下のスクリプトを記述します。
```
window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() {
  MTNetFormDataLayer.push(arguments);
}
MTNetForm("validator", [
  {
    id: "内容",
    validator: function (value) {
      if (value.length > 140) {
        return "140文字以内で入力してください";
      }
    },
  },
]);
```
以下、ポイントです。
- idの部分には、制限したい項目の項目名を指定する
- value-lengthの140の部分は制限した文字数を記述する
- returnには制限を超えた場合のメッセージを指定する
140文字を超えた場合に実際には以下のような表示になります。

すべての項目で一定の文字数で制限する

続いてはすべての項目に対して、20文字以内の制限を追加します。

作成した JS ファイルに、以下のスクリプトを記述します。

window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
function MTNetForm() {
  MTNetFormDataLayer.push(arguments);
}
MTNetForm("validator", {
  validator: function (data) {
    for (var d of data) {
      if (d.value.length > 100) {
        return {
          id: d.id,
          message: "100文字以内で入力してください",
        };
      }
    }
  },
});

以下、ポイントです。

d.value.lengthで統一で制限したい文字数を指定する
messageに制限を超えた場合のメッセージを指定する

すべての入力欄で20文字の制限が行われるようになります。

特定のドメインのメールアドレスを登録できないようにする、郵便番号を必ず全角にして送信する

資料ダウンロード まずは - 無料トライアル