Marketing HubCMS Hub

フォーム確認画面をjQueryだけで実装する

目次

  1. 目次
    1. 実装の概要
    2. 実際のコード
      1. プライベート変数宣言とinitialize関数
      2. validateForms関数
      3. returnFormData関数
      4. showConfirmation関数
      5. sendDataToHS関数
      6. afterSubmit関数
    3. 目次 実装の概要 実際のコード プライベート変数宣言とinitialize関数 validateForms関数 returnFormData関数 showConfirmation関数 sendDataToHS関数 afterSubmit関数 まとめ
    4. 実装の概要

      モジュール自体はカスタムモジュールで実装していますが、実際のフォームの送信はHubSpotのformタグ標準の挙動ではなく、Forms APIの1つである 実装の概要 モジュール自体はカスタムモジュールで実装していますが、実際のフォームの送信はHubSpotのformタグ標準の挙動ではなく、Forms APIの1つである Submit form data を使用しています。このAPIは認証が不要なため、JavaScriptのみで完結しています。 カスタムモジュール内にはフォームフィールド1つのみ設置しており、ページ編集画面で設定できる フォームの選択 送信後の挙動の選択（別のページにリダイレクトか、メッセージをインライン表示） リダイレクトの場合は内部ベージか、外部URLの選択 は全てサポートしています。

日本のwebの慣習として「フォーム送信の前に確認画面を表示させたい」というものがあります。HubSpot標準のフォームでは確認画面がありませんが、この確認画面は結構要望としていただくことが多いので、汎用的に使用できるようjQuery（1.11.2）で実装してみました。

このように動作します。

フォーム確認画面のデモ フォーム確認画面のデモ

目次

  1. 実装の概要
  2. 実際のコード
    1. プライベート変数宣言とinitialize関数
    2. validateForms関数
    3. returnFormData関数
    4. showConfirmation関数
    5. sendDataToHS関数
    6. afterSubmit関数
  3. まとめ

実装の概要

モジュール自体はカスタムモジュールで実装していますが、実際のフォームの送信はHubSpotのformタグ標準の挙動ではなく、Forms APIの1つである Submit form data を使用しています。このAPIは認証が不要なため、JavaScriptのみで完結しています。

カスタムモジュール内にはフォームフィールド1つのみ設置しており、ページ編集画面で設定できる

  • フォームの選択
  • 送信後の挙動の選択（別のページにリダイレクトか、メッセージをインライン表示）
  • リダイレクトの場合は内部ベージか、外部URLの選択

は全てサポートしています。

カスタムモジュールのフィールド構成 カスタムモジュールのフィールド構成

実際のコード

コードは次の通りです。カスタムモジュールのフィールドから値を受ける必要があるため、全てHTML + HUBL欄に記述します。JavaScriptにおいては、一応リビーリングモジュールパターンを採用しています。念のためIE11もサポートしています。

  
       
  1. 
{%
 form 
"my_form"
 form_to_use
=
'{{ module.form.form_id }}'
 
%}

    2.    
  2. 
 

    3.    
  3. 
<
script
>

    4.    
  4. 
