AI要約
はじめに
WPFormsの外にパーソナライズされたメッセージを表示することに興味がありますか？JavaScriptを活用することでこれを実現できます。その方法を説明します！
このチュートリアルでは、カスタマイズされたメッセージをページに追加するプロセスを説明します。このメッセージは、WPFormsの外でフォームフィールドの値を動的に表示し、ユーザー入力データをページにシームレスに統合して表示できるようにします。始めましょう！
ページに値を効果的に追加する方法を学びましょう。
リダイレクトページの作成
ページの冒頭部分には、3つの空のHTMLスパンで構成されるパーソナライズされたメッセージが表示されます。HTMLスパンは、ページ内にインラインコンテンツを埋め込むために使用される、インラインの非セマンティックHTML要素です。
次のステップでは、フォームは名と姓、およびユーザーの興味の選択を、後で構築するクエリ文字列を介して送信します。
クエリ文字列は、Webサーバーとの通信に使用されるデータまたはパラメータを含み、情報の取得を容易にするURLの不可欠な部分です。URLの疑問符（?）の後ろに配置され、アンパサンド（&）で区切られたキーと値のペアで構成されます。クエリ文字列内でフォームフィールド値を使用するための包括的なガイドについては、各フォームフィールドの詳細な内訳を提供するこのドキュメントを参照してください。
これらの空のスパンの作成を開始するには、まずページにカスタムHTMLブロックを挿入します。この紹介段落は、スパンに純粋なHTMLを含める必要があるため、このブロック内に配置されます。
WordPressページにカスタムHTMLブロックを追加するには、プラス（+）記号をクリックし、カスタム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>
フォームの作成
次に、フォームを作成し、必要なフィールドを追加しましょう。このフォーム作成プロセス中に支援が必要な場合は、この便利なガイドでステップバイステップの手順を確認してください。
このチュートリアルでは、基本的なお問い合わせフォームを作成してシンプルに保ちます。主な目的は、ユーザーが興味を共有できるようにし、毎月よりパーソナライズされたニュースレターを送信できるようにすることです。これを実現するために、名前、メールアドレス、興味をドロップダウンフィールドを使用して収集します。さらに、追加のメッセージがあれば伝えられるように、コメントセクションも提供しています。
リダイレクトURLのカスタマイズ
次のステップでは、リダイレクトURLをニーズに合わせて調整します。フォームを作成し、必要なフィールドを追加したら、フォームビルダーの設定に移動し、確認を選択します。
確認タイプのドロップダウンメニュー内で、「URLに移動（リダイレクト）」を選択します。確認リダイレクト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ですが、このフィールドで名と姓の両方を収集しているため、クエリ文字列にはパイプライン（|）の後に呼び出している方に応じてfirstまたはlastを付けて含めます。したがって、文字列内で{field_id="0|first"}を呼び出し、それをfirstNameのスパンIDに割り当て、{field_id="0|last"}をlastNameスパンに割り当てていることがわかります。
興味ドロップダウンの選択は{field_id="16"}を使用して渡され、interestスパンに割り当てられます。
URLを自分のサイトに合わせて更新する必要がありますが、フィールドIDも自分のフォームに合わせて更新する必要があります。フィールドIDを見つける場所がわからない場合は、このチュートリアルを確認してください。
スニペットの追加
次に、このスニペットをセットアップに統合しましょう。サイトにスニペットを追加するプロセスについて不明な場合は、この包括的なガイドを参照して詳細な手順を確認してください。
このチュートリアルでは、スニペットを処理するためにWPCodeプラグインを使用しました。
まず、新しいカスタムスニペットを作成します。適切な名前を付けます。コードタイプドロップダウンで、JavaScriptスニペットを選択します。場所ドロップダウンでは、サイト全体フッターを選択できます。これにより、JavaScriptスニペットがページ読み込み後にサイトに適切に配置され、実行されるようになります。
プロのヒント：スニペットを特定のページにのみ追加できるライセンスバージョンをお持ちの場合は、これを行うことをお勧めします。これにより、カスタムスニペットがすべてのページではなく、お礼ページにのみ実行されるようになります。この機能の詳細については、プラグインのページ固有のスニペットに関するドキュメントを確認してください。
/**
* 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プロパティを使用して、これらのパラメータをサンキューページの対応するspan IDに正確に割り当てます。
これで完了です！この時点から、訪問者が連絡フォームに入力すると、リダイレクトされたサンキューページで、名前と興味をパーソナライズしたメッセージで迎えられます。とても簡単です！🎉
クエリ文字列を使用して別のフォームを自動入力しますか？別のフォームからフォームフィールドを事前入力するためにクエリ文字列を使用する方法のチュートリアルをご覧ください。