### [Form Pages アドオン使用時にページに JavaScript を追加する方法](https://wpforms.com/developers/how-to-add-javascript-to-a-page-when-using-the-form-pages-addon/)

**公開日:** 2021年5月21日
**作成者:** 編集チーム

**概要:** このチュートリアルでは、Form Pagesアドオンを使用して作成されたフォームにカスタムスクリプトを追加する方法をご紹介します。

**内容:**

**Form Pages**アドオンで作成されたフォームへのJavaScript統合を効率化したいとお考えですか？ それなら、最適な解決策をご用意しています！ **Form Pages**フォームを含むページ専用に設計された専用のフックを活用する方法をご紹介します。 この専用のフックを使用することで、スクリプトは**Form Pages**フォームを含むページでのみ読み込まれるようになります。これにより、サイト全体での不要なスクリプト読み込みを防ぎ、パフォーマンスを最適化できます。

このタイプのフォームに関する詳細については、[Form Pages](https://wpforms.com/docs/how-to-install-and-use-the-form-pages-addon/ "Form Pages アドオン") アドオンのドキュメントをご確認ください。

## フォームの設定

このチュートリアルでは、**Form Pages**のフォーム送信時にちょっとしたアニメーションを表示するようにします。詳細については、[確認メッセージへのアニメーションの追加](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/)に関するガイドをご覧ください。

そこで、まずはフォームを作成し、**[Text]**タブにある**[Confirmation]**メッセージに**[canvas]**要素を追加することから始めます。

![フォームを作成し、ConfirmationメッセージのTextタブにcanvas要素を追加する](https://wpforms.com/wp-content/uploads/2022/05/wpforms-add-canvas-to-confirmation.jpg)Canvasの詳細については、[W3Schoolsのこちらの記事](https://www.w3schools.com/html/html5_canvas.asp)をご参照ください。

フォームの作成についてサポートが必要な場合は、[初めてのフォーム作成ガイド](https://wpforms.com/docs/creating-first-form/ "初めてのフォームの作成方法")をご確認ください。

## フォームページへのJavaScriptの追加

それでは、**Form Pages**のフォームにログを記録したいスクリプトを含むスニペットを追加しましょう。

サイトへのスニペットの追加についてサポートが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsにカスタムPHPまたはJavaScriptを追加する方法")をご覧ください。

![フォームページアドオンで作成したフォームにJavaScriptを追加する](https://wpforms.com/wp-content/uploads/2021/05/wpforms-form-pages-confirmation-confetti.jpg)**wpforms\_form\_pages\_footer**アクションを使用すれば、ページ上部へスクロールボタン、ライブチャットサービス、あるいは単にGoogleアナリティクスなど、任意のJavaScriptを呼び出すことができます。

これで設定は完了です！次に、フォームへの送信件数をリアルタイムでカウントしたい場合は、記事 [フォーム送信ごとにカウントを増やす方法](https://wpforms.com/developers/how-to-increment-a-count-on-each-form-submission/ "フォーム送信ごとにカウントを増やす方法") をご覧ください。

## アクションの参照

[wpforms\_form\_pages\_footer](https://wpforms.com/developers/wpforms_form_pages_footer/ "wpforms_form_pages_footer アクションの使用方法")

**カテゴリ:** アドオン

**タグ:** フォームページアドオン, JavaScript, JS

---