長年にわたり、私たちは何千人ものユーザーがサイト用のフォームを作成・設定するお手伝いをしてきました。しかし、多くのユーザーからAJAX機能付きのフォームを作成できないかとの問い合わせがありました。
AJAX お問い合わせフォームでは、ユーザーはページをリロードすることなくフォームを送信することができます。これにより、ユーザーにより良いフォーム送信体験を提供しながら、ユーザーエンゲージメントを高めることが有効化されます。
この投稿では、WordPressのAJAXお問い合わせフォームを簡単に作成する方法をステップバイステップでご紹介します。
AJAXとは何か、なぜフォームに使うのか？
AJAXとは、Asynchronous Javascript and XMLの略で、開発者がページを再読み込みすることなくデータを転送できるJavaScriptのプログラミング技術である。
ユーザーがページをリロードすることなくフォームデータを送信できるようにするため、ウェブフォームで最も一般的に使用されています。これにより、フォーム送信が簡単かつ高速になり、全体的なユーザーエクスペリエンスが向上します。
GmailやFacebookのようなウェブアプリケーションは、バックグラウンドですべてをシームレスに動作させながらユーザーを引きつけるために、このテクニックを多用している。
WordPressサイトのフォームにAJAXを使用することができます。ユーザーは不必要なページの再読み込みから解放され、現在表示されているページに集中することができます。
これは、eコマースストアを運営していて、ユーザーの注意を逸らさずにユーザーのフィードバックを収集したい場合に便利です。
また、サイト上の他のカスタムフォームにも同じAJAX機能を使用できます。例えば、カスタムのユーザーログインフォームを使えば、ユーザーはページを追加ロードすることなくログインすることができます。
ということで、WordPressのAJAXお問い合わせフォームを4ステップで簡単に作る方法を見てみましょう。
ステップ1: WPFormsプラグインのインストール
最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
WPFormsは市場で最高のWordPressフォームビルダープラグインです。Ajaxを使ったフォームも簡単に作成できます。
詳しくはWPFormsのレビューをご覧ください。
有効化した後、WPForms ” 設定ページにアクセスし、ライセンスキーを入力する必要があります。
ライセンスキーを入力すると、自動更新の受信やアドオンのインストールが可能になります。
WordPressで美しいAJAXフォームを作るための準備はすべて整いました。
ステップ 2: 最初のフォームを作成する
それでは、WordPressで最初のフォームを作ってみましょう。
WordPress 管理エリアのWPForms ” 新規追加ページにアクセスするだけです。フォームのタイトルを入力し、テンプレートを選択します。
このチュートリアルでは、お問い合わせフォームを作成します。しかし、あなたが必要とする他のタイプのフォームを作成することもできます。
WPFormsはすでに基本的なフィールドが追加された状態でフォームを読み込みます。編集するには、フォームフィールドをポイント＆クリックするだけです。
また、左カラムから任意の新規フォームフィールドをクリックして追加することもできます。
新規フィールドはフォームの一番下、送信ボタンのすぐ上に表示されます。
フォームフィールドはドラッグ＆ドロップで簡単に上下に移動できます。
フォームの編集が終わったら、次のステップに進むことができます。
ステップ 3: AJAXフォーム送信機能をオンにする
WPFormsは初期設定でAJAXフォーム送信を有効化していません。手動で有効化する必要があります。
フォームビルダーの「設定」タブに切り替えるだけです。一般設定タブで、「AJAX フォーム送信を有効化」オプションの隣にあるトグルをクリックします。
では、フォーム送信後の処理を設定しましょう。
まず、設定の「確認」タブに切り替えます。ここでユーザーにフォーム送信を受け取ったことを知らせます。
WPFormsではそれをさまざまな方法で行うことができます。例えば、ユーザーをURLにリダイレクトさせたり、特定のページを表示させたり、単に画面にメッセージを表示させたりすることができます。
フォームの AJAX 機能を有効化しているので、ユーザーを別のページにリダイレクトすると、AJAX フォームを作成した意味がなくなってしまいます。
メッセージオプションを選択し、確認メッセージを編集する必要があります。エディターの書式設定ツールバーを使ったり、リンクを追加したりして、ユーザーが次にどこに行けばよいかを伝えられるようにしてください。
その後、フォーム送信に関する通知方法を設定できます。
フォーム設定の「通知」タブに切り替え、通知メールの設定を行います。
完了したら、フォームを保存してフォームビルダーを終了します。
ステップ4: WordPressにAJAX有効化フォームを追加する
WPFormsを使えばWordPressの投稿、ページ、サイドバーウィジェットにフォームを簡単に追加できます。
フォームを追加したい投稿やページを編集し、WPFormsブロックをコンテンツエリアに挿入するだけです。
その後、ブロックの設定から先ほど作成したフォームを選択する必要があります。
WPFormsはすぐにコンテンツエディターでフォームのライブプレビューを読み込みます。
コンテンツを保存または公開し、サイトにアクセスしてフォームのAJAX機能をテストすることができます。
WordPressのAJAXフォームの例をデモサイトで見てみましょう。
WordPressのサイドバーウィジェットにフォームを追加することもできます。
そのためには、外観 ” ウィジェットページに行き、WPFormsウィジェットブロックをサイドバーに追加します。
先に作成したフォームを選択し、’更新’ボタンをクリックしてウィジェットの設定を保存します。これであなたのサイトにアクセスし、AJAXを使用したフォームの動作を確認することができます。
この投稿が WordPress AJAX お問い合わせフォームの作成方法のお役に立てば幸いです。WordPress でお問い合わせフォームのポップアップを作成する方法や、専門家が選ぶあなたのビジネスを成長させる最高のメールマーケティングサービスもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
ご質問やご提案がおありですか？ディスカッションを始めるためにコメントを残してください。