WordPress AJAXフォームの作成方法（4つの簡単なステップ）

連絡フォームが遅くて使いにくいためにリードを失った経験はありますか？それはよく聞く話です。私たちも、従来のWordPressフォームが、私たち自身にとっても読者にとっても、どれほどイライラするものか、身をもって経験してきました。

AJAXフォームはこの問題を解決し、あなたのためにも同じことができます。

これらの最新のフォームは、ページをリフレッシュせずに即座にデータを送信します。これにより、訪問者のエンゲージメントを維持するのに役立つ、よりスムーズなエクスペリエンスが生まれます。

私たちは、これらのフォームをクライアントやパートナーのウェブサイトで何度も適用してきましたが、その結果は自ずと証明されています。

このガイドでは、WordPress AJAXフォームを構築するための実績のある4ステッププロセスを共有します。技術的な側面を簡素化する初心者向けのプラグインを使用するため、簡単にフォローできます。🙌

AJAXとは何か、そしてなぜフォームに使用するのか？

AJAXは、Asynchronous JavaScript and XMLの略で、開発者がページをリロードせずにデータを転送できるようにするJavaScriptプログラミング技術です。

ウェブフォームで最も一般的に使用されており、ユーザーはページをリロードせずにフォームデータを送信できます。これにより、フォーム送信が簡単かつ迅速になり、全体的なユーザーエクスペリエンスが向上します。

さらに、GmailやFacebookのようなWebアプリケーションは、バックグラウンドで全てをシームレスに動作させながら、ユーザーを惹きつけるためにこのテクニックを広く利用しています。

WordPressサイトのフォームにAJAXを使用できます。これにより、ユーザーは不要なページリロードを避け、現在表示しているページに集中できます。

オンラインストアを運営していて、ユーザーの注意をそらすことなくユーザーフィードバックを収集したい場合に役立ちます。

同じAJAX機能は、ウェブサイト上の他のカスタムフォームにも使用できます。例えば、カスタムユーザーログインフォームがあれば、ユーザーは追加のページロードなしでログインできます。

それはさておき、4つの簡単なステップでWordPress AJAXコンタクトフォームを簡単に作成する方法を説明します。

さあ、始めましょう。

ステップ1：WPFormsプラグインをインストールする

まず最初に行うべきことは、フォームビルダーをインストールして有効化することです。

このチュートリアルでは、WPFormsプラグインを使用します。これは市場で最高のWordPressお問い合わせフォームビルダーであり、Ajax対応フォームも簡単に作成できます。

WPBeginnerでは、お問い合わせフォームの表示、年次読者アンケートの実施、移行サービスリクエストの管理などにWPFormsを使用しています。

素晴らしい経験でした。このプラグインの詳細については、WPFormsの完全レビューをご覧ください！

それでは、WPFormsをインストールして有効化しましょう。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

📝 注: AJAXフォームを作成するには、プラグインのProバージョンが必要です。ただし、アップグレードする前にドラッグアンドドロップビルダーと基本的なフォーム機能を試したい場合は、無料版のWPFormsがあります。

有効化したら、WPForms » 設定ページにアクセスしてライセンスキーを入力する必要があります。

ライセンスキーを入力すると、自動アップデートを受信し、アドオンをインストールできるようになります。

これで、WordPressで美しいAJAXフォームを作成する準備が整いました。

ステップ2：最初のフォームを作成する

それでは、最初のWordPressフォームを作成しましょう。

WordPress管理画面のWPForms » 新規追加ページにアクセスしてください。

次の画面で、まず新しいフォームに名前を付けることができます。たとえば、ここではフォームを「お問い合わせフォーム」と名付けました。

その後、フォームの作成方法を選択します。

WPFormsを使用すると、ゼロからフォームを作成したり、AIフォームビルダーを使用したり、2,000以上の既製テンプレートから選択したりできます。

たとえば、WPForms AIを使用したいとします。その場合、簡単なプロンプトを入力するだけで、プレビューエリアにフォームが生成されます。

ただし、このチュートリアルでは、問い合わせフォームを作成します。「シンプルな問い合わせフォーム」ボックスにカーソルを合わせ、「テンプレートを使用」をクリックします。

