### [確認メッセージに雪の降るアニメーションを追加する方法](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/) **公開日:** 2021年11月5日 **著者:** エディトリアルチーム **抜粋:** このチュートリアルでは、JavaScriptとPHPを使用して、確認メッセージに雪が降る効果を作成する方法を説明します。 **コンテンツ:** ## はじめに 確認メッセージに雪の降るアニメーションを追加したいですか？ PHPとJavaScriptを使用して、よりインタラクティブな効果を持つアニメーションを確認メッセージに追加できます。このチュートリアルでは、これを達成するための各ステップを分解します。 ## フォームの作成 まず、フォームを作成する必要があります。このチュートリアルの目的のために、注文フォームを作成しました。注文が完了すると、雪が降るアニメーションが表示される確認メッセージが表示されます。 フォームの作成にヘルプが必要な場合は、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")。 フィールドを追加したら、**設定**タブをクリックし、次に**確認**をクリックします。**確認メッセージ**ウィンドウ内で、**canvas**というIDを持つHTMLキャンバス要素を追加します。これにより、紙吹雪がどこに落ちるかを正確にターゲットにできます。 **確認**タブ内にいる場合は、メッセージボックスの**テキスト**タブをクリックすることを忘れないでください。このメッセージ領域に純粋なHTMLを追加するには、これを行う必要があります。  単純に追加します `` このキャンバス要素とIDを追加すると、この雪が表示される場所を制御できます。確認メッセージにのみ表示したいので、コードスニペットで具体的にターゲットにできる要素を追加しています。 このスニペットは、AJAXを使用しないフォームでのみ実行されます。フォームビルダーでAJAX設定をオフにする必要があります。この設定を無効にするには、フォームビルダーの**設定**タブに移動し、**詳細設定**の下にある**AJAXフォーム送信を有効にする**設定を**無効**にします。  ## キャンバスラッパーのCSSの追加 ``ラッパーにもカスタムCSSを追加する必要があります。カスタムCSSの追加方法と場所についてヘルプが必要な場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")。このCSSをコピーしてサイトに貼り付けるだけです。 ``` canvas#canvas { position: absolute; top: 0; left: 0; } ``` ## 雪を作成するためのコードスニペットの追加 いよいよ魔法を起こすコードスニペットを追加します。サイトにスニペットを追加するのに役立つ場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsのカスタムPHPまたはJavaScriptの追加方法")。 ``` /** * 確認メッセージのキャンバス要素に雪を降らせる * * @link https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/ */ function wpf_dev_winter_scene_animation() { ?> **カテゴリー:** チュートリアル **タグ:** Javascript, JS, PHP ---