Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress AJAX フォームの作り方 (4つの簡単なステップ)

長年にわたり、私たちは何千人ものユーザーがサイト用のフォームを作成・設定するお手伝いをしてきました。しかし、多くのユーザーからAJAX機能付きのフォームを作成できないかとの問い合わせがありました。

AJAX お問い合わせフォームでは、ユーザーはページをリロードすることなくフォームを送信することができます。これにより、ユーザーにより良いフォーム送信体験を提供しながら、ユーザーエンゲージメントを高めることが有効化されます。

この投稿では、WordPressのAJAXお問い合わせフォームを簡単に作成する方法をステップバイステップでご紹介します。

Creating an Ajax contact form in WordPress

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 ” 設定ページにアクセスし、ライセンスキーを入力する必要があります。

WPForms license key

ライセンスキーを入力すると、自動更新の受信やアドオンのインストールが可能になります。

WordPressで美しいAJAXフォームを作るための準備はすべて整いました。

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

さあ、最初のフォームを作りましょう。

WordPress 管理エリアのWPForms ” 新規追加ページにアクセスするだけです。フォームのタイトルを入力し、テンプレートを選択します。

Creating a new form in WPForms

このチュートリアルでは、お問い合わせフォームを作成します。しかし、あなたが必要とする他のタイプのフォームを作成することもできます。

WPFormsはすでに基本的なフィールドが追加された状態でフォームを読み込みます。編集するには、フォームフィールドをポイント&クリックするだけです。

Editing form fields in WPForms

また、左カラムから任意の新規フォームフィールドをクリックして追加することもできます。

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

Click to add a new form field

フォームフィールドはドラッグ&ドロップで簡単に上下に移動できます。

フォームの編集が終わったら、次のステップに進むことができます。

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

WPFormsは初期設定でAJAXフォーム送信を有効化していません。手動で有効化する必要があります。

フォームビルダーの「設定」タブに切り替えるだけです。一般設定タブで、「AJAX フォーム送信を有効化」オプションの隣にあるトグルをクリックします。

Enable ajax form submission

では、フォーム送信後の処理を設定しましょう。

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

Confirmation settings

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

フォームの AJAX 機能を有効化しているので、ユーザーを別のページにリダイレクトすると、AJAX フォームを作成した意味がなくなってしまいます。

メッセージオプションを選択し、確認メッセージを編集する必要があります。エディターの書式設定ツールバーを使ったり、リンクを追加したりして、ユーザーが次にどこに行けばよいかを伝えられるようにしてください。

その後、フォーム送信に関する通知方法を設定できます。

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

Form notification email settings

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

ステップ4: WordPressにAJAX有効化フォームを追加する

WPFormsを使えばWordPressの投稿、ページ、サイドバーウィジェットにフォームを簡単に追加できます。

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

Add WPForms block to WordPress post or page

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

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

Select your form

コンテンツを保存または公開し、サイトにアクセスしてフォームのAJAX機能をテストすることができます。

WordPressのAJAXフォームの例をデモサイトで見てみましょう。

Ajax contact form preview

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

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

WPForms widget block

先に作成したフォームを選択し、’更新’ボタンをクリックしてウィジェットの設定を保存します。これであなたのサイトにアクセスし、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

1件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。