AI要約
オンラインフォームの送信時にページが再読み込みされないようにしますか？
フォームへの送信後にページが更新されないようにすると、ユーザーエクスペリエンスが向上し、より多くのリードを獲得できるようになります。
この記事の内容
WordPress AJAXお問い合わせフォームを作成する
このWordPress AJAXお問い合わせフォームチュートリアルは、WPFormsに含まれる2,100以上のWordPressフォームテンプレートのいずれでも機能します。
注意：WPFormsの最新バージョンではAJAXは自動的に有効になっています。このチュートリアルでは、古いバージョンでフォームを作成した場合に有効にする方法を説明します。
1. 新規フォームを作成する
まず、WPFormsプラグインをインストールして有効化します。詳細については、WordPressにプラグインをインストールする方法に関するこのステップバイステップチュートリアルをご覧ください。
WPFormsプラグインをインストールしたら、WPForms » 新規追加に移動して新しいフォームを作成します。
リストからテンプレートを選択します：
このチュートリアルでは、シンプルな連絡フォームテンプレートを使用します。
2. フォームをカスタマイズする
次に、フォームを作成します。ビルダーの左側からプレビューエリアの右側にドラッグすることで、フォームフィールドを簡単にカスタマイズできます。
ユーザーが関連ドキュメントを送信に含めることができるように、お問い合わせフォームにファイルアップロードフィールドを追加します。
フォーム内で上下にドラッグすることで、フィールドの配置をお好みに調整できます。
また、プレビューエリアのフィールドをクリックすると、追加オプションを開くことができます。これにより、フィールドラベルの変更、条件付きロジックの追加などが可能になります。
準備ができたら、右上にあるオレンジ色の保存ボタンをクリックします。
ファイルアップロードフィールドを含むフォームを作成したので、AJAX用に有効化しましょう。
3. AJAXフォーム送信を有効にする
次に、ページ左側の設定をクリックします。次に、一般セクションを選択します。
右側パネルの下部で、詳細設定オプションを展開し、AJAXフォーム送信を有効にする設定を見つけます。トグルがオンになっていることを確認してください。
これで完了です！フォームはAJAX送信用に有効になりました。
AJAXお問い合わせフォームに関するその他の重要な設定をいくつか構成しましょう。
4. フォーム通知を設定する
次に、フォームのメール通知を設定する必要があります。これらは、AJAX対応フォームが送信されたときに知るための優れた方法です。
まず、設定 » 通知に移動します。
通知機能を無効にしない限り、AJAXフォームが送信されるたびにメール通知が届きます。
設定方法のヘルプについては、WordPressでフォーム通知を設定する方法のチュートリアルをご覧ください。
この例では背景色がグレーですが、必要に応じて他の色に変更できます。これらのパーソナライズされた調整により、メール通知をよりプロフェッショナルに見せ、個人的なタッチを加えることができます。カスタムヘッダーをメールテンプレートに追加する方法のガイドをご覧ください。
5. 確認メッセージを設定する
フォーム確認により、ユーザーがフォームに情報を送信した後、すぐに（自動的に）アクションを実行できます。
WPFormsには3種類の確認があります。
- メッセージ — フォームの送信後に表示されるデフォルトの確認タイプで、カスタマイズ可能です。サイト訪問者の満足度を高めるために確認メッセージをカスタマイズする方法についてのヒントをご覧ください。
- 表示ページ — ユーザーをサイト上の任意のページに自動的に送信します。
- リダイレクト — より複雑な開発のために、ユーザーを別のウェブサイトまたは専門のURLに誘導したい場合に便利です。
このステップに関する追加のヘルプについては、フォーム確認の設定方法のチュートリアルをご覧ください。
通知と確認の設定が完了したら、再度フォームを保存してください。
6. AJAXフォームを埋め込む
AJAX対応フォームの設定が完了したら、サイトに追加します。
WPFormsを使用すると、ページ、ブログ投稿、サイドバーウィジェットなど、ウェブサイトの複数の場所にフォームを追加できます。最も一般的な配置オプションであるページまたは投稿への埋め込みを見てみましょう。
まず、WordPressで新しいページまたは投稿を作成するか、エディターで既存のものを開きます。
次に、新しいブロックを追加し、WPFormsアイコンを選択します。すぐに見つからない場合は、検索して見つけることができます。
便利なWPFormsウィジェットがブロック内に表示されます。WPFormsドロップダウンをクリックし、作成済みのフォームの中からページに挿入したいものを選択します。AJAXフォームを選択します。
次に、右上にある「公開」または「更新」と表示された青いボタンをクリックして、フォームをウェブサイトに表示させます。
これで完了です。これで、ページリロードなしで簡単なWordPress AJAXお問い合わせフォームを作成する方法がわかりました。ウェブサイト訪問者はさらに喜ぶでしょう。
AJAXフォームに関するよくある質問
AJAXフォームとは？
AJAX対応フォームは、ページ全体をリフレッシュする必要なく、バックエンドプロセスを送信および実行できる、高速で動的なフォームです。
デフォルトでは、ユーザーが送信ボタンを押すとページ全体がリロードされます。これは、フォームデータの保存、通知メールの送信など、特定のプロセスを実行する必要があるためです。
しかし、WordPressとWPFormsはAJAXフォームをサポートしているため、誰かがフォームを送信した後にフォームがリフレッシュしないように、AJAXフォーム送信を有効にするオプションがあります。
お問い合わせフォームでAJAXが使用されるのはなぜですか？
AJAX対応フォームは、あらゆる規模のウェブサイトで必須のものとなっています。
お問い合わせフォームでAJAXが急速に人気を集めている主な理由は次のとおりです。
- はるかに優れたユーザーエクスペリエンスを提供します。
- 非常に高速な読み込み時間とWordPressサイトの速度の向上。
- フォームが含まれるモーダルやポップアップを開いたままにして、フォローアップアクションやメッセージを表示して売上を伸ばすことができます。
- フォームが処理中であることを示す視覚的な合図と保証を提供します。
次に、WordPressポップアップフォームを作成します
これで、送信ボタンを押した後もポップアップを開いたままにできるようになったので、ターゲットメッセージを表示するための優れたプラグインが必要になります。
- 最高のWordPressポップアッププラグインに関する投稿をお読みください。
- WordPressでポップアップフォームを作成する2つの異なる方法をチェックしてください。
- そして最後に、WPFormsを使用してクーポンコード付きのポップアップを作成する方法を学びます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
ありがとうございます
指示に従いましたが、機能しません。
カスタム処理を行うフォームを送信すると、/wp-admin/admin-ajax.php へのリクエストが2件表示されます。 最初のリクエスト（実際にトリガーしているもの）は、Forbidden（ノンスに関連）で失敗し、フォームデータに対して何らかの処理を行うカスタム関数をトリガーしたいのです。 2番目のリクエストは成功しますが、スキップしたい確認メッセージが返されます。
どうすればこれを実現できますか？カスタム処理を行うAJAXフォームを実現するにはどうすればよいですか？
ありがとうございます。
Eliさん、こんにちは。お探しのものを実現するにはカスタムソリューションが必要なようです。この件については、Seahawkにご相談いただくことをお勧めします。