### [WordPress AJAXコンタクトフォームの作成方法（ページリロードなし）](https://wpforms.com/wordpress-ajax-contact-form/) **公開日:** 2019年7月29日 **著者:** Molly Tyler **内容:** オンラインフォームの送信時にページがリロードされないようにしたいですか？ フォーム送信後にページが更新されないようにすると、ユーザーエクスペリエンスが向上し、より多くのリードを獲得できる可能性があります。 ## WordPress AJAXコンタクトフォームの作成 このWordPress AJAXコンタクトフォームチュートリアルは、WPFormsに含まれる[2,100以上のWordPressフォームテンプレート](https://wpforms.com/templates/)のいずれでも機能します。 *注意: AJAXは最新バージョンのWPFormsでは自動的に有効になっています。このチュートリアルでは、古いバージョンでフォームを作成した場合にそれをオンにする方法を説明します.* ### 1. 新規フォームの作成 まず、[WPFormsプラグイン](https://wpforms.com/pricing/)をインストールして有効化します。詳細については、[WordPressでプラグインをインストールする方法](https://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/)のステップバイステップチュートリアルを参照してください。 WPFormsプラグインをインストールしたら、**WPForms » 新規追加**に移動して新しいフォームを作成します。 リストからテンプレートを選択します。  このチュートリアルでは、**シンプルなコンタクトフォーム**テンプレートを使用します。 ### 2. フォームのカスタマイズ 次に、フォームを作成します。ビルダーの左側からプレビューエリアの右側にドラッグアンドドロップすることで、フォームフィールドを簡単にカスタマイズできます。 ファイルアップロードフィールドをコンタクトフォームに追加して、ユーザーが提出時に関連ドキュメントを含めることができるようにします。  フォーム内でフィールドを上下にドラッグして、配置を好みに合わせて調整します。 プレビューエリアのフィールドをクリックすると、追加オプションを開くこともできます。これにより、フィールドラベルの変更、条件付きロジックの追加などが可能になります。  準備ができたら、右上にあるオレンジ色の**保存**ボタンをクリックします。  ファイルアップロードフィールドを含むフォームを作成したので、AJAXを有効にしましょう。 ### 3. AJAXフォーム送信の有効化 次に、ページ左側の**設定**をクリックします。次に、**一般**セクションを選択します。  右側パネルの下部で、**詳細設定**を展開し、**AJAXフォーム送信を有効にする**設定を見つけます。オンになっていることを確認してください。  これで完了です！フォームはAJAX送信用に有効になりました。 AJAXコンタクトフォームで、他にもいくつか重要な設定を行いましょう。 ### 4. フォーム通知の設定 次に、フォームのメール通知を設定する必要があります。これらは、AJAX対応フォームが送信されたときに知るための優れた方法です。 まず、**設定 » 通知**に移動します。  通知機能を無効にしない限り、AJAXフォームが送信されるたびにメール通知が届きます。 これらの設定の入力方法については、[WordPressでフォーム通知を設定する方法](https://wpforms.com/docs/setup-form-notification-wpforms/)のチュートリアルを参照してください。 この例では背景色がグレーですが、必要に応じて他の色に変更できます。これらのパーソナライズされた調整により、メール通知がよりプロフェッショナルに見え、個人的なタッチを与えることができます。[メールテンプレートにカスタムヘッダーを追加する方法](https://wpforms.com/docs/how-to-add-custom-header-image-in-your-wpforms-email-template/)ガイドをご覧ください。 ### 5. 確認メッセージの設定 フォームの確認メッセージにより、ユーザーがフォームに情報を送信した直後に（自動的に）アクションを実行できます。  WPFormsには3種類の確認メッセージがあります。 1. **メッセージ —** これは、ユーザーがフォームを送信した後に表示されるデフォルトの確認タイプであり、カスタマイズ可能です。訪問者の満足度を高めるために[確認メッセージをカスタマイズする方法](https://wpforms.com/form-success-message-ideas-to-boost-customer-happiness/)のヒントをご覧ください。 2. **ページ表示 —** サイト上の任意のページにユーザーを自動的に送信します。 3. **リダイレクト —** より複雑な開発のために、ユーザーを別のウェブサイトまたは専門のURLに移動させたい場合に便利です。 このステップの追加ヘルプについては、[フォーム確認の設定方法](https://wpforms.com/docs/setup-form-confirmation-wpforms/)のチュートリアルを参照してください。 通知と確認の設定が完了したら、フォームを再度保存してください。 ### 6. AJAXフォームの埋め込み AJAX対応フォームの設定が完了したら、サイトに追加したいでしょう。 WPFormsを使用すると、ページ、ブログ投稿、[サイドバーウィジェット](https://wpforms.com/how-to-add-a-contact-form-in-wordpress-sidebar-widget/)など、ウェブサイトの複数の場所にフォームを追加できます。最も一般的な配置オプションであるページまたは投稿への埋め込みを見てみましょう。 まず、WordPressで新しいページまたは投稿を作成するか、既存のものをエディターで開きます。 次に、新しいブロックを追加し、**WPForms**アイコンを選択します。すぐに見つからない場合は、検索して見つけることができます。  便利なWPFormsウィジェットがブロック内に表示されます。WPFormsドロップダウンをクリックし、作成済みのフォームの中から挿入したいフォームを選択します。AJAXフォームを選択します。  次に、右上にある「公開」または「更新」という青いボタンをクリックして、フォームをウェブサイトに表示します。  これで完了です。ページリロードなしでWordPress AJAXコンタクトフォームを作成する方法がわかりました。ウェブサイト訪問者はさらに喜ぶでしょう。 ### AJAXフォームに関するよくある質問 #### AJAXフォームとは何ですか？ AJAX対応フォームは、ページ全体をリロードすることなく、バックエンドプロセスを送信および実行できる、高速で動的なフォームです。  デフォルトでは、ユーザーが送信ボタンを押すとページ全体がリロードされます。これは、フォームデータの保存、通知メールの送信など、特定のプロセスを実行する必要があるためです。 しかし、WordPressとWPFormsはAJAXフォームをサポートしているため、ユーザーがフォームを送信した後にフォームがリロードされないように、AJAXフォーム送信を有効にするオプションがあります。 #### コンタクトフォームでAJAXが使用されるのはなぜですか？ AJAX対応フォームは、あらゆる規模のウェブサイトにとって必須のものとなっています。 AJAXがコンタクトフォームで急速に人気を集めている主な理由は次のとおりです。 - より良いユーザーエクスペリエンスを提供します。 - 非常に高速な読み込み時間と[WordPressサイトの速度](https://www.wpbeginner.com/wordpress-performance-speed/)の向上。 - モーダルやポップアップにフォームが表示されたままになり、フォローアップアクションやメッセージを表示して[売上を促進](https://wpforms.com/how-to-boost-sales-with-order-form-optimization/)できます。 - フォームが処理中であることを示す視覚的な合図と保証を提供します。 ### 次に、WordPressポップアップフォームを作成する 送信後にポップアップを開いたままにできるようになったので、ターゲットメッセージを表示するための優れたプラグインが必要になります。 - [最高のWordPressポップアッププラグイン](https://wpforms.com/best-wordpress-popup-plugins/)に関する投稿をお読みください。 - [WordPressでポップアップフォームを作成する2つの方法](https://wpforms.com/how-to-create-a-contact-form-popup-in-wordpress/)を確認してください。 - そして最後に、WPFormsを使用して[クーポンコード付きのポップアップを作成する方法](https://wpforms.com/how-to-create-a-coupon-popup-in-wordpress/)を学びます。 フォームを作成する準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。[WPForms Pro](https://wpforms.com/pricing)には多くの無料テンプレートが含まれており、14日間の返金保証が付いています。 この記事がお役に立った場合は、[Facebook](https://facebook.com/wpforms)と[Twitter](https://twitter.com/easywpforms)でフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。 **カテゴリー:** WordPressチュートリアル **タグ:** ajax, コンバージョン, ファイルアップロード, フォームテンプレート, リードジェネレーション ---