Gravity Forms と AJAX: 知っておくべきことすべて (2024)

AJAX と Gravity Forms を併用して効率を向上させ、時間を節約する方法をご覧ください。この強力な組み合わせを使用する場合のメリットとデメリットを学びましょう。

1. AJAX とは何ですか? また、Gravity Forms にとって AJAX は何を意味しますか?
2. Gravity Forms で AJAX を設定するにはどうすればよいですか?
   1. 方法 1: ショートコードを使用する
      1. ステップ 1: フォームのショートコードを生成する
      2. ステップ 2: ショートコードを埋め込む
   2. 方法 2: Gutenberg/ブロック エディターを使用する
3. AJAX を使用して Gravity Forms をさらに活用する方法
   1. 複数ページのフォームに AJAX を使用する
   2. デフォルトの Gravity Forms AJAX スピナーを更新または変更する
   3. フォームを再ロードすると、ページを更新せずに追加の送信が可能になります
   4. フォームフィールドに動的データを自動的にフィルタリングして入力します。
   5. フォームのファイルアップロードを効率化する
4. AJAX が Gravity Form で動作しないのはなぜですか?
   1. ショートコードにエラーがないか確認してください
   2. Google reCAPTCHAのトラブルシューティング
   3. JavaScript エラーをチェックする
   4. プラグインまたはテーマの競合を確認する
5. Gravity Forms 用に AJAX を設定してフォーム送信を効率化します

特に便利な Gravity Forms 機能の 1 つは、AJAX サポートです。

AJAX は何に役立ちますか?ページを更新せずにフォーム送信を処理できるようにします。これにより、ユーザー エクスペリエンスの面でさまざまな機会への扉が開かれます。また、フォーム送信プロセスがよりスムーズになり、Web サイト管理者とユーザーの両方の時間を節約できます。

Gravity Forms を使用したことがある場合は、これらの利点のいくつかにすでに気づいているかもしれません。フォームで AJAX を有効にする方法や、発生する可能性のある一般的な問題のトラブルシューティング方法がわからない場合は、ここが正しい場所です。

この包括的なガイドでは、フォーム送信で AJAX を有効にする簡単な方法、AJAX を最大限に活用するためのヒント、Gravity Form + AJAX の一般的な問題のトラブルシューティングの指針など、Gravity Forms と AJAX について知っておくべきことをすべて説明します。遭遇するかもしれません。

AJAX と Gravity Forms がどのように連携して効率を向上させ、時間を節約できるかを見てみましょう。

AJAX とは何ですか? また、Gravity Forms にとって AJAX は何を意味しますか?

ここではあまり技術的な話にはならないようにしましょう。本当に知っておく必要があるのは、AJAX はページを更新せずにデータをフェッチまたは送信する方法であるということだけです。これにより、Web ページがデスクトップ アプリケーションのように感じられるようになります。

アヤックス(非同期 JavaScript および XML) は、組み込みの機能を使用してバックグラウンドで Web サーバーとデータを交換することでこの効果を実現します。XMLHttpRequest物体。はい、できました少しテクニカル。

Gravity Forms のコンテキストでは、AJAX を使用すると、Web サイト ユーザーはページを更新せずに複数ページまたは複数ステップのフォームを横断し、エントリを送信できます。これにより、次のようないくつかの利点がもたらされます。

• フォーム送信の高速化 - フォームのみが更新されるため、ページのリロードが遅くなりません。
• より良いユーザー エクスペリエンス - 高速で応答性の高いフォームは、楽しく使用できます。
• パフォーマンスの向上 – ページのリロードが少なくなるため、サーバーへの負担が軽減されます。
• 1 つのページでより多くのことを実行できます。ページを更新する必要がない場合は、他の UX の可能性への扉が開きます。

これらの利点を念頭に置いて、Gravity Forms で AJAX をセットアップする方法を見てみましょう。

Gravity Forms で AJAX を設定するにはどうすればよいですか?