必要に応じて他のタイプのフォームも作成できることに注意してください。プロセスはほぼ同じです。

WPFormsは、基本的なフィールドが既に追加された状態でフォームを読み込みます。

ここから、フォームフィールドをクリックするだけで編集できます。

左側の列から新しいフォームフィールドを追加するには、それをクリックするだけです。

新しいフィールドは、送信ボタンのすぐ上、フォームの下部に表示されます。

次に、フォームフィールドをドラッグアンドドロップして順序を変更できます。

フォームのカスタマイズが完了したら、次のステップに進むことができます。

ステップ3: AJAXフォーム送信機能をオンにする

WPFormsでは、デフォルトでAJAXフォーム送信は有効になっていないため、フォームで手動で有効にする必要があります。

これを行うには、フォームビルダーの「設定」タブに切り替えるだけです。

「一般」設定タブで、「AJAXフォーム送信を有効にする」オプションの横にあるトグルをクリックしてください。

さて、フォーム送信後に何が起こるかを設定しましょう。

まず、設定の下にある「確認」タブに切り替えることができます。ここで、ユーザーにフォーム送信を受け取ったことを通知します。

WPFormsでは、さまざまな方法でそれが可能です。たとえば、ユーザーをURLにリダイレクトしたり、特定のページを表示したり、単に画面にメッセージを表示したりできます。

フォームでAJAX機能を有効にしたため、ユーザーを別のページにリダイレクトすると、AJAXフォームを作成する目的が損なわれます。

メッセージオプションを選択し、確認メッセージを編集する必要があります。エディタのフォーマットツールバーを自由に使い、次にユーザーがどこへ行くべきかを伝えるためのリンクを1つか2つ追加してください。

その後、フォーム送信についてどのように通知を受け取りたいかを設定できます。

フォーム設定の「通知」タブに切り替え、通知メール設定を構成します。

完了したら、フォームを保存してフォームビルダーを終了できます。

ステップ4：WordPressにAJAX対応フォームを追加する

WPFormsを使用すると、投稿、ページ、またはサイドバーウィジェットのいずれであっても、フォームをWordPressサイトに追加することが非常に簡単になります。

フォームを追加したい投稿またはページを編集し、コンテンツエリアにWPFormsブロックを挿入するだけです。

その後、ブロックの設定から作成したフォームを選択する必要があります。

WPFormsは、コンテンツエディタにフォームのライブプレビューをすぐに読み込みます。

コンテンツを保存または公開し、WordPressウェブサイトにアクセスして、フォームのAJAX機能をテストできるようになりました。

こちらは、デモサイトからのWordPress AJAXフォームの例を簡単に紹介します。

WordPressのサイドバーウィジェットにフォームを追加することもできます。

そのためには、外観 » ウィジェットページに移動し、WPFormsウィジェットブロックをサイドバーに追加します。

先ほど作成したフォームを選択し、「更新」ボタンをクリックしてウィジェット設定を保存します。これで、AJAX対応フォームが動作しているのをウェブサイトで確認できます。

ボーナスヒント：フォームエントリをCSVまたはExcelにエクスポートする 📄

AJAXフォームが稼働したら、すべての送信記録を保持しておきたいと思うかもしれません。特に、リード、顧客からの問い合わせ、または登録情報を収集している場合はなおさらです。

これを行う最も簡単な方法は、CSVまたはExcelファイルとしてエクスポートすることです。

これにより、GoogleスプレッドシートやMicrosoft Excelなどのスプレッドシートツールで回答を簡単に整理および分析できます。また、チームとレポートを共有したり、WordPress外でフォームデータをバックアップしたりするのにも便利です。

WPFormsを使用している場合、フォームエントリのエクスポートは簡単です。WPForms » Entriesに移動し、フォームを選択し、エクスポートオプションを選択して、データをCSVまたはExcelファイルとしてダウンロードするだけです。

これを設定したいですか？WordPressフォームの入力内容をCSVおよびExcelにエクスポートする方法に関する完全ガイドに従ってください。

追加リソース：その他のWordPressフォームガイド

この記事が、ウェブサイト用のWordPress AJAXコンタクトフォームの作成方法を学ぶのに役立ったことを願っています。次に、次の記事も参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。