連絡フォームが遅かったり、ページ全体をリロードする必要があったために、リードを失った経験はありませんか？それは私たちがよく聞く話です。
また、サイト所有者と訪問者の両方にとって、従来のWordPressフォームがいかにフラストレーションの原因になりうるかを直接見てきました。AJAXフォームはこの問題を解決し、あなたのサイトでも同様の効果をもたらすことができます。
これらの最新のフォームは、ページをリフレッシュせずに即座にデータを送信します。これにより、訪問者のエンゲージメントを維持するのに役立つ、よりスムーズなエクスペリエンスが生まれます。
私たちはクライアントやパートナーのウェブサイトでこれらのフォームを何度も実装してきましたが、その結果は自ずと物語っています。
このガイドでは、WordPress AJAXフォームを構築するための簡単な4ステップのプロセスを共有します。技術的な作業を簡素化する初心者向けのプラグインを使用するので、簡単に 따라할 수 있습니다。🙌
AJAXとは何か、そしてなぜフォームに使用するのか？
AJAXは、Webページをリロードせずにデータの送受信を可能にするプログラミング技術である非同期JavaScriptとXMLの略です。
これはウェブフォームで一般的に使用されており、ユーザーはページをリロードせずにフォームデータを送信できます。これにより、フォーム送信が簡単かつ迅速になり、全体的なユーザーエクスペリエンスが向上します。
GmailやFacebookのようなウェブアプリケーションも、バックグラウンドタスクがシームレスに実行されている間、ユーザーを引き付けるためにこの技術を広く使用しています。
WordPressサイトのフォームでAJAXを使用すると、不要なページリロードを回避し、ユーザーが現在表示しているページに留まるようにすることができます。
これは、オンラインストアを運営しており、ショッピング体験を中断することなくユーザーからのフィードバックを収集したい場合に特に役立ちます。
同じAJAX機能は、ウェブサイトの他のカスタムフォームにも使用できます。たとえば、カスタムユーザーログインフォームを使用すると、追加のページ読み込みなしでユーザーがログインできます。
AJAXフォームにWPFormsを選ぶ理由
WPFormsは、600万以上のウェブサイトで信頼されている、AJAX対応フォーム作成に最適なWordPressフォームビルダーです。
WPFormsがAJAXフォームに最適な理由は以下の通りです：
- コーダー以外でも素早くセットアップ。 ほとんどのユーザーは、コードを書かずに10分以内に最初のAJAXフォームを作成できます。ドラッグ＆ドロップビルダーを使えば、コードに触れたことがなくても、プロフェッショナルなフォームを即座に作成できます。
- エンタープライズグレードのサポート。 WPFormsは、レビュープラットフォームで一貫して高い評価を得ているチームによる、即日サポートを提供しています。問題が発生した場合でも、実際の担当者が迅速に解決します。これは、Contact Form 7のような無料プラグインでは提供できないものです。
- 強力な連携機能。 AJAXフォームは、Constant Contact、HubSpot、Stripe、PayPal、Salesforce、その他2,000以上のサービスと連携できます。リードを獲得し、手動でエクスポートすることなく、メールマーケティングプラットフォームやCRMに自動的に送信します。
- 揺るぎない信頼性。 WPFormsのフォームは、WordPressのアップデートで壊れることなく動作し続けます。ユーザーは一貫して「とにかく動く」と報告しており、フォームが壊れるたびにリードを失うことを考えると、これは非常に重要です。
WPFormsを使用すると、AJAX機能に加えて、フォーム作成を容易にするテンプレート、連携機能、サポートを利用できます。WordPress AJAXコンタクトフォームを4つの簡単なステップで作成する方法を見てみましょう。
これを踏まえ、WordPressのAJAXお問い合わせフォームを4つの簡単なステップで作成する方法をご紹介します。
さあ、始めましょう。
ステップ1：WPFormsプラグインをインストールする
最初のステップは、フォームビルダープラグインをインストールして有効化することです。
このチュートリアルでは、WPFormsプラグインを使用します。これは市場で最高のWordPressお問い合わせフォームビルダーであり、AJAX対応フォームを簡単に作成できます。
WPBeginnerでは、お問い合わせフォームの表示、年次読者アンケートの実施、移行サービスリクエストの管理などにWPFormsを使用しています。
素晴らしい経験でした。詳細については、WPFormsのレビュー全体をご覧ください。
まず、WPFormsアカウントを作成することをお勧めします。WPFormsのウェブサイトで、「今すぐWPFormsを入手」ボタンをクリックし、プランを選択して、チェックアウトプロセスを完了してください。
📝 注意： AJAXフォームを作成するには、無料版WPFormsを使用できます。しかし、AI機能、条件付きロジック、ファイルアップロード、Googleツール連携などの高度な機能が必要な場合は、有料版WPFormsプランが必要です。
これで、WPFormsアカウントダッシュボードにアクセスできるようになり、WPFormsのzipファイルをダウンロードしてライセンスキーをコピーできます。
次に、WPFormsプラグインをインストールして有効化しましょう。
WordPress管理画面で、プラグイン » プラグインを追加に移動できます。
次に、検索バーを使用してプラグインをすばやく見つけることができます。
表示されたら、「今すぐインストール」をクリックし、もう一度「有効化」をクリックします。
詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化後、WPForms Proを購入した場合は、WPForms » 設定ページに移動してライセンスキーを入力してください。無料版ユーザーはこの手順をスキップしてステップ2に進むことができます。
確認されると、自動アップデートを受信し、アドオンをインストールできるようになります。これで、WordPressでAJAXフォームの作成を開始する準備が整いました。
ステップ2：最初のフォームを作成する
それでは、最初のWordPressフォームを作成しましょう。
WordPress管理画面のWPForms » 新規追加ページにアクセスしてください。
次の画面で、まず新しいフォームに名前を付けることができます。たとえば、「お問い合わせフォーム」です。
その後、フォームの作成方法を選択します。
WPFormsを使用すると、ゼロからフォームを作成することも、既製のテンプレートを選択することもできます。WPForms Liteには標準テンプレートが含まれていますが、2,000以上の全テンプレートライブラリを使用するにはBasic以上のライセンスが必要です。
Basicライセンス以上の所有者は、AIフォームビルダーを使用してテキストプロンプトからフォームを生成することもできます。WPFormsは、プレビューエリアにフォームを生成します。
ただし、このチュートリアルでは、既製のテンプレートを使用してお問い合わせフォームを作成します。
「シンプルな問い合わせフォーム」ボックスにカーソルを合わせて「テンプレートを使用」をクリックします。必要に応じて他のタイプのフォームを作成することもできます。手順は同じです。
WPFormsは、基本的なフィールドが既に追加された状態でフォームを読み込みます。
ここから、フォームフィールドをクリックして編集できます。
左側の列からフォームフィールドをクリックして追加することもできます。
新しいフィールドは、送信ボタンのすぐ上、フォームの下部に表示されます。
次に、フォームフィールドをドラッグアンドドロップして順序を変更できます。
フォームのカスタマイズが完了したら、次のステップに進むことができます。
ステップ3：AJAX確認メッセージの設定
朗報です！WPFormsは、すべての新規フォームでデフォルトでAJAXフォーム送信を自動的に有効にするため、技術的な設定を行う必要はありません。
「一般」設定タブに移動し、「AJAXフォーム送信を有効にする」オプションが有効になっていることを確認してください。
次に、誰かがフォームを送信した後に何が起こるかを設定しましょう。
まず、設定の下にある「確認」タブに切り替えることができます。ここで、ユーザーにフォーム送信を受け取ったことを通知します。
WPFormsでは、さまざまな方法でこれを行うことができます。たとえば、ユーザーをURLにリダイレクトしたり、特定のページを表示したり、単に画面にメッセージを表示したりできます。
ユーザーを新しいURLにリダイレクトすることを選択した場合でも、ブラウザは新しいページを読み込む必要があります。AJAXの真のシームレスな「リロードなし」のマジックを得るには、「メッセージ」確認タイプを使用することを強くお勧めします。
メッセージオプションを選択し、確認メッセージを編集する必要があります。書式設定ツールバーを使用したり、リンクを追加してユーザーが次に何をすべきかを案内したりできます。
次に、新しいフォーム送信についてどのように通知を受け取りたいかを設定します。
フォーム設定の「通知」タブに切り替え、通知メール設定を構成します。
完了したら、フォームを保存してフォームビルダーを終了できます。
ステップ4：WordPressにAJAX対応フォームを追加する
WPFormsを使用すると、投稿、ページ、またはサイドバーウィジェットのいずれであっても、WordPressサイトにフォームを追加することが簡単になります。
フォームを追加したい投稿またはページを編集し、コンテンツエリアにWPFormsブロックを挿入するだけです。
その後、WPFormsブロック内のドロップダウンメニューから、作成したフォームを選択する必要があります。
WPFormsは、コンテンツエディタにフォームのライブプレビューをすぐに読み込みます。
これで、コンテンツを保存または公開し、WordPressウェブサイトにアクセスして、フォームのAJAX機能をテストできます。
こちらは、デモサイトからのWordPress AJAXフォームの例を簡単に紹介します。
WordPressのサイドバーウィジェットにフォームを追加することもできます。
そのためには、外観 » ウィジェットページに移動し、WPFormsウィジェットブロックをサイドバーに追加します。
作成したフォームを選択し、「更新」ボタンをクリックしてウィジェットの設定を保存します。これで、ウェブサイトにアクセスして、AJAX対応フォームが動作しているのを確認できます。
ボーナスヒント：フォーム送信の管理と自動化
AJAXフォームがライブになり、送信を収集すると、WPFormsはデータを管理および自動化するための強力なオプションを提供します。
CSVまたはExcelへのエントリのエクスポート
これを行う最も簡単な方法は、エントリーをCSVまたはExcelファイルとしてエクスポートすることです。
これにより、GoogleスプレッドシートやMicrosoft Excelなどのスプレッドシートツールで回答を簡単に整理および分析できます。また、チームとレポートを共有したり、WordPress外でフォームデータをバックアップしたりするのにも便利です。
WPForms Basic以上をご利用の場合、フォームのエントリのエクスポートは簡単です。
単に WPForms » Entries に移動し、フォームを選択し、エクスポートオプションを選択して、CSVまたはExcelファイルとしてデータをダウンロードします。
これは、四半期ごとのレポート、リード分析、または外部ツールへの連絡先のインポートに役立ちます。
これを設定したいですか？ WordPressフォームのエントリをCSVおよびExcelにエクスポートする方法に関する完全なガイドに従ってください。
連携機能による自動化
さらに良いことに、AJAXフォームをビジネスツールに直接接続して、手動エクスポートをスキップします。WPFormsインテグレーションはAJAXフォームとシームレスに連携し、以下が含まれます：
- Eメールマーケティング — Constant Contact、AWeber、ConvertKit、Drip（Plusプラン以上が必要です）
- CRMプラットフォーム — Salesforce、HubSpot、Zoho CRM（Eliteプラン以上が必要です）
- 自動化ツール — Zapier（5,000以上のアプリに接続）、Webhooks、Uncanny Automator
- 決済処理業者 — Stripe、PayPal、Square、Authorize.Net
- Google Workspace — Google Sheets、Google Drive、Google Calendar
これらのインテグレーションは、AJAXフォームとシームレスに連携します。
ユーザーがフォームを送信すると、WPFormsはバックグラウンドで送信を処理し、データを接続されたプラットフォームに即座に送信します。
たとえば、AJAX連絡先フォームを作成して、リードをConstant Contactリストに自動的に追加し、HubSpotの連絡先レコードを作成し、Google Sheetsにエントリを記録することができます。すべてコードを一行も書かずに実行できます。
インテグレーションを設定するには、フォームを編集し、「マーケティング」または「支払い」タブをクリックして、画面の指示に従ってアカウントを接続します。
よくある質問：WordPress AJAXフォーム
まとめに入る前に、WordPressでAJAXフォームを使い始めたときによく寄せられる質問をいくつかご紹介します。
他のプラグインではなく、WPFormsをAJAXフォームに使用する理由は何ですか？
WPFormsは、初心者向けの使いやすいデザインとエンタープライズグレードの機能を組み合わせています。コーディングなしで10分以内にAJAXフォームを作成でき、問題が発生した場合は、WPFormsのサポートチームが同日中に解決策を提供します。
WPFormsの有料プランには、Constant Contact、Zapier、Salesforce、および2,000以上のプラットフォームとの組み込みインテグレーションが含まれています。無料のWPForms Liteバージョンでさえ、基本的なStripe決済（トランザクション手数料あり）が含まれています。
これにより、AJAXフォームは、手動設定なしで、Eメールマーケティング、CRM、および決済システムと自動的に同期できます。
フォーム送信にAJAXを使用するにはどうすればよいですか？
最も簡単な方法は、WPFormsのように、すでにAJAXをサポートしているフォームプラグインを使用することです。フォーム設定でAJAXオプションを有効にするだけで、プラグインがすべてを処理してくれます。
カスタムフォームを作成する場合は、JavaScriptとWordPressのAJAXフックを使用する必要があります。しかし、ほとんどのサイトでは、プラグインを使用する方がはるかに簡単で信頼性があります。
WPFormsのAJAX設定はどこにありますか？
WPFormsでは、AJAXオプションはフォーム設定にあります。ビルダーでフォームを開いた後、設定 » 一般に移動し、AJAXフォーム送信を有効にするチェックボックスを探します。有効にすると、ページをリロードせずにフォームが送信されます。
デフォルトでは、WPFormsはこの設定を自動的に有効にするため、通常は何も変更する必要はありません。ただし、必要に応じて有効になっていることを確認することもできます。
AJAXの欠点は何ですか？
AJAXはJavaScriptに依存しているため、スクリプトを最小化または遅延させる積極的なキャッシュプラグインと競合することがあります。フォームが「回転」しても送信されない場合は、キャッシュをクリアするか、最適化プラグインの設定を確認してください。
まれにページビルダーや古いテーマで問題が発生する可能性があるため、公開後にフォームをテストすることが常に重要です。
しかし、利点は欠点をはるかに上回ります。実際、WPFormsはAJAXをデフォルトで使用しています。これにより、最新のスパム防止トークンをバックグラウンドで読み込むことができるためです。これにより、スパムボットがキャッシュプラグインをバイパスするのを防ぎ、受信トレイを安全に保つのに役立ちます。
追加リソース：その他のWordPressフォームガイド
この記事が、ウェブサイト用のWordPress AJAXコンタクトフォームの作成方法を学ぶのに役立ったことを願っています。次に、次の記事も参照してください。
- WordPressでお問い合わせフォームのポップアップを作成する方法
- 複数の受信者でお問い合わせフォームを作成する方法
- WordPressで安全なコンタクトフォームを作成する方法
- フォーム離脱の追跡と削減方法
- WordPressフォーム使用の究極ガイド
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
質問や提案はありますか？コメントを残して、議論を開始してください。