デフォルトでは、AJAX は Gravity Forms でのフォーム送信に対して無効になっています。ただし、Gravity Forms に AJAX をセットアップする簡単な方法が 2 つあります。

方法 1: ショートコードを使用する

ショートコードは、WordPress の Gravity Forms の機能を拡張する多用途の方法です。 AJAX を有効にすることは、できることはたくさんありますが、そのうちの 1 つにすぎません。Gravity Forms のショートコード。ショートコードを使用して Gravity Forms で AJAX を有効にする方法は次のとおりです。

ステップ 1: フォームのショートコードを生成する

AJAX を有効にするフォームのショートコードを生成するには、3 つの異なる方法があります。

オプション 1: ショートコードを最初から作成する

Gravity Forms のショートコードは、基本的な HTML 形式に従います。

[gravityform id="フォームid" title="true/false" description="true/false" ajax="true/false"]

フォームのショートコードを作成するには、「フォーム ID」を WordPress サイトに埋め込みたいフォームの特定の ID に置き換えます。

次に、他の各変数に対して「true」または「false」のいずれかを選択します。 AJAX を有効にするには、パラメータを含めます[ajax="true"]フォームのショートコードに。

オプション 2: [フォームの埋め込み] フライアウトからショートコードをコピーします。

AJAX を有効にするフォームのフォーム エディターを開きます。クリック埋め込むエディターの上部にある をクリックし、ショートコードをコピーするインラインポップアップから。

これによりショートコードが生成されます。このコードに対して、AJAX を有効にし、要件に応じてその他のパラメーターを設定する必要があります。

たとえば、上の例では、サイト上の高度な問い合わせフォームのショートコードを生成しました。

オプション 3: WordPress クラシック エディターを使用してショートコードを生成する

この方法を選択している場合は、クラシック エディターがすでにセットアップされている可能性があります。次の手順は次のとおりです。

• フォームを追加するページに移動します。
• WordPress クラシック エディターを使用してページを編集することを選択します。
• クリックフォームの追加。
• モーダル ウィンドウで、ドロップダウン メニューから追加するフォームを選択します。
• AJAX を有効にするかどうかを選択します。

クリックフォームの挿入編集中のページまたは投稿の本文に、フォームのショートコード (AJAX パラメーターが含まれる) を自動的に挿入します。 WordPress 管理エリアでこれらの各手順がどのように表示されるかを説明するには、以下のビデオを参照してください。

ステップ 2: ショートコードを埋め込む

ショートコードを生成し、AJAX パラメーターが追加されていることを確認したら、フォームを表示したいページまたは投稿にショートコードを埋め込むだけです。

あなたはこれを行うことができます：

• クラシックエディターの使用。
• Gutenberg エディターにショートコード ブロックを追加します。
• たとえば、Elementor ショートコード ウィジェットや Divi コード モジュールを使用して、ショートコードを他のページ ビルダーに追加します。

ご覧のとおり、ショートコードはさまざまなページ ビルダーにフォームを埋め込むための多用途な方法を提供し、フォームを Web サイトに簡単に統合できるようになります。ただし、WordPress サイトに Gutenberg エディターを使用している場合は、Gravity Forms で AJAX を有効にするさらに簡単な方法があります。

方法 2: Gutenberg/ブロック エディターを使用する

ブロック エディターを使用すると、新規フォームと既存フォームの両方で AJAX を簡単に有効にすることができます。これは、組み込みの Gravity Forms ブロックのブロック オプションから直接行うことができます。

AJAX を有効にして新しいフォームを埋め込むには、

• フォームを追加したいページに移動します。
• + アイコンをクリックして新しいブロックを追加します。
• Gravity Forms ブロックを選択し、

• ドロップダウン メニューから埋め込みたいフォームを選択します。

• ブロックが挿入されたら、次の場所に移動します。ブロック設定サイドバー。
• を開きます。高度なパネル。
• AJAX を含むさまざまなオプションのオンとオフを切り替えます。

