マニュアル

フォームの項目の値をJavaScriptで指定する

フォーム機能では値の指定を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をフォームを表示させるページに設定します。

form-param.jsをダウンロード

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