WordPress で Gravity Forms レイアウトをカスタマイズする方法 (2024)

Gravity Forms は、WordPress サイトに役立つあらゆる種類のフォームを作成するのに役立ちます。ただし、これらのフォームを最大限に活用したい場合は、Gravity Forms のレイアウトを最適化することが重要です。

フォームのレイアウトを最適化すると、フォームがより使いやすくなり、フォーム上に情報を表示する方法を正確に制御できるようになります。

Gravity Forms レイアウトをカスタマイズするには、主に 3 つの方法があります。

1. 基本的なレイアウトを選択するための組み込みオプション。
2. CSS スタイル (Gravity Forms には多数の組み込み CSS クラスが含まれています）。
3. 他の Gravity Forms プラグインを使用すると、さらに柔軟性が高まります。

このチュートリアルでは、3 つの方法すべてを使用してフォームのレイアウトをカスタマイズする方法を学びます。

まず、基本的な組み込みオプションと Gravity Forms レイアウト CSS について説明します。それでは、使い方をご紹介していきます重力特典レイアウトをさらに最適化し、フォームに新しい機能を追加する 47 のアドオンの一部。

フォームのレイアウトをカスタマイズすることが重要な理由

フォームのレイアウトとフォームの外観は、フォームの使いやすさとコンバージョン率に大きな影響を与えます。

例えば、Google の視線追跡調査のデータ左揃えの上部ラベルや適切に展開されたドロップダウンの使用などの小さな変更でも、フォームの入力時間が短縮され、訪問者が入力フィールドをナビゲートする際のエクスペリエンスが容易になる可能性があることが示唆されています (目の動きの減少によって測定される）。

基本的に、これは無視すべきものではありません。この投稿で紹介する Gravity Forms レイアウト オプションを使用すると、訪問者向けに最適化されたフォーム レイアウトを作成できます。

基本的な Gravity フォームのレイアウト オプションの使用方法

Gravity Forms WordPress プラグインには、フォームビルダーインターフェイスにいくつかの基本的なレイアウトオプションが含まれています。

まず、明らかなのはドラッグ アンド ドロップ インターフェイス自体です。ドラッグ アンド ドロップを使用して、すべてのフィールドの順序を相互に並べ替えることができます。ドラッグ アンド ドロップを使用してフィールドを列に配置することもできます。

フィールドを編集すると、さらにいくつかのレイアウト オプションも表示されます。外観タブ。たとえば、フィールドの説明の場所を変更したり、そのラベルやサブラベルを非表示にしたりできます。

中に入るとフォーム設定、ラベルと説明の配置に関する追加オプションも表示されます。フォームのレイアウトセクション：

フォームのレイアウトの制御に役立つフィールドもいくつかあります。たとえば、セクション区切りフィールドとページ区切りフィールドを使用して、フォームをさまざまなセクションに分割したり、複数ページのフォームを作成したりできます。

Gravity フォームに CSS レイアウトを使用する方法

基本的な組み込みレイアウト オプションを超えたものを使用したい場合、Gravity Forms には、「Ready Classes」と呼ばれる、使用できる独自の組み込み CSS クラスが付属しています。

「Ready」クラスを使用すると、次のことができます。

• リストフィールドのレイアウトを変更します。たとえば、チェックボックス/ラジオ ボタン/セレクターのリストを複数の列に分割します。
• 送信ボタンがフォームフィールドの横にある横型フォームレイアウトを使用します。短い形式に最適です。

Gravity Forms Ready クラスの完全なリストを表示– このページには視覚的な例も含まれています。

Ready クラスをフォーム フィールドの 1 つに追加するには、カスタムCSSクラスの設定外観フィールド設定のタブ:

複数の Ready クラスをフィールドに追加したり、Ready クラスとサイトのスタイルシートに追加した独自のカスタム CSS を組み合わせたりすることができます。これを行うには、各 CSS クラス名の間にスペースを追加します。カスタムCSSクラス設定。

具体的な例をいくつか見てみましょう…

水平重力フォーム レイアウトを作成する方法

Ready クラスを使用すると、次のことができます水平フォームレイアウトを構築する以下のように:

このレイアウトを実現するには:

• 追加gf_simple_horizo​​ntalにCSSクラス名の中にフォームのレイアウトのセクションフォーム設定。
• ドラッグ アンド ドロップ エディターを使用して、フィールドを水平方向に整列します。

このレイアウトを使用している場合は、次のことも行う必要があるかもしれませんプレースホルダーを使用するときに Gravity Forms フィールドのラベルを非表示にする。これを行うには、フィールドラベルの表示設定各フィールドの設定外観タブ：

その他の Gravity Forms CSS 微調整

CSS を使用して行うことができるその他の 3 つのレイアウト調整は次のとおりです。

• Gravity Forms リスト フィールドの行に番号を付ける
• Gravity Forms Ajax スピナーを非表示にする
• HTML フィールドのコンテンツをバナー メッセージに変換する

CSS を使用して、フォームの背景色 (フォーム ラッパーに基づく)、フォーム ヘッダー、間隔などをカスタマイズすることもできます。

ショートコードを使用してフロントエンドでフォームを表示およびカスタマイズする

これまでにショートコードを使用したことがありますか?これらの小さなワンライナーのコードを使用すると、サイトのフロントエンドでフォームがどのように表示されるかを簡単に表示できます。ショートコードを使用すると、フォームの埋め込み、ユーザー情報の表示、進行状況メーターの表示、分割テストの実行、条件付きでフォームの表示などを行うことができます。 Gravity Forms ショートコードの詳細については、以下をご覧ください。私たちの包括的なガイド。

Gravity 特典を使用してレイアウトをさらにカスタマイズする方法

Gravity Forms レイアウトをさらにカスタマイズするには、Gravity Perks を使用できます。 Gravity Perks は、さまざまな方法でフォームを強化するのに役立つ Gravity Forms 用の 47 種類のアドオンのコレクションです。

その方法の 1 つでしょうか?新しいレイアウトオプション!

たとえば、GF Nested Forms アドオン、フォームを相互に「ネスト」して、素敵な Gravity Forms テーブル レイアウトなどのカスタム レイアウトを作成できます。

これにより、カスタム フォーム レイアウトを作成できるだけでなく、フォームに新しい機能を追加することもできます。親フォームを 1 つ作成し、子フォームを使用して追加のエントリを収集し、親フォームに添付することができます。

子フォームのエントリは、親フォーム内の Gravity Forms テーブル レイアウトに表示されます。

たとえば、地元のスポーツ リーグのチーム登録フォームを作成する場合は、次のように作成できます。

• ユーザーがチーム全体に関する詳細を追加するための親フォーム。
• 親フォーム内の反復可能な子フォーム。ここでユーザーは各チーム メンバーに関する詳細を追加できます。

まず、子フォームを作成します。次に、そのフォームを親フォームの Gravity Forms レイアウト内に「ネスト」できます。ネストされたフォーム分野。デフォルトでは、Gravity Forms テーブル レイアウトが使用され、含める集計フィールドを選択できます。

これがフロントエンドでどのように見えるかの例を次に示します。プラグインが反復可能な子フォームに Gravity Forms テーブル レイアウトをどのように使用するかがわかります。

ネストされた子フォームのテンプレートを完全に制御することもできます。利用可能なテンプレートは 4 つあります。次の手順に従ってカスタマイズできます:

• ネストされたエントリ.php– ネストされたフォームフィールドに子エントリをレンダリングします。これは、Gravity Forms のテーブル レイアウトを定義するものです。
• ネストされたエントリの詳細.php– エントリ詳細ページのバックエンドで子エントリをレンダリングします。
• ネストされたエントリ-simple-list.php– マージタグを使用する場合、各子エントリから単一の値をレンダリングします。
• ネストされたエントリ.php– マージタグを使用する場合、単一の子エントリをレンダリングします。

結論

フォームのレイアウトを最適化することは、使いやすさとユーザー エクスペリエンスにとって重要です。

Gravity Forms には、フォーム ビルダーの基本的なレイアウト オプションが含まれています。次に、Ready Classes を使用して、Gravity Forms レイアウトをさらにカスタマイズできます。

さらに進めたい場合は、Gravity Perks と GF Nested Forms アドオンを使用して、子フォームが親フォームの「内側」にネストされる Gravity Forms テーブル レイアウトを作成できます。

始めるには、今すぐ重力特典を購入してください。