この方法は、既存のフォームに AJAX を追加する場合にも同様に機能します。フォームが埋め込まれているページに移動し、フォーム ブロックを選択して、上記のように設定サイドバーから AJAX をオンに切り替えるだけです。

AJAX を使用して Gravity Forms をさらに活用する方法

AJAX を使用して Gravity Forms を最大限に活用するためのヒントをいくつか紹介します。

複数ページのフォームに AJAX を使用する

複数ページのフォームは長いデータ要求には便利ですが、移動が面倒になる場合があります。複数ページのフォームに AJAX を使用すると、ユーザー エクスペリエンスが大幅に向上します。

複数ページのフォームのナビゲーションを最適化してさらに一歩進めたい場合は、Gravity Forms の複数ページ ナビゲーションは、複数ページのフォーム内の任意のページへのクリック可能なナビゲーション リンクを提供し、ユーザーがページ間を自由に移動しやすくします。

マルチページ ナビゲーションが役立つ例: 複数ページ フォームのページにエラーがある場合、マルチページ ナビゲーションにはエラーのある次のページに移動するボタンが表示されます。つまり、エラーを探す必要がなくなります。あなた自身。また、ページ名をクリック可能なリンクに変換したり、ページがナビゲート可能になるタイミングを制御したり、Gravity Forms のプレビュー送信。

複数ページのフォームに入力する際のユーザー エクスペリエンスをさらに向上させたい場合は、次の方法も利用できます。Gravity フォームのページ遷移、フォーム ページ間のアニメーション遷移と自動ページ進行を作成します。以下の簡単なデモをお試しください。

デフォルトの Gravity Forms AJAX スピナーを更新または変更する

フォームの画像が Web サイトのブランディングと一致していることを確認することは、ブランドの統一性を維持するための微妙ですが重要な方法です。このため、フォームの読み込み時にフォームの下部に表示されるデフォルトのスピナーを更新または変更すると便利です。

• スピナーを変更するには、次のことを行うだけです。コードスニペットを追加するテーマのfunctions.phpファイルに追加します。
• スピナーを削除するには、次のカスタム CSS コードをテーマのスタイルシートに追加します。

body img.gform_ajax_spinner {表示: なし !重要;}

フォームを再ロードすると、ページを更新せずに追加の送信が可能になります

場合によっては、ユーザーが一度に複数回フォームを送信できるようにする必要がある場合があります。たとえば、繰り返し送信されるデータ入力または管理タスク用の内部フォームや、QRスキャンチェックインフォーム。

のグラビティフォームリロードフォームfrom プラグインを使用すると、フォームを再ロードして、ページを更新せずに追加の送信を有効にすることができます。指定した遅延後のフォームのリロードを自動化することもできます。

フォームフィールドに動的データを自動的にフィルタリングして入力します。

重力フォームはあらゆるものを取り込みますは、AJAX を使用してフォームに動的データを自動的にロードできるプラグインです。

重力フォームフィールド選択肢そして価値観フォーム内の他の場所で入力または選択された値 (または、他のフォーム フィールド、ユーザー データなどから取得した値) に基づいて自動的にフィルタリングおよび設定できるため、動的で更新不要のフォームを作成するための強力なツールになります。これにより、フォーム送信プロセスが大幅に合理化されます。

また、Populate Anything では、条件付きでデータを表示するために個別のフィールドを作成する必要がなくなり、代わりに動的フィルターに依存して目的のデータを 1 つのフィールドに入力するため、フォームの管理も簡素化されます。

ソリューションがユーザーと管理者を満足させれば、勝者が得られたことが分かります。 😉

フォームのファイルアップロードを効率化する

デフォルトでは、Gravity Forms のファイル アップロード フィールドは AJAX を使用しません。ただし、「複数のファイル」設定を有効にすると、そのフィールドのファイルのアップロードは AJAX 経由でアップロードされます。 AJAX アップロードのメリットを享受したいが、受け入れたいファイルを 1 つだけにする場合は、「ファイルの最大数」設定を「1」に設定してください。

