AI要約
サイトでフォームを送信した後にユーザーに表示される内容をカスタマイズしますか？ WPFormsでは、確認設定を簡単に調整して、成功メッセージを表示したり、ユーザーをサイトの別のページに誘導したり、別のドメインにリダイレクトしたりできます。
このチュートリアルでは、WPFormsで利用可能な各フォーム確認タイプの設定方法を説明します。
まず、WPFormsがサイトにインストールされ有効化されていることを確認し、ライセンスを認証してください。次に、新しいフォームを作成するか、既存のフォームを編集する必要があります。
フォームビルダーを開いてフォームフィールドをカスタマイズしたら、設定 » 確認に移動します。
ここでは、3つの確認タイプオプションから選択します。メッセージの表示、ページの表示、URLへのリダイレクトです。それぞれについて以下に詳しく説明します。
確認メッセージの表示
WPFormsでは、メッセージがデフォルトの確認タイプです。ユーザーがフォームを送信すると、このメッセージが埋め込みフォームの代わりに表示されます。
このメッセージは、お好みに合わせてカスタマイズできます。検討すべきアイデアをいくつかご紹介します。
- メッセージをよりパーソナルに: 確認メッセージが訪問者にとって親しみやすく役立つものになるように、いくつかの提案をまとめました。
- インセンティブを提供する: ユーザーにフォーム送信を促したい場合は、ダウンロード可能なリードマグネットの提供を検討してください。確認メッセージにダウンロードリンクを追加できます。
- 条件付き確認を設定する: ユーザーの入力や選択に基づいて異なる確認メッセージを表示したい場合は、確認に条件付きロジックを適用できます。
追加の確認メッセージオプション
確認メッセージエディターを使用すると、メッセージをカスタマイズしたり、必要に応じて簡単なテキストスタイルを簡単に追加したりできます。
確認メッセージにスマートタグを含めることもできます。これにより、サイトの他の部分やユーザーの入力からデータを取得し、メッセージに表示できます。
メッセージエディターの下にあるスマートタグを表示をクリックして、確認メッセージに含めることができるオプションを表示します。
注意: サイトやユーザーの入力から確認メッセージにデータをプルする方法の詳細については、WPFormsでスマートタグを使用するの完全ガイドを参照してください。
また、確認メッセージに自動的にスクロールというラベルのオプションをオンまたはオフに切り替えることで、デフォルトのスクロールアニメーションを有効にするかどうかを選択できます。
この設定が有効になっている場合、ユーザーがフォームを送信すると、スクロール効果によってユーザーのビューが確認メッセージの上部に引き寄せられます。
最後に、エントリプレビューを表示するオプションをオンに切り替えることができます。これにより、確認メッセージの後にユーザーの入力と選択が表示されます。
注: エントリプレビューの表示に関するすべての詳細については、WPFormsでエントリプレビューを表示する方法に関するチュートリアル全体をご覧ください。
エントリプレビューオプションがオンになっている場合、4つのプレビュー スタイルから選択できます。フロントエンドでは、エントリプレビューは次のようになります。
ページの表示
「ページの表示」確認タイプを使用すると、フォームを送信した後にユーザーをサイトの別のページにリダイレクトできます。
「確認タイプ」メニューから「ページの表示」を選択すると、サイト上の公開済みのすべてのページの一覧が表示される追加のドロップダウンが表示されます。フォームを送信したときにユーザーを送信したいページを単純に選択してください。
サイトの公開済みページに加えて、このドロップダウンには「前のページに戻る（参照元）」オプションも含まれています。これを選択すると、ユーザーはフォーム送信前にいたページに戻ります。
ページ選択の下には、「URLパラメータ」というラベルのフィールドもあります。これにより、リダイレクトされたURLにカスタムクエリ文字列パラメータを追加できます。
たとえば、?status=success を追加すると、テーマまたはプラグインがそのパラメータをチェックするように設定されている場合、サイトで「フォームが正常に送信されました」という通知を表示できます。パラメータを使用して、「アカウントが正常に更新されました」メッセージを表示するなど、他のアクションをトリガーすることもできます。これは、ユーザー登録アドオンのユーザー更新機能でリダイレクトする場合に役立ちます。
注: 確認に使用するページは、この確認タイプを設定する前に作成して公開しておく必要があります。WordPressで新しいページを作成する方法については、WordPress Codexのページに関する記事を参照してください。
このオプションは、ユーザーを「ありがとう」ページにリダイレクトするためによく使用されます。ヒントと例については、「効果的な「ありがとう」ページを作成する方法」の記事をご覧ください。
URLへの移動（リダイレクト）
「URLに移動（リダイレクト）」確認タイプは、ユーザーを別のサイトに送信したい場合や、より複雑な開発のために特殊なURL構造を構築する必要がある場合に便利です。
フォームの確認設定でこのオプションを選択すると、フォームの完了後にユーザーを送信したいURLを入力するフィールドが表示されます。
注: フォームデータを使用してリダイレクトページにパーソナライズされたメッセージを表示するなど、高度なカスタマイズについては、このトピックに関する開発者向けドキュメントを参照してください。
よくある質問
以下に、フォーム確認メッセージの設定に関するよくある質問にお答えします。
確認メッセージの背景色をカスタマイズできますか？
はい。確認メッセージのCSSセレクターがわかれば、好きな色に合わせて色を変更できます。以下は確認メッセージのCSSセレクターです。
.wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
background: #e0ffc7;
border: 1px solid #b4d39b;
box-sizing: border-box;
}
注: CSSの使用に慣れていない場合は、CSS入門ガイドを必ず確認してください。
コードをコピーしてサイトに追加する必要があります。コードを追加したら、background プロパティを希望の色に更新してください。テキストの色も更新したい場合は、color プロパティを使用して設定してください。
注意：カスタム CSS スタイルが表示されない場合は、各プロパティの後に !important を追加して、デフォルトのスタイルを上書きしてください。
WPCode プラグインを使用すると、カスタム CSS コードをウェブサイトに簡単に追加できます。このプラグインの使用方法については、WordPress にカスタムコードスニペットを追加する方法のチュートリアルをご覧ください。
WPForms の確認メッセージでショートコードを使用できますか？
はい、WPForms の確認メッセージでショートコードを使用できます。実装方法については、ショートコードを確認メッセージに組み込む手順を説明した開発者向けドキュメントを参照してください。
これで完了です！各フォームの確認を設定できるようになりました。
次に、フォーム通知をカスタマイズしますか？フォームのメール通知を設定するチュートリアルをご覧ください。