Form 2 API を利用した確認ダイアログ（フォーム確認画面）

Forum|Forum|10 years ago
April 12, 2016
0 replies
1113 views

※2020/11/12 記事修正

こちらもサポート対象外なんですが、ご参考まで。

------------------
マルケトフォーム（Marketo Form2）って、確認画面が欲しいときあります。
リードジェネレーションの観点からすれば、確認画面を出すことでそれを阻害してしまう感がありますが、日本文化の象徴たる確認画面も捨て難い。

そこで、Marketo Form2 API（http://developers.marketo.com/documentation/websites/forms-2-0/）を使って、確認画面のように振る舞うダイアログを作成してみました。こんな感じです。

オープンソース（MIT License）にしましたので、興味ある方は以下の手順で適用してみてください。もちろん、ガシガシ書き換えて好みのダイアログへどうぞ。

(１ランディングページに複数フォームある場合にも対応しています。）

使い方

1. GitHubから mkto_form_cdialog.js を自分の端末にダウンロードします。

https://github.com/kioy/MarketoForm2ConfirmationDialog

2. マルケトのデザインスタジオ＞画像・ファイルにアップロードします。※貴社サーバにアップいただいてもOK。

その際に、ファイルのURLを控えておきます。

※デザインスタジオにアップしたファイルのURL例

http://lp.hogehoge.com/rs/123-ABC-456/images/mkto_form_cdialog.js

デザインスタジオの該当ファイルよりURLをコピーする。

3. 以下の6行のコードをマルケトフォームを含んでいるランディングページの <head></head> の中にコピペします。

[手順2でアップしたmkto_form_cdialog.jsのURL]の部分は、手順2で控えたURLに差し替えてください。

<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/black-tie/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="手順2でアップしたmkto_form_cdialog.jsのURL"></script>
<meta name="mktoForm2CDialog:NULL_Fill_Field_API_Names" content="">
<meta name="mktoForm2CDialog:Mail_Confirm" content="false">

jquery.min.js、jquery-ui.min.js、jquery-ui.css などがすでに読み込まれている場合はそれらの読み込みは必要ありません。jquery-ui.css はダイアログの見た目を決めていますが、気に入らない場合は、http://jqueryui.com/themeroller/ でどれか選んでそれを指定してみてください。上のコードでは、black-tie を利用していますが、例えば以下のコード /blitzer/ では赤っぽくなります。

<link type="text/css" rel="stylesheet" href="https://nation.marketo.com//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.css" />

マルケトのフォームは外部のサイトにも埋め込めますし、マルケトのランディングページでもホストできます。外部のサイトの場合は上記のとおり <head></head> へ。

マルケトのランディングページを利用している場合は、ランディングページの編集で「カスタムの HEAD」に指定します。

設定はこれだけ！

果たして動くか。最新の IE、Firefox、Chrome、Safari では動作確認しましたが。。。

3. オプションの設定

このダイアログには2つオプションがあります。一番下の２行を変更することでそれが有効になります。

<meta name="mktoForm2CDialog:NULL_Fill_Field_API_Names" content="">
<meta name="mktoForm2CDialog:Mail_Confirm" content="false">

mktoForm2CDialog:NULL_Fill_Field_API_Names
- フォームにテキストまたはテキストエリアのフィールドがある場合、そのフィールドに対応する SOAP API 名（マルケト管理＞フィールド管理＞エクスポートフィールド名で確認）をカンマで指定することで、ユーザが何も入力しなかった場合に 'NULL' フィルしてデータをクリアします。（マルケトフォームは、デフォルトでは何も入力されなければ、安全のため既存のフィールドの値を上書きしない）
- 例：<meta name="mktoForm2CDialog:NULL_Fill_Field_API_Names" content="FirstName, Country">
mktoForm2CDialog:Mail_Confirm
- これを content="true" にすると、フォームに標準のメールアドレスフィールドがある場合にメールアドレスの確認フィールドをフォームに自動生成します。マルケトのリードデータベースにカスタムフィールドを作成する必要はありません。このコードは、別のオープンソースコードを組み込んでいます。