WPFormsの外にパーソナライズされたメッセージを表示する方法

はじめに

WPFormsの外にパーソナライズされたメッセージを表示することに興味がありますか？JavaScriptを活用することで実現できます！

このチュートリアルでは、カスタマイズしたメッセージをページに追加する手順を説明します。このメッセージはWPFormsの外部でフォームフィールドの値を動的に表示し、ユーザが入力したデータをシームレスに統合してページに表示することができます。それでは始めましょう！

さっそく、あなたのページに効果的に付加価値をつける方法を学んでみよう。

リダイレクトページの作成

ページの冒頭には、3つの空のHTMLスパンからなるパーソナライズされたメッセージが表示されます。HTMLスパンとは、インライン・コンテンツをページ内に埋め込むために使われる、インラインの非意味的なHTML要素です。

この後のステップでは、フォームが姓と名の両方、そしてユーザーの興味の選択を、後で作成するクエリー文字列を通して送信します。

クエリー文字列はURLの一部で、ウェブサーバーとの通信に使用されるデータまたはパラメーターを含み、情報の検索を容易にします。URLのクエスチョンマーク(?)の後に位置し、アンパサンド(&)で区切られたキーと値のペアで構成されます。クエリー文字列内でフォームフィールドの値を使用するための包括的なガイドについては、各フォームフィールドの詳細な内訳を提供するこちらのドキュメントを参照してください。

これらの空のスパンの作成を開始するために、カスタムHTMLブロックをページに組み込むことから始めます。この導入段落は、スパンに純粋なHTMLを含める必要があるため、このブロック内に配置します。

カスタムHTMLブロックをWordPressページに追加するには、プラス（+）記号をクリックしてカスタムHTMLを検索し、ブロックを選択してページに挿入するだけです。

次に、このHTMLをコピーして、ページ上のHTMLブロックに追加する。

<p>Thanks <span id="firstName"></span> <span id="lastName"></span> 
for your interest in <span id="interest"></span>! 
Someone will be in touch with you soon!</p>

HTMLをコピーしてこのブロックに貼り付ける

フォームの作成

では、フォームを作成し、必要なフィールドを追加しましょう。このフォーム作成プロセスで何かサポートが必要な場合は、この便利なガイドでステップ・バイ・ステップの手順を確認してください。

このチュートリアルでは、基本的なお問い合わせフォームを作成することで、わかりやすくします。このチュートリアルの主な目的は、ユーザーが自分の興味・関心を共有し、よりパーソナライズされたニュースレターを毎月送ることができるようにすることです。これを達成するために、ドロップダウンフィールドを使用して、ユーザーの名前、メールアドレス、興味を収集します。さらに、ユーザーが伝えたいメッセージのためのコメント欄も用意しています。

リダイレクトURLのカスタマイズ

次のステップでは、リダイレクト URL をニーズに合わせて調整します。フォームを作成し、必要なフィールドを追加したら、フォームビルダーの設定に移動し、確認を選択します。

確認タイプのドロップダウンメニューで、"URLへ移動（リダイレクト）"を選択します。Confirmation Redirect URLフィールドに、最初のステップで作成したサンキューページのURLを入力します。この例では、URLは次のとおりです。 https://myexamplesite.com/thanks.

フォームから収集した名前と関心をページに入力するために、クエリー文字列を追加してこのURLを拡張します。このクエリー文字列には、紹介したスパンのIDが含まれ、フォームから特定のフォームフィールドに割り当てられます。その結果、包括的なURLは次のように表示されます。 https://myexamplesite.com/thanks?firstName={field_id="0|first"}&lastName={field_id="0|last"}&interest={field_id="16"}.

わかりやすくするために、このクエリー文字列を分解してみましょう。私たちのフォームが姓と名の両方を収集することを考えると、これらの値がURL内で正しく伝達されるように分離しなければなりません。フィールドIDは名称フィールドは 0しかし、このフィールドで姓と名を収集しているので、クエリー文字列には、パイプライン（｜）の後に続く第一または最後を呼び出している。文字列の中で {field_id="0|first"} のスパンIDに割り当てる。 firstName そして {field_id="0|last"} に割り当てられている。 lastName スパン。

について興味ドロップダウンの選択は {field_id="16"} に割り当てられる。 interest スパン。

自分のサイトに合わせてURLを更新する必要がありますが、自分のフォームに合わせてフィールドIDも更新する必要があります。フィールドIDの場所についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

スニペットの追加

では、スニペットをセットアップに組み込みましょう。スニペットをサイトに追加する手順がわからない場合は、こちらの包括的なガイドを参考にしてください。

このチュートリアルでは、スニペットを処理するためにWPCodeプラグインを採用しています。

まず、新しいカスタムスニペットを作成します。適当な名前を付けてください。コードの種類]ドロップダウンで、[JavaScriptスニペット]を選択します。Locationドロップダウンでは、Site Wide Footer を選択します。こうすることで、JavaScriptスニペットが適切に配置され、ページの読み込み終了後にサイト上で実行されるようになります。

プロからのアドバイス：特定のページにのみスニペットを追加できるプラグインのライセンス版をお持ちの場合は、この方法をお勧めします。これにより、カスタムスニペットがすべてのページで実行されるのではなく、サンキューページのみで実行されるようになります。この機能の詳細については、プラグインのドキュメント「Page-Specific snippets」をご覧ください。

/**
 * Display personalized message outside of the form using form submitted data.
 *
 * @link https://wpforms.com/developers/how-to-display-personalized-message-outside-wpforms/
 */

// Function to get URL query parameters
        function getQueryParameters() {
            var queryParams = {};
            var queryString = window.location.search.slice(1);
            var queryVars = queryString.split('&');

            for (var i = 0; i < queryVars.length; i++) {
                var pair = queryVars[i].split('=');
                var key = decodeURIComponent(pair[0]);
                var value = decodeURIComponent(pair[1]);
                queryParams[key] = value;
            }

            return queryParams;
        }

        // Get query parameters
        var params = getQueryParameters();

        // Populate spans with query parameter values
	    if (params.hasOwnProperty('firstName')) {
            document.getElementById('firstName').textContent = params['firstName'];
        }

        if (params.hasOwnProperty('lastName')) {
            document.getElementById('lastName').textContent = params['lastName'];
        }
        if (params.hasOwnProperty('interest')) {
            document.getElementById('interest').textContent = params['interest'];
        }

おわかりのように、クエリー文字列の値を抽出するために、URLを細かく分解している。その後 textContent プロパティを使用して、これらのパラメータを対応するスパンIDに正確に割り当てます。 ありがとう ページを参照されたい。

これで完了です！これ以降、訪問者がお問い合わせフォームに入力するたびに、リダイレクトされたサンキューページで、その人の名前と興味に合わせたメッセージが表示されます。とても簡単です！🎉

別のフォームにクエリ文字列を自動入力したいですか?別のフォームからクエリ文字列を使ってフォームフィールドに事前入力する方法のチュートリアルを見てみましょう。