### [Ajaxフォーム送信の有効化](https://wpforms.com/docs/how-to-enable-ajax-form-submissions/)

**公開日:** 2023年11月23日
**著者:** ウマール・マジード

**抜粋:** 訪問者がフォームを送信した際にページがリロードされないようにする方法について学びます。

**内容:**

フォーム送信時にページがリロードされるのを防ぎたいですか？デフォルトでは、ユーザーが送信ボタンをクリックするとページ全体がリロードされます。これにより入力データの保存や通知メールの送信などが可能になります。しかし、AJAXフォーム送信を利用すれば、ページ全体をリロードすることなくフォームを送信し、これらの処理を実行できます。

このチュートリアルでは、フォームにAJAX送信を有効化する方法を説明します。

![AJAXフォーム送信の有効化概要](https://wpforms.com/wp-content/uploads/2023/05/ajax-submission-overview.gif "AJAXフォーム送信の有効化概要")

---

### AJAXフォーム送信の有効化

開始前に、まずWordPressサイトにWPFormsが[インストールされ有効化されている](https://wpforms.com/docs/install-wpforms-plugin/ "WPFormsプラグインのインストール方法")こと、および[ライセンスの確認が完了している](https://wpforms.com/docs/verify-wpforms-license/ "WPFormsライセンスの確認方法") されていることを確認してください。その後、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "初めてのフォーム作成方法") するか、既存のフォームを編集してフォームビルダーにアクセスします。

フォームビルダーが開いたら、**設定 » 一般** に移動します。次に、**詳細設定** セクションまでスクロールすると、オプションの一覧が表示されます。**AJAXフォーム送信を有効にする** オプションを選択してください。

![Enable AJAX form submission](https://wpforms.com/wp-content/uploads/2021/10/enable-ajax-form-submission.png)

準備ができたら、**保存**ボタンをクリックして変更を保存します。

**注：**AJAXフォーム送信の有効化は、[モーダルやポップアップ内にフォームを埋め込む](https://wpforms.com/how-to-create-a-contact-form-popup-in-wordpress/ "WordPressポップアップフォームを簡単に作成する方法（ステップバイステップ）")場合に便利なオプションです。

### フォームのテスト

次に、必ずフォームをテストしてください。フォームを[プレビューする](https://wpforms.com/docs/how-to-properly-test-your-wordpress-forms-before-launching-checklist/#preview "公開前にWordPressフォームを適切にテストする方法 [チェックリスト]: フォームのプレビュー方法")するか、[ページに埋め込む](https://wpforms.com/docs/creating-first-form/#display-form "公開前にWordPressフォームを適切にテストする方法 [チェックリスト]: サイトへのフォーム表示方法")ことができます。その後、フォームを送信して、見た目や動作が意図した通りか確認してください。

![フォームテスト送信画面](https://wpforms.com/wp-content/uploads/2021/10/form-test-submission.gif)

**注意点:** フォーム送信時に画面表示位置を一切動かしたくない場合は、確認スクロールを無効化してください。フォームビルダーの**設定 » 確認** に移動し、**確認メッセージに自動的にスクロールする** オプションを無効にします。

### よくある質問

以下に、AJAXフォーム送信の有効化に関してよく寄せられる質問への回答をまとめました。

##### AJAXを有効にしたフォーム送信時に、新しいリンクを別タブで開くことはできますか？

はい、AJAX送信では、現在のページに確認メッセージを表示しながら、新しいリンクを別タブで開くようにフォームを設定できます。WPFormsでの設定方法については、[開発者向けドキュメント](https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission/)をご確認ください。

**注意：**この設定にはサイトへのコード追加など高度な機能が必要となるため、開発者向けであることをご了承ください。

以上です！これでユーザーはAJAX送信機能でシームレスにフォームを送信できるようになります。

次に、スマートフォームの作成方法について学びませんか？ ユーザー選択に応じてフォームがカスタマイズされた方法で反応する詳細については、[条件分岐ロジック](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/ "How to Use Conditional Logic with WPForms")に関するチュートリアルを必ずご確認ください。

**カテゴリ:** 機能性、フォーム作成

---