複数ファイルのアップロード フィールドをより使いやすくするには、次を使用します。Gravity Forms ファイルアップロード Pro画像またはファイル アイコンのプレビューを含め、トリミングまたは並べ替え機能、自動的に最適化された画像、その他の機能を利用できます。

AJAX が Gravity Form で動作しないのはなぜですか?

Gravity Forms AJAX が機能しないという問題が発生した場合は、問題を解決するために実行できるトラブルシューティング手順がいくつかあります。一般的な解決策をいくつか示します。

ショートコードにエラーがないか確認してください

ショートコードが適切にフォーマットされており、必要なパラメータがすべて含まれていることを確認してください。単語のスペルミスや二重引用符の欠落などのエラーにより、Gravity Forms ショートコードが適切に動作しなくなる可能性があります。

Google reCAPTCHAのトラブルシューティング

Googleが作った一方で、2019 年の reCAPTCHA の更新AJAX との互換性を確保するには、reCAPTCHA を無効にすることでフォームが AJAX で適切に機能するかどうかを確認する価値があります。

これに問題がある場合、最初のステップは、最新バージョンのGravity フォーム reCAPTCHAアドオン。

それでも機能しない場合は、reCAPTCHA を Gravity Forms の組み込みスパム対策ハニーポット機能に置き換えることを検討してください。これをする：

• フォームの設定に移動します。
• トグルスパム対策ハニーポット下フォームオプション。

reCAPTCHA に注意してくださいすべきAJAX 対応フォームを操作する場合、これらの手順は必要ありません。問題が発生した場合は、ご遠慮なくお問い合わせくださいGravity Forms の優秀なサポート チームにお問い合わせください援助のために。

JavaScript エラーをチェックする

「gform が定義されていません」などの JavaScript エラーは、JavaScript がスクリプトを正しくエンキューできないことを示します。これは、テーマまたはプラグインの競合を示している可能性があります。他のプラグインを無効にし、デフォルトの WordPress テーマに切り替えて、問題が解決するかどうかを確認してください。

AJAX 対応フォームにカスタム スクリプトを含める必要がある場合は、無料のGravity Forms カスタム JavaScript プラグインGravity Wiz から、コードが常に正しい場所に出力され、AJAX 経由でフォームが再ロードされるたびに実行されるようにします。

プラグインまたはテーマの競合を確認する

サードパーティのテーマとプラグインは、AJAX の送信を妨げる可能性があります。サードパーティのプラグインを使用してフォームを埋め込んでいる場合は、代わりにデフォルトの WordPress エディターを使用して、問題が解決するかどうかを確認してください。

キャッシュ プラグインやサードパーティのテーマも、AJAX が適切に動作しない原因となることがよくあります。これらを無効にしてフォームが機能するかどうかを確認してから、プラグインを一度に 1 つずつ徐々にオンに戻して、競合の原因を特定してください。

Gravity Forms 用に AJAX を設定してフォーム送信を効率化します

Gravity Forms でシームレスなユーザー エクスペリエンスを作成するのは、AJAX と同じくらい簡単です。そうすることで、送信率が向上し、Web サイト開発者とエンド ユーザーの両方を助けることができます。また、簡単な実装プロセスの概要が説明されているため、最初のステップを簡単に実行できます。

Gravity Forms が標準で提供するもの以上のものをまだ必要としている場合は、次のようなプラグインをチェックすることをお勧めします。フォームをリロードする、複数ページのナビゲーション、 そして何でも入力。これらは、AJAX 機能をさらに活用するのに役立ち、必要なカスタマイズと柔軟性を提供します。

さあ、始めましょう。今すぐ AJAX 対応の Gravity Forms の可能性を探求し始めてください。ご質問がある場合は、下記までお知らせください。