あなたは、Elementor を好みの WordPress ページビルダーとして使用している 5,000,000 人のプロフェッショナルのうちの 1 人ですか?
もしそうなら、あなたは幸運です！この投稿では、Elementor ビジュアル ビルダーを使用してページに Gravity Forms を追加する方法を説明します。
Elementor ビジュアル ビルダーを使用すると、さまざまなウィジェットをページにドラッグ アンド ドロップし、それに応じてスタイルを設定できます。 Elementor は Gravity Forms と直接統合していませんが、簡単な方法が 2 つあります。Elementor に Gravity Forms を追加以下では両方について説明します。方法も紹介しますフォームのスタイルを設定するElementor ではコードを 1 行も記述する必要がありません。
準備ができて？始めましょう！
この投稿で取り上げる内容は次のとおりです
- エレメンターとは何ですか？
- Gravity Forms で新しいフォームを作成する
- Elementor Gravity Forms ウィジェットの使用
- Elementor プラグインの PowerPack アドオンを使用した Gravity Forms の統合
- Elementor のページに Gravity Forms ウィジェットを追加する
- Elementor の Gravity フォーム: フォームのスタイルを設定する
- ショートコードを使用してElementorにGravityフォームを埋め込む
- ショートコードをElementorの「ショートコード」ウィジェットに追加する
- エレメンターフォームとグラビティフォーム
- エレメンターに最適なフォームはどれですか?
- Elementor での Gravity Forms の使用: 最終的な考え
エレメンターとは何ですか？
エレメンターWordPress 用の最も人気のあるビジュアル ページ ビルダーの 1 つであり、Beaver Builder、Visual Composer などと競合します。ディビジョン私ビルダー。 Elementor は、ウェブサイトの構築とスタイリングのためのオールインワン ソリューションとして設計された WordPress プラグインです。
Elementor を使用すると、新しい Web ページを迅速かつ効率的に作成できます。 Elementor の基本バージョンが利用可能ですWordPress.org で無料でElementor の Web サイトからさらに高度なパッケージを入手できます。
Gravity Forms で新しいフォームを作成する
まずは Gravity Forms で新しいフォームを作成しましょう。すでにフォームを設定している場合は、この手順をスキップできます。
まず、カーソルを合わせますフォーム左側のメニューで をクリックします新しいフォーム。フォームに名前を付けた後、Gravity Forms ドラッグ アンド ドロップ エディターを使用して、フォームにさまざまなフィールドを追加できます。
この例では、次のフィールドを含む基本的な問い合わせフォームを作成します。
- 名前 (名前フィールド)
- 電子メール (電子メールフィールド)
- コメント (段落フィールド)
フォームの作成が完了したら、右上隅にある「更新」ボタンをクリックします。
Gravity Forms で新しいフォームを作成したので、Elementor を使用してそれをページに追加したり、Web サイトに投稿したりできます。
Elementor には、ページや投稿にさまざまな要素を追加できるいくつかのウィジェットが付属しています。これには、画像ギャラリー、アイコン、テスト フィールド、Google マップ ブロックなどが含まれます。
エレメンターはそうなるけどない「Gravity Forms」ウィジェットが含まれているため、プラグインを使用すると簡単に追加できます。
Elementor プラグインの PowerPack アドオンを使用した Gravity Forms の統合
のエレメンター用パワーパックアドオンは、Gravity Forms ウィジェットを含む 70 個のウィジェットをページ ビルダーにさらに追加することで Elementor を拡張するプラグインです。
Gravity Forms Elementor ウィジェットには、PowerPack の無料バージョンが付属しており、無料でインストールできます。
WordPress ダッシュボード内で、「プラグイン」の上にカーソルを置き、「新規追加」をクリックして、「PowerPack」を検索します。
プラグインをインストールしてアクティブ化すると、Elementor ページ ビルダー内の 30 個の新しいウィジェットにアクセスできるようになります。
Elementor のページに Gravity Forms ウィジェットを追加する
PowerPack アドオンをインストールしてアクティブ化したので、Elementor のページに Gravity Forms ウィジェットを追加できます。
「ページ」にカーソルを合わせます をクリックし、「新規追加」をクリックして新しいページを作成します。ページに名前を付けて、「Elementor で編集」というボタンをクリックします。
これにより、Elementor ビジュアル ページ ビルダーが起動します。次に、左上の「Elements」で「Gravity Forms」を検索します。
Gravity Forms ウィジェットをページにドラッグ アンド ドロップし、ドロップダウン メニューからフォームを選択します。この後、ページ エディター内にフォームのプレビューが表示されるはずです。
[連絡先フォーム] ドロップダウン メニューには、フォームをカスタマイズするためのその他のオプションが表示されます。
- カスタムのタイトルと説明: これをオンに切り替えると、独自のタイトルと説明を入力して既存のフォームのタイトルと説明を上書きできます。
- タイトル: フォームタイトルの表示/非表示を切り替えます。
- 説明: フォームの説明を表示または非表示にします
- ラベル: フォームフィールドのラベルを表示または非表示にします
- プレースホルダー: フォームフィールドのプレースホルダーテキストを表示または非表示にします
- Ajaxを使用する： 有効にするAjax 送信、ページを更新せずにフォームを送信できるようになります。
それでおしまい！フォームを構成したら、Elementor エディター内からフォームのスタイル設定を開始できます。
Elementor の Gravity フォーム: フォームのスタイルを設定する
Gravity Forms Elementor ウィジェットを使用すると、Elementor ビジュアル エディター内からフォームのスタイルを設定することもできます。
フォームのスタイルを開始するには、スタイルタブをクリックしてスタイルオプションを表示します。
コードを 1 行も記述することなく、フォームのさまざまな側面のスタイルを設定できるいくつかのサブタブが表示されます。入力エリア、テキストエリア、送信ボタンなどにスタイルを追加できます。
フォームのスタイル設定が完了したら、「公開」をクリックします。 をクリックして変更を保存します。ご覧のとおり、PowerPack アドオンは、Elementor 用の強力な Gravity Forms スタイラーです。
ショートコードを使用してElementorにGravityフォームを埋め込む
サードパーティのプラグインをインストールせずに Gravity Form を Elementor に追加したい場合は、ショートコードを使用して追加できます。
コピーするだけですGravity Forms にはショートコードが埋め込まれていますフォームに追加し、Elementor の「ショートコード」ウィジェットに貼り付けます。
フォームエディター内の「埋め込み」ボタンをクリックすると、埋め込みショートコードを見つけることができます。新しいフライアウト メニューが開きます。次に、一番下までスクロールして「ショートコードをコピー」をクリックします。
あるいは、フォーム ID を使用してフォームのショートコードを手動で構築できます。これを見つけるには、「フォーム」の上にカーソルを置きます。 そして「フォーム」をクリックします。右側の列にフォームの ID が表示されます。
基本的な Gravity Forms ショートコードには次のパラメーターが含まれています。
ID– 埋め込みたいフォームのID (必須)タイトル– フォームのタイトルを表示または非表示にします (「true」または「false」のいずれか)説明– フォームの説明を表示または非表示にします (「true」または「false」のいずれか)アヤックス– フォーム送信時に AJAX を有効または無効にします (「true」または「false」のいずれか)
完成したショートコードは次のようになります。
[gravityform id="9" title="true" description="true" ajax="true"]次のステップでは、ショートコードをコピーして、Elementor ショートコード ウィジェットに貼り付けます。
💡プロのヒント: 詳しくはこちら重力フォームの埋め込みWordPress ページと投稿内。
ショートコードをElementorの「ショートコード」ウィジェットに追加する
Elementor を使用して、新しいページを作成するか、既存のページを編集します。次に、上部の検索バーで「ショートコード」を検索し、ショートコード ウィジェットをページにドラッグ アンド ドロップします。
次に、Gravity Forms のショートコードをショートコード ボックスに貼り付けます。これで、ビジュアル エディターにフォームの読み込みのプレビューが表示されるはずです。
ショートコードを使用してフォームを Elementor に追加する場合、Elementor エディター内からスタイルを設定することはできません。代わりに、自分で記述する必要があります。カスタムCSSコード。
エレメンターフォームとグラビティフォーム
Elementor Pro にはフォーム ウィジェットが含まれており、Elementor ビルダー内でフォームを作成できます。これは、Web サイト用のシンプルなフォームを構築したい場合に強力なウィジェットです。ただし、より多くの統合をサポートするより高度なソリューションが必要な場合は、Gravity Forms の方が適しています。
Gravity フォームと Elementor フォームには、ファイルのアップロード、日付フィールド、フォームに期待されるその他の標準フィールド タイプなど、さまざまなフィールド タイプが含まれています。また、どちらもマルチステップ フォームをサポートしているため、長いフォームを個々のステップに分割できます。
Gravity Forms が WordPress で最も人気のあるフォーム プラグインであるのには理由があります。 Gravity Forms では、計算の実行、条件付きロジックの使用、エントリの管理、フォームと他のアプリケーションの統合、サードパーティ アドオンの強力なエコシステムの利用が可能です。
例えば、重力ビューを使用すると、ドラッグ アンド ドロップ ビルダーを使用してサイトに Gravity Forms データを表示し、エントリ データを使用して強力な Web アプリケーションを構築できます。
💡プロのヒント: これらを使用して重力フォームを強化します8 つの必須のアドオンと拡張機能。
エレメンターに最適なフォームはどれですか?
Elementor でどのフォーム プラグインを使用するか迷っている場合は、Gravity Forms 以外に探す必要はありません。単純なショートコードを使用してどこにでも Gravity Forms を埋め込むことができるだけでなく、無料の Elementor 用 PowerPack アドオンに含まれる Gravity Forms ウィジェットを使用してフォームのスタイルを簡単に設定することもできます。
Elementor での Gravity Forms の使用: 最終的な考え
Elementor は、WordPress で最も人気のあるビジュアル ページ ビルダーの 1 つです。 Elementor は Gravity Forms と直接統合しませんが、PowerPack Lite プラグインを使用して、Gravity Forms Elementor ウィジェットを Web サイトに追加できます。
ウィジェットを使用すると、ビジュアル エディター内からフォームのスタイルを設定することもできます。つまり、コードを 1 行も記述することなく、美しいフォームを作成できます。
Web サイトに別のプラグインを追加したくない場合は、ショートコードを使用して Gravity Forms を Elementor 内に埋め込むことができます。これは、Elementor ショートコード ウィジェットを使用すると簡単に実行できます。
Gravity Forms がさまざまなプラグインでどのように動作するかについて詳しくは、以下を参照してください。重力フォームの使用方法: 究極のガイド。
役立つヒントがあなたの受信箱に届きます。
ヒントや特別オファーなどを入手するには、隔週のニュースレターを購読してください。
役立つヒントがあなたの受信箱に届きます。
ヒントや特別オファーなどを入手するには、隔週のニュースレターを購読してください。
