連絡フォームが遅かったり、ページ全体をリロードする必要があったために、リードを失った経験はありませんか？それは私たちがよく聞く話です。
また、サイト所有者と訪問者の両方にとって、従来のWordPressフォームがいかにフラストレーションの原因になりうるかを直接見てきました。AJAXフォームはこの問題を解決し、あなたのサイトでも同様の効果をもたらすことができます。
これらの最新のフォームは、ページをリフレッシュせずに即座にデータを送信します。これにより、訪問者のエンゲージメントを維持するのに役立つ、よりスムーズなエクスペリエンスが生まれます。
私たちはクライアントやパートナーのウェブサイトでこれらのフォームを何度も実装してきましたが、その結果は自ずと物語っています。
このガイドでは、WordPress AJAXフォームを構築するための簡単な4ステップのプロセスを共有します。技術的な作業を簡素化する初心者向けのプラグインを使用するので、簡単に 따라할 수 있습니다。🙌
AJAXとは何か、そしてなぜフォームに使用するのか？
AJAXは、Webページをリロードせずにデータの送受信を可能にするプログラミング技術である非同期JavaScriptとXMLの略です。
これはウェブフォームで一般的に使用されており、ユーザーはページをリロードせずにフォームデータを送信できます。これにより、フォーム送信が簡単かつ迅速になり、全体的なユーザーエクスペリエンスが向上します。
GmailやFacebookのようなウェブアプリケーションも、バックグラウンドタスクがシームレスに実行されている間、ユーザーを引き付けるためにこの技術を広く使用しています。
WordPressサイトのフォームでAJAXを使用すると、不要なページリロードを回避し、ユーザーが現在表示しているページに留まるようにすることができます。
これは、オンラインストアを運営しており、ショッピング体験を中断することなくユーザーからのフィードバックを収集したい場合に特に役立ちます。
同じAJAX機能は、ウェブサイトの他のカスタムフォームにも使用できます。たとえば、カスタムユーザーログインフォームを使用すると、追加のページ読み込みなしでユーザーがログインできます。
これを踏まえ、WordPressのAJAXお問い合わせフォームを4つの簡単なステップで作成する方法をご紹介します。
さあ、始めましょう。
ステップ1：WPFormsプラグインをインストールする
最初のステップは、フォームビルダープラグインをインストールして有効化することです。
このチュートリアルでは、WPFormsプラグインを使用します。これは市場で最高のWordPressお問い合わせフォームビルダーであり、AJAX対応フォームを簡単に作成できます。
WPBeginnerでは、お問い合わせフォームの表示、年次読者アンケートの実施、移行サービスリクエストの管理などにWPFormsを使用しています。
素晴らしい経験でした。詳細については、WPFormsのレビュー全体をご覧ください。
まず、WPFormsアカウントを作成することをお勧めします。WPFormsのウェブサイトで、「今すぐWPFormsを入手」ボタンをクリックし、プランを選択して、チェックアウトプロセスを完了してください。
📝 注意：AJAXフォームを作成するには、無料版のWPFormsを使用できます。ただし、条件付きロジック、ファイルアップロード、Googleツール連携などの高度な機能が必要な場合は、WPForms Proが必要です。
これで、WPFormsアカウントダッシュボードが作成され、WPForms Proのzipファイルをダウンロードし、ライセンスキーをコピーできます。
次に、WPFormsプラグインをインストールして有効化しましょう。
WordPress管理画面で、プラグイン » 新規追加に移動できます。
次に、検索バーを使用してプラグインをすばやく見つけることができます。
表示されたら、「今すぐインストール」をクリックし、もう一度「有効化」をクリックします。
詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化後、ライセンスキーを入力するためにWPForms » 設定ページに移動します。
確認されると、自動アップデートを受信し、アドオンをインストールできるようになります。これで、WordPressでAJAXフォームの作成を開始する準備が整いました。
ステップ2：最初のフォームを作成する
それでは、最初のWordPressフォームを作成しましょう。
WordPress管理画面のWPForms » 新規追加ページにアクセスしてください。
次の画面で、まず新しいフォームに名前を付けることができます。たとえば、「お問い合わせフォーム」です。
その後、フォームの作成方法を選択します。
WPFormsを使用すると、ゼロからフォームを作成したり、AIフォームビルダーを使用したり、2,000以上の既製のテンプレートから選択したりできます。
例えば、WPForms AIを使用したい場合は、簡単なプロンプトを入力するだけで、プレビューエリアにフォームが生成されます。
ただし、このチュートリアルでは、既製のテンプレートを使用してお問い合わせフォームを作成します。
「シンプルな問い合わせフォーム」ボックスにカーソルを合わせて「テンプレートを使用」をクリックします。必要に応じて他のタイプのフォームを作成することもできます。手順は同じです。
WPFormsは、基本的なフィールドが既に追加された状態でフォームを読み込みます。
ここから、フォームフィールドをクリックして編集できます。
左側の列からフォームフィールドをクリックして追加することもできます。
新しいフィールドは、送信ボタンのすぐ上、フォームの下部に表示されます。
次に、フォームフィールドをドラッグアンドドロップして順序を変更できます。
フォームのカスタマイズが完了したら、次のステップに進むことができます。
ステップ3: AJAXフォーム送信機能をオンにする
設定によっては、WPFormsでAJAXフォーム送信がデフォルトで有効になっていない場合がありますので、ここで確認しましょう。
これを行うには、フォームビルダーの「設定」タブに切り替えるだけです。
「一般」設定タブで、「AJAXフォーム送信を有効にする」オプションの横にあるトグルをクリックしてください。
次に、誰かがフォームを送信した後に何が起こるかを設定しましょう。
まず、設定の下にある「確認」タブに切り替えることができます。ここで、ユーザーにフォーム送信を受け取ったことを通知します。
WPFormsでは、さまざまな方法でこれを行うことができます。たとえば、ユーザーをURLにリダイレクトしたり、特定のページを表示したり、単に画面にメッセージを表示したりできます。
ユーザーを新しいページにリダイレクトすることもできますが、それにはページロードが必要です。AJAXのメリットを最大限に引き出すために、ユーザーが同じページに留まるように「メッセージ」を表示することをお勧めします。
メッセージオプションを選択し、確認メッセージを編集する必要があります。書式設定ツールバーを使用したり、リンクを追加してユーザーが次に何をすべきかを案内したりできます。
次に、新しいフォーム送信についてどのように通知を受け取りたいかを設定します。
フォーム設定の「通知」タブに切り替え、通知メール設定を構成します。
完了したら、フォームを保存してフォームビルダーを終了できます。
ステップ4：WordPressにAJAX対応フォームを追加する
WPFormsを使用すると、投稿、ページ、またはサイドバーウィジェットのいずれであっても、WordPressサイトにフォームを追加することが簡単になります。
フォームを追加したい投稿またはページを編集し、コンテンツエリアにWPFormsブロックを挿入するだけです。
その後、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 AJAXフォーム
まとめに入る前に、WordPressでAJAXフォームを使い始めたときによく寄せられる質問をいくつかご紹介します。
フォーム送信にAJAXを使用するにはどうすればよいですか？
最も簡単な方法は、WPFormsのように、すでにAJAXをサポートしているフォームプラグインを使用することです。フォーム設定でAJAXオプションを有効にするだけで、プラグインがすべてを処理してくれます。
カスタムフォームを作成する場合は、JavaScriptとWordPressのAJAXフックを使用する必要があります。しかし、ほとんどのサイトでは、プラグインを使用する方がはるかに簡単で信頼性があります。
WPFormsのAJAX設定はどこにありますか？
WPFormsでは、AJAXオプションはフォーム設定内にあります。ビルダーでフォームを開いた後、設定 » 一般に移動し、「AJAXフォーム送信を有効にする」チェックボックスを探します。オンにすると、ページをリロードせずにフォームが送信されます。
AJAXの欠点は何ですか？
AJAXはJavaScriptに依存しているため、スクリプトを最小化または遅延させる積極的なキャッシュプラグインと競合する可能性があります。フォームが「回転」しても送信されない場合は、キャッシュをクリアするか、最適化プラグインの設定を確認してください。
また、正しく設定されていない場合、ページビルダーや古いテーマで問題が発生する可能性もあります。そのため、AJAXを有効にした後は、フォームをテストすることが重要です。
追加リソース：その他のWordPressフォームガイド
この記事が、ウェブサイト用のWordPress AJAXコンタクトフォームの作成方法を学ぶのに役立ったことを願っています。次に、次の記事も参照してください。
- WordPressでお問い合わせフォームのポップアップを作成する方法
- お問い合わせフォームを使ってメールリストを増やす方法
- 複数の受信者でお問い合わせフォームを作成する方法
- WordPressで安全なコンタクトフォームを作成する方法
- WordPressで問い合わせフォームのスパムをブロックする方法
- フォーム離脱の追跡と削減方法
- WordPressフォーム使用の究極ガイド
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
質問や提案はありますか？コメントを残して、議論を開始してください。