(
function
()
 
{

    5.    
  5. 
 
const
 hsForm 
=
 
(
function
 
()
 
{

    6.    
  6. 
 
let
 inputData 
=
 
[];

    7.    
  7. 
 
let
 $formWrapper
;

    8.    
  8. 
 
let
 $rootElm
;

    9.    
  9. 
 
let
 $formFields
;

    10.    
  10. 
 
let
 $submitBtn
;

    11.    
  11. 
 

    12.    
  12. 
 
/**

    13.    
  13. 
 * 共通で使う変数のセット、HubSpot標準フォームの送信イベントを乗っ取るためのイニシャライズを行う

    14.    
  14. 
 * @param {String} selector

    15.    
  15. 
 */

    16.    
  16. 
 
function
 initialize
(
selector
)
 
{

    17.    
  17. 
 $formWrapper 
=
 $
(
selector
);

    18.    
  18. 
 $rootElm 
=
 $formWrapper
.
parent
();

    19.    
  19. 
 $submitBtn 
=
 $formWrapper
.
find
(
'.actions input[type=submit]'
);

    20.    
  20. 
 

    21.    
  21. 
 $submitBtn
.
on
(
'click'
,
 
function
(
e
)
 
{

    22.    
  22. 
 e
.
preventDefault
();

    23.    
  23. 
 
// 依存フィールドなども考慮しこのタイミングでフィールド収集

    24.    
  24. 
 $formFields 
=
 $formWrapper
.
find
(
'.hs-form-field'
);

    25.    
  25. 
 validateForms
().
done
(
function
 
(){

    26.    
  26. 
 $
(
'.js_hsFormErrorMessage'
).
remove
();

    27.    
  27. 
 inputData 
=
 returnFormData
();

    28.    
  28. 
 showConfirmation
(
inputData
);

    29.    
  29. 
 
});

    30.    
  30. 
 validateForms
().
fail
(
function
()
 
{

    31.    
  31. 
 
if
 
(
$
(
'.js_hsFormErrorMessage'
).
length 
<
 
1
)
 
{

    32.    
  32. 
 $
(
'<p class="js_hsFormErrorMessage">入力項目を確認してください</p>'
).
appendTo
(
$rootElm
);

    33.    
  33. 
 
}

    34.    
  34. 
 
});

    35.    
  35. 
 
});

    36.    
  36. 
 
}

    37.    
  37. 
 

    38.    
  38. 
 
/**

    39.    
  39. 
 * 各フォームパーツに.change()をかけ、HubSpotフォーム標準のバリデーションを呼び出す

    40.    
  40. 
 */

    41.    
  41. 
 
function
 validateForms
()
 
{

    42.    
  42. 
 
const
 defer 
=
 $
.
Deferred
();

    43.    
  43. 
 

    44.    
  44. 
 $formFields
.
each
(
function
()
 
{

    45.    
  45. 
 
if
 
(
$
(
this
).
find
(
'select'
).
length
)
 
{

    46.    
  46. 
 $
(
this
).
find
(
'select'
).
trigger
(
'change'
);

    47.    
  47. 
 
}
 
else
 
if
 
(
$
(
this
).
find
(
'textarea'
).
length
)
 
{

    48.    
  48. 
 $
(
this
).
find
(
'textarea'
).
trigger
(
'change'
);

    49.    
  49. 
 
}
 
else
 
if
 
(
$
(
this
).
find
(
'input[type=radio]:checked'
).
length
)
 
{

    50.    
  50. 
 
return
 
true
;

    51.    
  51. 
 
}
 
else
 
{

    52.    
  52. 
 $
(
this
).
find
(
'input'
).
change
();

    53.    
  53. 
 
// TODO: Eメールが漏れることある

    54.    
  54. 
 
}

    55.    
  55. 
 
});

    56.    
  56. 
 

    57.    
  57. 
 
// エラーメッセージを確実に出してから判定したいためsetTimeout

    58.    
  58. 
 setTimeout
(
function
()
 
{

    59.    
  59. 
 
if
 
(
$
(
'.hs-error-msg'
).
length
)
 
{

    60.    
  60. 
 defer
.
reject
();

    61.    
  61. 
 
}
 
else
 
{

    62.    
  62. 
 defer
.
resolve
();

    63.    
  63. 
 
}

    64.    
  64. 
 
},
 
100
)

    65.    
  65. 
 

    66.    
  66. 
 
return
 defer
.
promise
();

    67.    
  67. 
 
}

    68.    
  68. 
 

    69.    
  69. 
 
/**

    70.    
  70. 
 * 確認画面の表示、またHubSpot CRMヘデータ送信するために各フォームからデータを収集し、オブジェクトを含んだ配列を返す

    71.    
  71. 
 * @return {Array} 各オブジェクトはlabel, name, value, valueLabelをキーに持つ

    72.    
  72. 
 */

    73.    
  73. 
 
function
 returnFormData
()
 
{

    74.    
  74. 
 
return
 $formFields
.
map
(
function
()
 
{

    75.    
  75. 
 
let
 $formParts
;

    76.    
  76. 
 
let
 name
;

    77.    
  77. 
 
let
 valueLabel 
=
 
[];

    78.    
  78. 
 

    79.    
  79. 
 
if
 
(
$
(
this
).
find
(
'.hs-dateinput'
).
length
)
 
{

    80.    
  80. 
 $formParts 
=
 $
(
this
).
find
(
'input'
);

    81.    
  81. 
 
}
 
else
 
if
 
(
$
(
this
).
find
(
'select'
).
length
)
 
{

    82.    
  82. 
 $formParts 
=
 $
(
this
).
find
(
'select'
);

    83.    
  83. 
 
const
 $option 
=
 $formParts
.
find
(
'option[value='
 
+
 $formParts
.
val
()
 
+
 
']'
)

    84.    
  84. 
 valueLabel
.
push
(
$option
.
text
());

    85.    
  85. 
 
}
 
else
 
if
 
(
$
(
this
).
find
(
'textarea'
).
length
)
 
{

    86.    
  86. 
 $formParts 
=
 $
(
this
).
find
(
'textarea'
);

    87.    
  87. 
 
}
 
else
 
if
 
(
$
(
this
).
find
(
'input[type=radio]'
).
length
)
 
{

    88.    
  88. 
 $formParts 
=
 $
(
this
).
find
(
'input[type=radio]:checked'
);

    89.    
  89. 
 valueLabel
.
push
(
$formParts
.
siblings
(
'span'
).
text
());

    90.    
  90. 
 
// チェックしていないときのために、:checked以外でnameを取得

    91.    
  91. 
 name 
=
 $
(
this
).
find
(
'input[type=radio]'
).
attr
(
'name'
);

    92.    
  92. 
 
}
 
else
 
if
 
(
$
(
this
).
find
(
'input[type=checkbox]'
).
length
)
 
{

    93.    
  93. 
 $formParts 
=
 $
(
this
).
find
(
'input[type=checkbox]:checked'
);

    94.    
  94. 
 name 
=
 $
(
this
).
find
(
'input[type=checkbox]'
).
attr
(
'name'
);

    95.    
  95. 
 $formParts
.
each
(
function
()
 
{

    96.    
  96. 
 valueLabel
.
push
(
$
(
this
).
siblings
(
'span'
).
text
());

    97.    
  97. 
 
})

    98.    
  98. 
 
}
 
else
 
{

    99.    
  99. 
 $formParts 
=
 $
(
this
).
find
(
'input'
);

    100.    
  100. 
 
}

    101.    
  101. 
 

    102.    
  102. 
 
const
 label 
=
 $
(
this
).
find
(
'label span:first'
).
text
().
replace
(
/\*/
,
 
''
);

    103.    
  103. 
 
const
 val 
=
 
(
function
()
 
{

    104.    
  104. 
 
if
 
(
$formParts
.
length 
>
 
1
)
 
{
 
// チェックボックスなど複数の値がある場合

    105.    
  105. 
 
return
 $formParts
.
map
(
function
()
 
{

    106.    
  106. 
 
return
 $
(
this
).
val
();

    107.    
  107. 
 
}).
get
();

    108.    
  108. 
 
}
 
else
 
{

    109.    
  109. 
 
return
 $formParts
.
val
();

    110.    
  110. 
 
}

    111.    
  111. 
 
})();

    112.    
  112. 
 

    113.    
  113. 
 
return
 
{

    114.    
  114. 
 label
:
 label
,

    115.    
  115. 
 name
:
 name 
?
 name 
:
 $formParts
.
attr
(
'name'
),

    116.    
  116. 
 value
:
 val
,

    117.    
  117. 
 valueLabel
:
 valueLabel
.
join
(
'、'
)

    118.    
  118. 
 
}

    119.    
  119. 
 
}).
get
();

    120.    
  120. 
 
}

    121.    
  121. 
 

    122.    
  122. 
 
/**

    123.    
  123. 
 * 確認画面を生成する

    124.    
  124. 
 * @param {Array} data

    125.    
  125. 
 */

    126.    
  126. 
 
function
 showConfirmation
(
data
)
 
{

    127.    
  127. 
 $formWrapper
.
hide
();

    128.    
  128. 
 

    129.    
  129. 
 
// 確認用テーブルの生成、アペンド

    130.    
  130. 
 
let
 $confirmationWrapper 
=
 $
(
'<div></div>'
);

    131.    
  131. 
 
let
 $table 
=
 $
(
'<table></table>'
);

    132.    
  132. 
 

    133.    
  133. 
 
function
 generateConfirmationValue
(
inputDataItem
)
 
{

    134.    
  134. 
 
if
 
(
inputDataItem
.
value 
===
 
'true'
)
 
{

    135.    
  135. 
 
return
 
'はい'
;

    136.    
  136. 
 
}
 
else
 
if
 
(
inputDataItem
.
value 
===
 
'false'
)
 
{

    137.    
  137. 
 
return
 
'いいえ'
;

    138.    
  138. 
 
}
 
else
 
{

    139.    
  139. 
 
// プルダウンやラジオボタン、複数のチェックボックスなどはvalueに対応するラベルを表示する ex)man→男 woman→女

    140.    
  140. 
 
if
 
(
inputDataItem
.
valueLabel
)
 
{

    141.    
  141. 
 
return
 inputDataItem
.
valueLabel
;

    142.    
  142. 
 
}

    143.    
  143. 
 
return
 inputDataItem
.
value 
?
 inputDataItem
.
value 
:
 
''
;

    144.    
  144. 
 
}

    145.    
  145. 
 
}

    146.    
  146. 
 

    147.    
  147. 
 data
.
forEach
(
function
 
(
item
)
 
{

    148.    
  148. 
 
const
 val 
=
 generateConfirmationValue
(
item
);

    149.    
  149. 
 $
(
'<tr><th>'
 
+
 item
.
label 
+
 
'</th><td>'
 
+
 val 
+
 
'</td></tr>'
).
appendTo
(
$table
)

    150.    
  150. 
 
});

    151.    
  151. 
 

    152.    
  152. 
 $table
.
appendTo
(
$confirmationWrapper
);

    153.    
  153. 
 $confirmationWrapper
.
appendTo
(
$rootElm
);

    154.    
  154. 
 

    155.    
  155. 
 
// 戻る/送信ボタンの生成、アペンド

    156.    
  156. 
 
let
 $btnWrapper 
=
 $
(
'<ul></ul>'
)

    157.    
  157. 
 
const
 $prevBtn 
=
 $
(
'<li><a href="#">戻る</a></li>'
);

    158.    
  158. 
 
const
 $submitBtn 
=
 $
(
'<li><a href="#">送信</a></li>'
);

    159.    
  159. 
 $prevBtn
.
on
(
'click'
,
 
function
()
 
{

    160.    
  160. 
 $confirmationWrapper
.
hide
();

    161.    
  161. 
 $formWrapper
.
show
();

    162.    
  162. 
 
});

    163.    
  163. 
 $submitBtn
.
on
(
'click'
,
 
function
()
 
{

    164.    
  164. 
 sendDataToHS
(
data
);

    165.    
  165. 
 
});

    166.    
  166. 
 

    167.    
  167. 
 $prevBtn
.
appendTo
(
$btnWrapper
);

    168.    
  168. 
 $submitBtn
.
appendTo
(
$btnWrapper
);

    169.    
  169. 
 $btnWrapper
.
appendTo
(
$confirmationWrapper
);

    170.    
  170. 
 
}

    171.    
  171. 
 

    172.    
  172. 
 
/**

    173.    
  173. 
 * HubSpot CRMへデータ送信

    174.    
  174. 
 * @param {Array} data

    175.    
  175. 
 */

    176.    
  176. 
 
function
 sendDataToHS
(
data
)
 
{

    177.    
  177. 
 
// 入力のない項目を削除

    178.    
  178. 
 
let
 filteredFormData 
=
 data
.
filter
(
function
 
(
item
)
 
{

    179.    
  179. 
 
return
 item
.
value
;

    180.    
  180. 
 
});

    181.    
  181. 
 
// HubSpot APIの形に合わせ不要なプロパティの削除、配列をセミコロンで結合

    182.    
  182. 
 
const
 formData 
=
 filteredFormData
.
map
(
function
 
(
item
)
 
{

    183.    
  183. 
 
delete
 item
.
label
;

    184.    
  184. 
 
delete
 item
.
valueLabel
;

    185.    
  185. 
 
if
 
(
Array
.
isArray
(
item
.
value
))
 
{

    186.    
  186. 
 item
.
value 
=
 item
.
value
.
join
(
';'
);

    187.    
  187. 
 
}

    188.    
  188. 
 
return
 item
;

    189.    
  189. 
 
});

    190.    
  190. 
 

    191.    
  191. 
 
function
 getCookieAsObj
(){

    192.    
  192. 
 
if
(
document
.
cookie 
===
 
''
)
 
return
 
false
;

    193.    
  193. 
 

    194.    
  194. 
 
let
 obj 
=
 
{}

    195.    
  195. 
 document
.
cookie
.
split
(
';'
).
forEach
(
function
(
str
)
 
{

    196.    
  196. 
 
const
 keyValArr 
=
 str
.
split
(
'='
);

    197.    
  197. 
 obj
[
keyValArr
[
0
].
replace
(
/ +/
g
,
 
''
)]
 
=
 decodeURIComponent
(
keyValArr
[
1
])

    198.    
  198. 
 
})

    199.    
  199. 
 
return
 obj
;

    200.    
  200. 
 
}

    201.    
  201. 
 

    202.    
  202. 
 
const
 sendData 
=
 
{

    203.    
  203. 
 fields
:
 formData
,

    204.    
  204. 
 context
:
 
{

    205.    
  205. 
 hutk
:
 getCookieAsObj
().
hubspotutk
,

    206.    
  206. 
 pageUri
:
 
'{{ content.absolute_url }}'
,

    207.    
  207. 
 pageName
:
 
'{{ page_meta.html_title }}'

    208.    
  208. 
 
},

    209.    
  209. 
 
}

    210.    
  210. 
 

    211.    
  211. 
 $
.
ajax
({

    212.    
  212. 
 type
:
 
'POST'
,

    213.    
  213. 
 url
:
 
'https://api.hsforms.com/submissions/v3/integration/submit/{{ hub_id }}/{{ module.form.form_id }}'
,

    214.    
  214. 
 dataType
:
 
'json'
,

    215.    
  215. 
 headers
:
 
{

    216.    
  216. 
 
'Content-Type'
:
'application/json'

    217.    
  217. 
 
},

    218.    
  218. 
 data
:
 JSON
.
stringify
(
sendData
)

    219.    
  219. 
 
})

    220.    
  220. 
 
.
done
(
function
 
(
data
)
 
{

    221.    
  221. 
 afterSubmit
();

    222.    
  222. 
 
})

    223.    
  223. 
 
.
fail
(
function
 
(
jqXHR
,
 textStatus
,
 err
)
 
{

    224.    
  224. 
 console
.
error
(
textStatus
);

    225.    
  225. 
 
if
 
(
$
(
'.js_hsFormErrorMessage'
).
length 
<
 
1
)
 
{

    226.    
  226. 
 $
(
'<p class="js_hsFormErrorMessage">データの送信に失敗しました。インターネットの接続状況をご確認いただくか、お手数ですが時間をおいて再度お試しください。</p>'
).
appendTo
(
$rootElm
);

    227.    
  227. 
 
}

    228.    
  228. 
 
});

    229.    
  229. 
 
}

    230.    
  230. 
 

    231.    
  231. 
 
/**

    232.    
  232. 
 * ページ編集画面のカスタムモジュールの設定に基づいた、フォーム送信後の挙動を実現

    233.    
  233. 
 */

    234.    
  234. 
 
function
 afterSubmit
()
 
{

    235.    
  235. 
 
if
 
(
'{{ module.form.response_type }}'
 
===
 
'redirect'
)
 
{

    236.    
  236. 
 location
.
href 
=
 
'{{ module.form.redirect_id ? page_by_id(module.form.redirect_id).absoluteUrl : module.form.redirect_url }}'
;

    237.    
  237. 
 
}
 
else
 
{

    238.    
  238. 
 $rootElm
.
children
().
remove
();

    239.    
  239. 
 $
(
'{{ module.form.message|replace("\n", "") }}'
).
appendTo
(
$rootElm
);

    240.    
  240. 
 
}

    241.    
  241. 
 
}

    242.    
  242. 
 

    243.    
  243. 
 
return
 
{

    244.    
  244. 
 init
:
 initialize

    245.    
  245. 
 
}

    246.    
  246. 
 
})()

    247.    
  247. 
 

    248.    
  248. 
 window
.
addEventListener
(
'message'
,
 event 
=>
 
{

    249.    
  249. 
 
if
(
event
.
data
.
type 
===
 
'hsFormCallback'
 
&&
 event
.
data
.
eventName 
===
 
'onFormReady'
)
 
{

    250.    
  250. 
 hsForm
.
init
(
'.hsForm_{{ module.form.form_id }}'
);

    251.    
  251. 
 
}

    252.    
  252. 
 
});

    253.    
  253. 
})();

    254.    
  254. 
