埋め込みフォームのカスタマイズ

埋め込みフォームタグの詳細

埋め込みフォームタグは以下のような構成になっています。

埋め込みフォームタグの例

<script src=”https://demo-example.smktg.jp/static/js/embedded_form.js” charset=”utf-8”></script>    (1)
<link rel="stylesheet" href=”https://demo-example.smktg.jp/static/css/embedded_form.css”>    (2)
<div id=”c28d77d5-xxxx-xxxx-xxxx-2b92b318a3f0” class=”smpForm”></div>    (3)
<script>smpform.loadForm('c28d77d5-xxxx-xxxx-xxxx-2b92b318a3f0', 'https://demo-example.smktg.jp');</script>    (4)

埋め込みフォーム用 JS ライブラリ: 　フォーム情報取得＆フォーム送信処理を実行するライブラリを読み込みます
埋め込みフォーム用デフォルト CSS: 　デフォルトのスタイルを定義した CSS を読み込みます
フォーム出力エリア: 　フォームごとに固有なIDで特定された、フォーム表示領域
フォーム出力実行メソッド: 　フォームを描画するメソッドを実行し、③ のエリアにフォームを出力します

実際に表示対象となるフォームは、ドメイン URL と、ドメイン内で固有のフォームごとの ID (上記の例では c28d77d5～ で始まる文字列) で特定されます。

スタイルのカスタマイズ

埋め込みフォームとして SMP から出力されるフォーム部分の HTML (DOM構造) を想定し、埋め込み先のページで CSS を追加指定していただくことでフォームの表示をカスタマイズします。

埋め込みフォームタグ中に CSS へのリンクが含まれていますが(前項のタグの ② の部分)、これはあくまでデフォルトのものなので、こちらをベースに埋め込み先のページに合わせて CSS を編集して利用します。

デフォルトの CSS へのリンクを削除して置き換えるか、デフォルトのCSS へのリンクよりも下に追加 CSS を配置するなどして、スタイルを上書きします。埋め込みフォームに実際に適用されるスタイルは、埋め込み先のサイトに適用されている CSS にも依存するので、設置ページのスタイル作成・管理方法にあわせて CSS 等の調整を行ってください。

埋め込みフォームの HTML 出力例

<div id="emb4ae6ec57-xxxx-xxxx-xxxx-e69c66240c59" class="smpForm">
<form action="https://demo-example.smktg.jp/public/embeddedapplication/add/emb4ae6ec57-xxxx-xxxx-xxxx-e69c66240c59" autocomplete="off" method="post" enctype="multipart/form-data">

  <div class="ss_container">
    <div class="ss_contents">

      <div class="ss_visitor_form">

    <fieldset class="ss_field ss_required_field" id="ss_name">
        <div class="ss_form_title">氏名<span class="ss_user_notnull">※</span></div>
        <div class="ss_grid"><div class="ss_input"><span class="ss_warning_label">！</span>
        <span class="ss_error_msg">必ず入力してください</span>
        <br><span class="ss_leftComment">姓：</span><input type="text" name="Public::EmbeddedApplication::User_D__P__D_name1" size="15" maxlength="20"></div>
        <div class="ss_input"><span class="ss_warning_label">！</span>
        <span class="ss_error_msg">必ず入力してください</span>
        <br><span class="ss_leftComment">名：</span><input type="text" name="Public::EmbeddedApplication::User_D__P__D_name2" size="15" maxlength="20"><span class="ss_rightComment">全角（例　姓：シャノン　名：太郎）</span></div>
        </div>
    </fieldset>
    <fieldset class="ss_field" id="ss_company_name">
      <div class="ss_form_title">会社名</div>
      <div class="ss_grid"><div class="ss_input"><input type="text" name="Public::EmbeddedApplication::User_D__P__D_company_name" size="40" maxlength="100"><span class="ss_rightComment">（例　山田株式会社）</span></div>
      </div>
    </fieldset>
    <fieldset class="ss_field ss_required_field" id="ss_email">
      <div class="ss_form_title">E-mail<span class="ss_user_notnull">※</span></div>
      <div class="ss_grid"><div class="ss_input"><span class="ss_warning_label">！</span>
        <span class="ss_error_msg">必ず入力してください</span>
        <br><input type="email" name="Public::EmbeddedApplication::User_D__P__D_email" maxlength="100" size="40" required="">
        <span class="ss_rightComment">半角文字 (例　user@smktg.jp)</span><div class="ss_bottomComment">※E-mailアドレスの入力間違いが多くなっております。ご注意ください。</div></div>
      </div>
    </fieldset>
    <fieldset class="ss_field" id="ss_permission_type_master_id">
      <div class="ss_form_title">資料送付・各種情報案内を希望しますか</div>
      <div class="ss_grid"><div class="ss_input"><input type="radio" name="Public::EmbeddedApplication::User_D__P__D_permission_type_master_id" value="1" checked="checked">希望する <input type="radio" name="Public::EmbeddedApplication::User_D__P__D_permission_type_master_id" value="2">希望しない</div>
      </div>
    </fieldset>

      </div>
      <div align="center"></div>
      <div class="ss_btnArea">
        <p>
          <input type="button" value=" 登録 " name="smpSubmit">
        </p>
      </div>
    </div>
  </div>
  <input type="hidden" name="selected_action" value="">
  <input type="hidden" name="cart_delete" value="">
  <input type="hidden" name="action" value="2">
  <input type="hidden" name="serialkey" value="xxxxxxxxxxxxxxxxxxxxxxxxxx">
  <input type="hidden" name="Public::EmbeddedApplication::User_D__P__D_language_master_id" value="1">
  <input type="hidden" name="use_recaptcha" value="0">
