メインコンテンツへスキップ

埋め込みフォームを利用する-埋め込みフォームの設置(応用編)-埋め込みフォームのカスタマイズ

埋め込みフォームを利用する-埋め込みフォームの設置(応用編)-埋め込みフォームのカスタマイズ
埋め込みフォームのカスタマイズ埋め込みフォームタグの詳細スタイルのカスタマイズフォームオプションによるカスタマイズコールバック関数オプションによるカスタマイズ埋め込みフォームタグの詳細埋め込みフォームタグは以下のような構成になっています。埋め込みフォームタグの例(1)(2)(3)smpform.loadForm('c28d77d5-xxxx-xxxx-xxxx-2b92b318a3f0','埋め込みフォーム用JSライブラリ: フォーム情報取得&フォーム送信処理を実行するライブラリを読み込みます埋め込みフォーム用デフォルトCSS: デフォルトのスタイルを定義したCSSを読み込みますフォーム出力エリア: フォームごとに固有なIDで特定された、フォーム表示領域フォーム出力実行メソッド: フォームを描画するメソッドを実行し、③のエリアにフォームを出力します実際に表示対象となるフォームは、ドメインURLと、ドメイン内で固有のフォームごとのID(上記の例ではc28d77d5~で始まる文字列)で特定されます。スタイルのカスタマイズ埋め込みフォームとしてSMPから出力されるフォーム部分のHTML(DOM構造)を想定し、埋め込み先のページでCSSを追加指定していただくことでフォームの表示をカスタマイズします。埋め込みフォームタグ中にCSSへのリンクが含まれていますが(前項のタグの②の部分)、これはあくまでデフォルトのものなので、こちらをベースに埋め込み先のページに合わせてCSSを編集して利用します。デフォルトのCSSへのリンクを削除して置き換えるか、デフォルトのCSSへのリンクよりも下に追加CSSを配置するなどして、スタイルを上書きします。埋め込みフォームに実際に適用されるスタイルは、埋め込み先のサイトに適用されているCSSにも依存するので、設置ページのスタイル作成・管理方法にあわせてCSS等の調整を行ってください。埋め込みフォームのHTML出力例氏名※!必ず入力してください姓:!必ず入力してください名:全角(例 姓:シャノン 名:太郎)会社名(例 山田株式会社)E-mail※!必ず入力してください半角文字(例 user@smktg.jp)※E-mailアドレスの入力間違いが多くなっております。ご注意ください。資料送付・各種情報案内を希望しますか希望する希望しない完了メッセージ表示のカスタマイズ埋め込みフォームの設定「申込登録完了時の挙動」として「指定の完了メッセージを表示」を指定した場合、リード登録に成功するとフォームが表示されていた領域に指定した完了メッセージが(フォームを置き換えて)表示されます。完了メッセージの表示は以下のいずれかの方法でカスタマイズすることができます。完了メッセージ自体にHTMLタグを記述しますss_complete_messageクラスのスタイルを定義します(下記HTML例を参照)完了画面のHTML出力例【ここに設定した完了メッセージが表示されます】フォームオプションによるカスタマイズフォーム出力時にオプションを指定することで一部のフォーム表示をカスタマイズすることができます。埋め込み先のサイトに埋め込むタグの内容を編集して、フォーム出力を実行するメソッドloadForm関数の引数としてオプションを渡します。注意ブラウザによっては文字の文字化けが起こります。フォーム送信ボタンのラベルを変更する場合は、次のブラウザを推奨します。・GoogleChrome・FireFoxフォーム送信ボタンのラベルを変更するフォーム送信ボタンの文字をフォームごとに変更することができます。たとえば、資料請求を目的としたフォームとして利用する場合、「資料請求する」という登録ボタンにすることができます。以下の例のように、フォーム出力実行メソッドの呼び出し(埋め込みフォームタグの4行目)を書き換えて、3つ目の引数としてオプション定義を渡すようにします。送信ボタンのラベル変更例constformOpt={submitWord:資料請求する(1)};smpform.loadForm(‘xxxxx’,‘’,formOpt);(2)登録ボタンのラベルを「資料請求する」にしますフォームオプションを3つめの引数に指定してフォーム出力実行メソッド(loadForm)を実行します図1.登録ボタンのラベル変更表示例プライバシーポリシー提示領域を表示するフォームの上部に、プライバシーポリシー等の文言を表示する領域を出力することができます。文言の内容には、対象のキャンペーンの項目に設定されている値を表示することができます。以下の例のように、フォーム出力実行メソッドの呼び出し(埋め込みフォームタグの4行目)を書き換えて、3つ目の引数としてオプション定義を渡すようにします。プライバシーポリシー提示領域を表示する場合の設定例constformOpt={showPolicy:true,(1)policyText:attribute1(2)};smpform.loadForm(‘xxxxx’,‘’,formOpt);プライバシーポリシー文言エリアを表示しますプライバシーポリシー文言としてキャンペーンの追加項目ID=1の内容を表示します図2.プライバシーポリシー提示領域の表示例その他のプライバシーポリシーの提示方法プライバシーポリシー提示領域を表示する代わりに、以下の方法でもポリシー文言を表示することができます。リード追加項目の同意チェックボックスの上下左右コメントで表示します埋め込み先のページ自体に、ポリシー文言等を記載しますコールバック関数オプションによるカスタマイズフォーム出力時にオプションを指定することで、フォーム動作時に動作する関数を差し込むことができます。リード登録完了時に任意の処理を実行する埋め込みフォームによるリード登録が成功したタイミングで実行する処理を指定することができます。たとえば、アクセス解析や効果測定ツール等で、リード登録をコンバージョンとして計測する場合などに利用します。注意このオプションは、登録完了時の挙動に「完了メッセージを表示」を指定している場合のみ、動作します。別ページにリダイレクトする場合は、リダイレクト先のページにコンバージョンタグを埋めるなどしてください。リード登録完了時のコールバック関数設定例constformOpt={submitWord:資料請求する,};constcallbackOpt={executionTiming:onCompleted,(1)callbackFunc:function(){(2)external_method(test1,test2);}};smpform.loadForm(‘xxxxx’,‘’,formOpt,callbackOpt);(3)実行タイミングにリード登録完了時を指定します実行する処理を関数として定義します定義した関数をloadFormの4つ目の引数に渡しますなお、フォームオプションが不要の場合は、3つ目の引数にfalseを指定し、4つ目の引数としてコールバックオプションを指定します。その他のフォームオプションは指定せず、コールバックオプションのみ設定する場合の設定例smpform.loadForm(‘xxxxx’,‘’,false,callbackOpt);
https://smpdoc.shanon.co.jp/ja/visitor/other/chapter002/chapter003/001/