</
script
>

    255.

プライベート変数宣言とinitialize関数

最初にまず、各関数で共通して使用するプライベート変数を宣言します。頭に「$」が付いているものにはjQueryオブジェクトが入ります。initialize関数にて変数に値を代入し、早速HubSpotのフォーム標準のsubmitイベントをジャックします。

validateForms関数を実行し、問題無ければフォームからデータを収集して送信、バリデーションにエラーがあればエラーメッセージを表示します。

validateForms関数

念のためIE11もサポート対象としたので、不本意ながらPromiseではなくjQuery Deferredによる非同期実装としています。バリデーション自体を独自実装したくないため、各フォームパーツでchangeイベントを呼び、HubSpotのフォーム標準のバリデーションを呼び出すようにしています。

不格好ではありますがさっくり確実性を期すためsetTimeout内でHubSpotフォーム標準のエラーメッセージが出力されていないかチェックし、rejectかresolveを実行します。

returnFormData関数

フォームからデータを収集して、各フォームパーツのデータをオブジェクトとした配列を返します。確認画面の出力のためにラベルを取得しなければならず、結構泥臭いコードになっています。

showConfirmation関数

本記事の主役である確認画面を生成します。フォームを非表示にし、returnFormData関数で組み立てたデータからHTMLをゴリゴリ生成します。valueをそのまま表示できないラジオボタンなどがなんとも面倒ですね。戻るボタンをクリックしたら確認画面を非表示にし、フォームを再度表示させます。

sendDataToHS関数

Submit form data  APIに実際にデータを送信する関数です。引数で受け取ったデータの中には確認画面表示のためのプロパティなどもありますので、いらないものを削除します。また、適宜HubSpotが受け取る形に合わせてデータを整形します。HubSpotが受け取るデータの形については、「 HubSpot APIの使い方 」ページの末尾の付録をご参照ください。

送信に成功したら後処理のafterSubmit関数を呼びますが、失敗した場合は申し訳程度のエラーメッセージを表示します。

afterSubmit関数

カスタムモジュールの設定に合わせて、リダイレクトするかインラインメッセージを表示するかします。

まとめ

以上、簡単ですがHubSpotのフォームに手軽に確認画面を実装する方法をご紹介しました。もしかしたら細かいバグなどあるかもしれませんが、おおよそ問題ないかと思います。※コピペ＆バグが原因で起こった問題に関しては責任を取れませんので、自己責任のもとご利用くださいませ。

執筆者：Admin

関連記事

© Pensees