フォームのカスタムスクリプト(フィールド更新処理の仕様)
フォーム機能では値の制御をJavaScriptで行えます。
カスタムスクリプトでフィールド更新処理を利用すると、具体的には以下のようなことが可能になります。
- 飲食店のサイトで夜の特別メニューのページから問い合わせページへ遷移すると、ドロップダウンのメニュー項目が最初から夜の特別メニューが指定されている。
- 各製品ページの一番下に必ずフォームを表示させる運用の場合に、閲覧のみの1行テキストに製品情報が指定されている。
現在開いているページの情報で同ページ内のフォームにJavaScriptで値を指定する場合
<script> window.MTNetFormDataLayer = window.MTNetFormDataLayer || []; function MTNetForm(){MTNetFormDataLayer.push(arguments)}; MTNetForm("updateValues", { '項目名':'値'}); </script>
上記scriptを該当のページに設定し、項目名と値を設定します。各項目の指定例は以下になります。
'年月日選択':'2017-02-01' 'チェックボックス': ['オプション 1', 'オプション 2'] 'カレンダー':'2018-01-02' 'メールアドレス':'test@example.com' 'お名前':'武藤' '1行テキスト': '一行' 'ラジオボタン': 'オプション 2' '都道府県': '東京都' 'ドロップダウンリスト': 'オプション 1' '複数行テキスト': 'フクスウギョウテキスト' '電話番号':'090-9999-9999' 'URL': 'https://movabletype.net' '郵便番号': '999-9999'
複数指定する場合は、以下のように項目の間をカンマで区切ってください。
MTNetForm("updateValues", {
'年月日選択':'2017-02-01',
'チェックボックス': ['オプション 1', 'オプション 2'],});また、項目名でなくカラムIDでも指定できます。カラムIDはフォームの項目設定項目からブラウザのdeveloperツール等で確認してください。
複数のフォームを1つのページに挿入する場合は、以下のようなscriptになり、フォームIDの部分にフォームのIDを入れてください。
<script> window.MTNetFormDataLayer = window.MTNetFormDataLayer || []; function MTNetForm(){MTNetFormDataLayer.push(arguments)}; MTNetForm("フォームID", "updateValues", { '項目名':'値'}); </script>
ページ遷移してフォームを表示した場合に前のページで指定した値を挿入する
ページ遷移した場合に前のページの特定の値を引き継ぎ、特定の項目の値を設定する、といった場合は以下の方法で実現します。
まず、以下のscriptをフォームを表示させるページに設定します。
var names = ["項目名1", "項目名2"];の項目名の部分は、実際に設定した項目名を指定します。
遷移する元のページでは、フォームが設置されているページのリンクURLの最後に項目名と値を追加します。
http://example.movabletype.io/contact.html?項目名=値
例:http://demosite.movabletype.io/wa/contact.html?メニュー=夜の特別メニュー
2つ以上設定する場合は&を入れます。
https://example.com/inquiry.html?項目名1=値1&項目名2=値2