確認メッセージに紅葉を添える方法

はじめに

フォーム送信時の確認メッセージに紅葉を追加したいですか?このチュートリアルでその手順を説明します!

以前のチュートリアルでは、フォームが送信されたときに降ってくる紙吹雪と花火を追加する方法を紹介しました。このチュートリアルでは、同様のアプローチにいくつかのステップを追加します。

フォームの作成

まず、新しいフォームを作成し、必要なフィールドを追加します。このステップでサポートが必要な場合は、こちらのドキュメントを参照してください

フォームを作成し、フィールドを追加する

確認の設定

落ち葉のアニメーションを表示するには、確認メッセージに変更を加える必要があります。これを行うには、「設定」をクリックし、「確認」を選択します。 確認メッセージの下にHTML要素を追加します。

設定]、[確認]の順にクリックし、確認メッセージに変更を加えます。そこで、「テキスト」タブをクリックして、次のステップのHTMLを追加します。

確認メッセージにHTMLを追加する

確認メッセージにHTMLを含める準備ができましたので、以下のコードをコピーしてメッセージボックスに貼り付けてください:

<p>Thanks for your feedback!</p>

<canvas id="canvas" />
<img id="leaf" src="http://mysite.com/path-to-image" />

確認メッセージのテキストタブに上記のHTMLを追加する。

このチュートリアルでは、1枚のリーフを使い、そのリーフがランダムにドロップされるようにします。 キャンバス エリアだ。 散る紅葉

葉をアップロードした場所に合わせて、画像のソースを変更する必要があります。

落ち葉のスニペットを追加

さて、いよいよこのすべてをまとめるコードを追加する番だ。コード・スニペットをサイトに追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Add falling autumn leaves to the canvas element on the confirmation message
 *
 * @link  https://wpforms.com/developers/how-to-add-falling-autumn-leaves-to-your-confirmation-message/
 *
 */
 
function wpf_falling_autumn_leaves_animation() {
    ?>

	<script type="text/javascript">
	let canvas = document.querySelector('canvas');
	let ctx = canvas.getContext('2d');

	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;

	let width = canvas.width;
	let height = canvas.height;
	let centerX = canvas.width / 2;
	let centerY = canvas.height / 2;
	let leaf = document.querySelector('#leaf');
	let leafs = [];
	let count = 200;

	for (let i = 0; i < count; i++) {  
	  let angle = 15 + Math.random() * 30
	  let dir = [-1,1][Math.floor(Math.random() * 2)];

	  leafs.push({
		x: Math.random() * width,
		y: Math.random() * height,
		w: 30,
		h: 30 * (leaf.height / leaf.width),
		v: 20 / angle,
		a: angle,
		d: dir,
		anim: true
	  });
	}

	function update(dt) {
	  for (let i = 0; i < leafs.length; i++) {
		if (leafs[i].anim) {
		  leafs[i].y += leafs[i].v;

		  if (leafs[i].y > height) {
			leafs[i].y = -120;
			leafs[i].x = Math.random() * width;
		  }
		}
	  }
	}

	function draw(dt) {
	  requestAnimationFrame(draw);
	  update(dt);

	  ctx.clearRect(0, 0, width, height);

	  for (let i = 0; i < leafs.length; i++) {
		ctx.save();

		if (leafs[i].anim) {
		  ctx.translate(leafs[i].x, leafs[i].y);

		  ctx.rotate(
			leafs[i].d * Math.sin(dt * 0.002 * i * 0.01) * (leafs[i].a) * Math.PI / 180
		  ); 
		} 

		ctx.globalAlpha = Math.max(0, leafs[i].y * 0.1);
		ctx.drawImage(leaf, -leafs[i].w / 2, 70, leafs[i].w, leafs[i].h);

		ctx.restore();
	  }
	}

	draw();
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_falling_autumn_leaves_animation', 1);

上記のスニペットで注意すべき重要な設定は以下の通りである。 let count = 200;.画面に表示される落ち葉の量を設定します。この数値を大きくすると紅葉が多く表示され、小さくすると紅葉が少なくなります。

CSSの追加

このチュートリアルでは、キャンバスに1つのCSSルールを追加します。

あなたのサイトによっては、さらにCSSが必要になるかもしれません。ヘルプが必要な場合やさらに質問がある場合は、いつでもFacebookのコミュニティに参加して質問やサポートを受けることができます。

canvas {
    display: block;
    position: absolute !important;
    top: 0;
	left: 0;
}

CSSを追加する場所や方法についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください

これらのステップがすべて完了し、ユーザーがフォームに記入すると、確認メッセージのすぐ上に紅葉が落ちているのが見える。

JavaScriptとcanvas要素を使ったアニメーションによる紅葉の落葉

以上です!確認メッセージに紙吹雪を追加するチュートリアルをまだご覧になっていない方は、確認メッセージに紙吹雪のアニメーションを追加する方法のチュートリアルをぜひご覧ください。

アクション・リファレンス:wpforms_wp_footer_end