</form>
<div class="ss_submit_loader" id="ss_submit_loader" style="display:none;"><div class="spinner"></div></div>
</div>

完了メッセージ表示のカスタマイズ

埋め込みフォームの設定「申込登録完了時の挙動」として「指定の完了メッセージを表示」を指定した場合、リード登録に成功するとフォームが表示されていた領域に指定した完了メッセージが（フォームを置き換えて）表示されます。

完了メッセージの表示は以下のいずれかの方法でカスタマイズすることができます。

完了メッセージ自体に HTML タグを記述する
ss_complete_message クラスのスタイルを定義する(下記 HTML 例を参照)

完了画面の HTML 出力例

<div id="emb4ae6ec57-xxxx-xxxx-xxxx-e69c66240c59" class="smpForm" style="height: 707px;">
  <div class="ss_complete_message">
    <span>【ここに設定した完了メッセージが表示されます】</span>
  </div>
</div>

フォームオプションによるカスタマイズ

フォーム出力時にオプションを指定することで一部のフォーム表示をカスタマイズすることができます。埋め込み先のサイトに埋め込むタグの内容を編集して、フォーム出力を実行するメソッド loadForm 関数の引数としてオプションを渡します。

フォーム送信ボタンのラベルを変更する

フォーム送信ボタンの文字をフォームごとに変更することができます。たとえば、資料請求を目的としたフォームとして利用する場合、「資料請求する」という登録ボタンにすることができます。

以下の例のように、フォーム出力実行メソッドの呼び出し(埋め込みフォームタグの４行目)を書き換えて、３つ目の引数としてオプション定義を渡すようにします。

送信ボタンのラベル変更例

<script>
const formOpt = {
  submitWord: "資料請求する"  (1)
};
smpform.loadForm(‘xxxxx’, ‘https://demo-example.smktg.jp’, formOpt); (2)
</script>

登録ボタンのラベルを「資料請求する」にする
フォームオプションを3つめの引数に指定してフォーム出力実行メソッド(loadForm)を実行する

embeddedform example custombuttonlabel.png

図 1. 登録ボタンのラベル変更表示例

プライバシーポリシー提示領域を表示する

フォームの上部に、プライバシーポリシー等の文言を表示する領域を出力することができます。文言の内容には、対象のキャンペーンの項目に設定されている値を表示することができます。

プライバシーポリシー提示領域を表示する場合の設定例

<script>
const formOpt = {
  showPolicy: true,       (1)
  policyText: "attribute3"  (2)
};
smpform.loadForm(‘xxxxx’, ‘https://demo-example.smktg.jp’, formOpt);
</script>

プライバシーポリシー文言エリアを表示する
プライバシーポリシー文言としてキャンペーンの追加項目 ID=3 の内容を表示

図 2. プライバシーポリシー提示領域の表示例

その他のプライバシーポリシーの提示方法

プライバシーポリシー提示領域を表示する代わりに、以下の方法でもポリシー文言を表示することができます。

リード追加項目の同意チェックボックスの上下左右コメントで表示する
埋め込み先のページ自体に、ポリシー文言等を記載する

コールバック関数オプションによるカスタマイズ

フォーム出力時にオプションを指定することで、フォーム動作時に動作する関数を差し込むことができます。

リード登録完了時に任意の処理を実行する

埋め込みフォームによるリード登録が成功したタイミングで実行する処理を指定することができます。たとえば、アクセス解析や効果測定ツール等で、リード登録をコンバージョンとして計測する場合などに利用します。

注意
このオプションは、登録完了時の挙動に「完了メッセージを表示」を指定している場合のみ、動作します。別ページにリダイレクトする場合は、リダイレクト先のページにコンバージョンタグを埋めるなどしてください。

リード登録完了時のコールバック関数設定例

<script>
const formOpt = {
  submitWord: "資料請求する",
};
const callbackOpt = {
  executionTiming: "onCompleted",  (1)
  callbackFunc: function(){        (2)
    external_method("test1", "test2");
  }
};
smpform.loadForm(‘xxxxx’, ‘https://demo-example.smktg.jp’, formOpt, callbackOpt); (3)
</script>

実行タイミングにリード登録完了時を指定
実行する処理を関数として定義
定義した関数を loadForm の４つ目の引数に渡す

なお、フォームオプションが不要の場合は、３つ目の引数に false を指定し、４つ目の引数としてコールバックオプションを指定します。

その他のフォームオプションは指定せず、コールバックオプションのみ設定する場合の設定例

smpform.loadForm(‘xxxxx’, ‘https://demo-example.smktg.jp’, false, callbackOpt);