連絡フォームが遅かったり、ページ全体をリロードする必要があったために、リードを失った経験はありませんか？それは私たちがよく聞く話です。
また、サイト所有者と訪問者の両方にとって、従来のWordPressフォームがいかにフラストレーションの原因になりうるかを直接見てきました。AJAXフォームはこの問題を解決し、あなたのサイトでも同様の効果をもたらすことができます。
これらの最新のフォームは、ページをリフレッシュせずに即座にデータを送信します。これにより、訪問者のエンゲージメントを維持するのに役立つ、よりスムーズなエクスペリエンスが生まれます。
私たちはクライアントやパートナーのウェブサイトでこれらのフォームを何度も実装してきましたが、その結果は自ずと物語っています。
このガイドでは、WordPress AJAXフォームを構築するための簡単な4ステップのプロセスを共有します。技術的な作業を簡素化する初心者向けのプラグインを使用するので、簡単に 따라할 수 있습니다。🙌
AJAXとは何か、そしてなぜフォームに使用するのか？
AJAXは、Asynchronous JavaScript and XMLの略で、ページをリロードせずにデータの送受信を可能にするプログラミング技術です。
これはウェブフォームで一般的に使用されており、ユーザーはページをリロードせずにフォームデータを送信できます。これにより、フォーム送信が簡単かつ迅速になり、全体的なユーザーエクスペリエンスが向上します。
GmailやFacebookのようなウェブアプリケーションも、バックグラウンドタスクがシームレスに実行されている間、ユーザーを引き付けるためにこの技術を広く使用しています。
WordPressサイトのフォームでAJAXを使用すると、不要なページリロードを回避し、ユーザーが現在表示しているページに留まるようにすることができます。
これは、オンラインストアを運営しており、ショッピング体験を中断することなくユーザーフィードバックを収集したい場合に特に役立ちます。
同じAJAX機能は、ウェブサイト上の他のカスタムフォームにも使用できます。例えば、カスタムユーザーログインフォームを使用すると、追加のページ読み込みなしでユーザーがログインできるようになります。
これを踏まえ、WordPressのAJAXお問い合わせフォームを4つの簡単なステップで作成する方法をご紹介します。
さあ、始めましょう。
ステップ1：WPFormsプラグインをインストールする
最初のステップは、フォームビルダープラグインをインストールして有効化することです。
このチュートリアルでは、WPFormsプラグインを使用します。これは市場で最高のWordPressお問い合わせフォームビルダーであり、Ajax対応フォームを簡単に作成できます。
WPBeginnerでは、お問い合わせフォームの表示、年次読者アンケートの実施、移行サービスリクエストの管理などにWPFormsを使用しています。
素晴らしい経験でした。さらに詳しい洞察については、WPFormsのレビューをご覧ください。
まず、WPFormsアカウントを作成することをお勧めします。WPFormsのウェブサイトで、「Get WPForms Now」ボタンをクリックし、プランを選択して、チェックアウトプロセスを完了してください。
📝 注: 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でもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。