チュートリアル -
コリン・ニューカマー著2022 年 12 月 15 日発行
Gravity Forms ショートコードは、フォームをサイトに埋め込み、その動作をカスタマイズできる便利な機能です。
Gravity Forms ショートコードは、フォームを埋め込むための単純なツールとして使用できますが、ショートコードを使用すると、特定のフォーム コンテンツの表示または非表示、フォーム動作の調整、フォーム フィールドの事前入力、条件の追加など、サイトを設定する際の柔軟性も向上します。ロジック、さらには複数のフォームを連鎖させることもできます。
Gravity Forms のショートコードに関するこの完全ガイドでは、Gravity Forms でショートコードを使用し、そこから値を取得するために知っておく必要のあるすべてのことを学びます。
まずは、ショートコードとは何か、ショートコードがどのように機能するか、フォームのショートコードを見つける方法など、基本事項の紹介から始めます。
次に、ショートコード パラメーターを使用してフォームの動作を調整する、ショートコードを使用して 2 つの別々のフォームを連結する、確認や通知に条件付きロジックを追加するなど、ショートコードのより高度な使用例について説明します。
さあ行こう!
WordPress のショートコードとは何ですか?
一言で言えば、WordPress ショートコードは、プラグインからのコンテンツの埋め込みなど、サイト上でアクションをより簡単に実行できるようにする小さなコードです。 Gravity Forms に関して言えば、その「アクション」は通常、コンテンツにフォームを埋め込むことです。
ショートコードの基本的な形式は次のようになり、ショートコード名が括弧内に配置されます。
[ショートコード]
ショートコードの動作を調整するには、パラメーターと呼ばれる修飾子を追加します。これらはショートコード内の追加コンテンツであり、通常、その後に使用するパラメーターを示す等号が続きます。
たとえば、Gravity Forms からフォームを埋め込むには、追加のID埋め込む実際のフォームを指定するパラメータ:
[gravityform id="7"]
ショートコードを使用する理由
ショートコードは、プラグインからサイトのさまざまな領域にコンテンツを追加する方法を提供します。
Gravity Forms の場合、ショートコードの最大の利点の 1 つはその汎用性です。
Gravity Forms 埋め込みショートコードを使用すると、サイトのほぼどこにでもフォームを追加できます。これは、ネイティブ WordPress エディターまたはウィジェットにフォームを追加するだけでなく、他のプラグインにフォームを追加する場合に特に便利です。
たとえば、ショートコードを使用すると、ポップアップ プラグインの設定内にショートコードを追加することでポップアップ フォームを作成できます。確認してください。詳細については、WordPress ポップアップ フォームのガイドをご覧ください。。
同様に、ショートコードを使用すると、Elementor、Beaver Builder、Divi などのドラッグ アンド ドロップ ビルダー プラグイン内にフォームを追加できます。
この多用途性を超えて、Gravity Forms ショートコードは、他の埋め込み方法では提供されない、より高度な使用例も可能にします。
たとえば、ショートコードを使用して 2 つのフォームを連結できます。
基本的に、Gravity Forms のショートコードがどのように機能するかを理解すると、Gravity Forms から最大限の価値を引き出すことができます。
ユースケースによってはショートコードを使用する必要がない場合もありますが、ショートコードを理解することは、少なくともその可能性を知るのに役立ちます。
ショートコードを使用して Gravity フォームを埋め込む方法
チュートリアルを始めるために、ショートコードを使用してフォームを埋め込む方法を見てみましょう。次に、次のセクションでは、ショートコード パラメーターを使用してフォームの埋め込みを変更する方法について説明します。
1. フォームのショートコードを見つける
Gravity Forms で作成したフォームの埋め込みショートコードを見つける最も簡単な方法は次のとおりです。
- 埋め込むフォームのフォーム エディターを開きます。に行きますフォームダッシュボードの領域を選択して、編集埋め込みたいフォームの下にある
- クリック> 埋め込むフォームエディターの右上隅にあるボタン。
- クリックショートコードをコピーするボタンをクリックしてショートコードをクリップボードにコピーします。
2. ショートコードをエディタに追加します
次に、フォームを埋め込むページのエディターを開きます。
これには、WordPress ブロック エディター、従来の TinyMCE エディター、ポップアップ プラグイン、ページ ビルダー プラグインなどが考えられます。
ただし、この例では、ネイティブ WordPress ブロック エディターを使用します。
まず、ショートコードブロック。次に、次のように Gravity Forms ショートコードをフィールドに貼り付けます。
以上です!ページを更新すると、フォームが表示されるはずです。
次のセクションでは、埋め込み機能を変更するいくつかの方法について説明します。ただし、最初に、フォームを埋め込む方法が他にもあることを指摘しておきます。
ブロックを使用してフォームを埋め込むこともできます…
そうではないことに注意することが重要です必要Gravity Forms ショートコードを使用して、ブロック エディターに基本フォームを埋め込みます。
ネイティブ WordPress ブロック エディター (別名 Gutenberg) を使用している場合、Gravity Forms にはフォームを埋め込むために使用できる専用のブロックが含まれています。
このブロックには、タイトルや説明の非表示など、ほとんどの基本的なショートコード パラメーターの基本設定も含まれています。
…または、コードを使用してフォームを埋め込むこともできます
より上級のユーザーの場合は、専用のツールを使用してフォームを埋め込むこともできます。重力フォーム()
機能 – WordPress に依存する必要はありませんdo_shortcode()
関数。
これがどのように機能するかについては、こちらをご覧くださいコードを使用してフォームを埋め込む方法に関するガイド。
Gravity フォームのショートコード パラメーターを使用してフォームを変更する方法
Gravity Forms 埋め込みショートコードには、その動作を変更するために使用できる 6 つの異なるパラメーターが付属しています。
使用できる 6 つの埋め込みショートコード パラメーターは次のとおりです。
ID
– ID に基づいて、埋め込む特定のフォームを指定します。これが必須の唯一のパラメータです。他のパラメータはすべてオプションです。タイトル
– フォームのタイトルを表示するかどうか。かもね真実(タイトルを表示)または間違い(タイトルなし)。説明
– フォームの説明を表示するかどうか。かもね真実または間違い。アヤックス
– Ajax 送信を使用するかどうか。かもね真実(Ajax 送信を使用) または間違い(ユーザーがフォームを送信した後にページをリロードする必要があります)。タブインデックス
– これは、フォームの開始タブインデックスを指定できる数値です。ほとんどの場合、これを使用する必要はありませんが、ページ上に複数のフォームがある場合にキーボード ショートカットの動作を調整するのに役立ちます。もっと詳しく知る。フィールド値
– これにより、フォーム内の特定のフィールドにプリセット値を事前に入力できます。これは最も汎用性の高いショートコード パラメーターなので、以下で詳しく説明します。
Gravity フォームのショートコード パラメーター
基本的な Gravity Forms ショートコード パラメーターを適用する例をいくつか見て、フォームの埋め込みにどのような影響を与えるかを理解しましょう。
バックエンドでのフォームは次のようになります。
次に、さまざまなショートコード パラメーターを使用するとどうなるかを見てみましょう。
基本的な埋め込みショートコード
基本的な Gravity Forms 埋め込みショートコードを使用する場合、デフォルトの動作ではフォームのタイトルと説明の両方が含まれます。
したがって、次のようにショートコードのみを使用すると、次のようになります。
[gravityform id="9"]
次に、フロントエンド フォームには次のようにタイトルと説明の両方が含まれます。
フォームのタイトルを非表示にする
フォームのタイトルを非表示にしたい場合は、タイトルパラメータを設定し、次と等しく設定します間違い:
[gravityform id="9" title="false"]
これで、フロントエンド フォームには引き続き説明が含まれますが、タイトルは含まれません。
フォームの説明を非表示にする
フォームの説明を非表示にしたい場合は、説明パラメータを設定し、次と等しく設定します間違い:
[gravityform id="9" description="false"]
これで、フロントエンド フォームには引き続きタイトルが含まれますが、説明は含まれません。
フォームのタイトルと説明を非表示にする
タイトルと説明の両方を非表示にするには、次のようにショートコードに両方のパラメータを含めるだけです。
[gravityform id="9" title="false" description="false"]
これで、埋め込みにはフォーム自体のみが含まれ、タイトルや説明は含まれなくなります。
field_values パラメータを使用してフォーム データを事前入力する方法
他のショートコードパラメータは単純な調整を行うのに対し、フィールド値パラメータは、より高度な機能を提供します。
基本的に、このパラメータを使用すると、フォーム内の 1 つ以上のフィールドに事前に入力できます (または複数のオプションから値を事前選択できます)。
の使用には 2 つの部分がありますフィールド値パラメータ:
- 情報を追加するフィールド。
- 追加したい情報。
このパラメーターを使用するには、まず、入力するフィールドのフィールド設定で動的入力を有効にする必要があります。有効にすると、ショートコードに必要なパラメーター名を指定できるようになります。
次に、次のようにショートコードを設定できます。
[gravityform id="1" field_values="パラメータ名=値"]
たとえば、フィールドに次のパラメータを事前に入力するには、at_event_nameコンテンツが「My Awesome Event」の場合、次のようにショートコードを設定します。
[gravityform id="1" field_values="sa_event_name=私の素晴らしいイベント"]
複数のフィールドに値を入力したい場合は、次のようにアンパサンドを使用してフィールドを接続できます。
[gravityform id="1" field_values="パラメータ名1=値1&パラメータ名2=値2&パラメータ名3=値3"]
さらに詳しく知りたい場合は、動的な人口に関するこのドキュメントを確認してください。
ショートコードを使用して Gravity フォームをチェーンする方法
Gravity Forms ショートコードのより高度な使用例は、2 つの別々のフォームを連結することです。それなしユーザーを別の URL に送信する必要があります。
「2 つのフォームを連結する」とは、ユーザーが最初のフォームを送信し、最初のフォームを送信した直後に 2 番目のフォームが表示されることを意味します。
前のセクションでフォーム データの事前入力について学んだことを利用して、ユーザーが最初のフォームで送信したデータに基づいて 2 番目のフォームに一部の情報を事前入力することもできます。
たとえば、ユーザーが最初のフォームの一部として電子メール アドレスをすでに送信している場合は、その情報を 2 番目のフォームに事前に入力できます。
基本的なプロセスを次に示します。チュートリアル全体を読み続けてください。
- 連結する 2 つのフォームを作成します。
- ショートコードを追加するのために 第二形態確認メッセージに第一形態の。 2 番目のフォームにフォーム データを事前に入力したい場合は、差し込みタグを使用してそれをショートコードの一部として含めることができます。
- 最初のフォームをページに埋め込みます。
1. 連結する 2 つのフォームを作成します
まず、連結する 2 つのフォームを作成します。
他のフォームと同じように作成できます。(まだ) 何か違うことをする必要はありません。
2. 最初のフォームの確認メッセージに 2 番目のフォームのショートコードを追加します
次に、埋め込みショートコードを見つけます。第二形態。つまり、ユーザーが最初のフォームを送信した後に表示されるフォームです。
ショートコードを安全な場所に保存したら、フォーム設定を開きます。最初の形式でデフォルトの確認メッセージを編集します。確認タブ。
必ず選択してください文章として確認タイプ。次に、ショートコードを追加します第二形態の確認メッセージエディターへ最初の形式:
このとき、必ず設定してください。アヤックスパラメータに等しい真実2 番目のフォームのショートコード内。
3. 動的フィールド作成のセットアップ (オプション)
2 つのフォーム間で情報を受け渡したい場合は、フィールド値Gravity Forms ショートコードのパラメーターと、確認メッセージで使用できるマージ タグ。
この手順は必須ではありませんが、2 番目のフォームに記入するときにユーザー エクスペリエンスを向上させるのに役立ちます。
たとえば、最初のフォームでユーザーの電子メール アドレスをすでに要求している場合は、その情報を 2 番目のフォームに事前に入力して、ユーザーが同じ作業を繰り返すことを避けることができます。
これを行うには、最初のフォームの電子メール アドレス フィールドの差し込みタグと同じフィールドの値を設定します。
4. 最初のフォームを埋め込む
最後に、最初の形式サイトのフロントエンドで、ショートコードまたはブロック (または PHP 関数) を使用して実行できます。
ただし、埋め込みに関しては重要な点が 1 つあります。フロントエンドに最初のフォームを埋め込むときは、必ずアヤックスというオプション間違い(オフ)。
設定した場合アヤックスに真実最初のフォームを埋め込むと、ユーザーが 2 番目のフォームを送信した後に最初のフォームがリロードされ、混乱を招く動作になります。
以下は、ショートコードを使用してフォームを埋め込む例です。
[gravityform id="9" title="true" description="true" ajax="false"]
以上です!
訪問者がこのページにアクセスすると、最初のフォームが表示されます。
最初のフォームを送信すると、2 番目のフォームが自動的に読み込まれます
条件付きロジックを使用して、状況によっては 2 番目の形式のみを表示する
より高度な使用例は、ユーザーが最初のフォームに特定の方法で回答した場合にのみ 2 番目のフォームを表示することです。
これを実現するには、Gravity Form の組み込み条件付きロジック機能を使用します。
基本的には、上記で説明したことと同じことをすべて実行します。ただし、1 つの調整は、新しい確認メッセージ。
その際には、条件付きロジックこの確認をいつ使用するかを制御する機能。
この設定では、2 番目のフォームは、ここで設定した条件付きロジック ルールを満たす場合にのみ表示されます。
Gravity Forms の条件付きショートコードの使用方法
これまでは、Gravity Forms の埋め込みショートコードに焦点を当ててきました。
ただし、Gravity Forms ショートコードを使用して、通知などで条件付きロジックをフォームに適用することもできます (管理者またはユーザーに送信される)と確認メッセージが表示されます。
たとえば、特定のチェックボックスがオンになっている場合、特定のフィールドが空でない場合、特定のフィールドに特定のコンテンツが含まれている場合など、コンテンツを表示できます。
これは、通知や確認メッセージに小さな調整を加えるのに役立ちます。
ただし、より大きな変更の場合は、まったく異なる通知または確認メッセージを設定し、組み込みの条件付きロジック設定を使用することもできます。
基本的に:
- Gravity Forms の条件付きショートコード– 別の通知フィードや確認フィードを作成する手間を省きたい場合に、小さな変更を加える場合にこれを使用します。
- 条件付きロジックを使用してフィードを分離する– まったく異なるコンテンツ/フォーマットを表示したい場合は、これを使用します。
Gravity Forms の条件付きロジックのショートコード パラメーター
基本の条件付きロジックのショートコードは次のとおりです。[重力フォーム]
。
次に、条件付きロジック ルールを定義できる 4 つのパラメーターを使用して動作を変更できます。
アクション
– 条件付きロジックを使用するには、これを条件付きに設定する必要があります。マージタグ
– これは、条件付きロジックを適用するフォーム結合タグです。つまり、対象とするフィールド値です。状態
– これは適用したい条件です。詳細については以下をご覧ください。価値
– これは、コンテンツを表示するために条件が一致する必要がある値です。
条件に関しては、以下を使用できます。
- は
- ではありません
- より大きい
- 未満
- 含まれています
- で始まる
- で終わる
以下に例を示します。
[[gravityforms action="conditional" merge_tag="{Number:1}"condition="greater_than" value="3"]
条件付きで表示したいコンテンツ。
[/gravityforms]
Gravity Forms の条件付きロジックのショートコードを追加する方法
主に電子メール通知と確認メッセージで条件付きロジックのショートコードを使用します。これにはフォーム設定からアクセスできます。
他のアドオンを使用している場合は、それらのアドオンのフィードで条件付きロジックのショートコードを使用することもできます。たとえば、Slack アドオンを使用している場合は、送信する Slack 通知にこれを含めることができます。
Gravity Forms ショートコードを使用するには、条件付きで表示するコンテンツをショートコード内でラップします。次に、ショートコードは、そのコンテンツをいつ表示するかの条件を定義します。
上の例に戻りましょう。
[gravityforms action="conditional" merge_tag="{Number:1}"condition="greater_than" value="3"]
条件付きで表示したいコンテンツ。
[/gravityforms]
このショートコードは、「条件付きで表示したいコンテンツ」というコンテンツを表示しますが、フィールドの値 (マージ タグで指定) が 3 より大きい場合に限ります。
実際の確認設定で同様のものがどのように表示されるかを示す例を次に示します。
Gravity Forms のショートコードが機能しない?修正方法は次のとおりです
Gravity Forms のショートコードが機能しないという問題が発生した場合は、確認すべきことがいくつかあります。
まず、正しいフォーム ID 番号を持っていることを確認してください。存在しないフォーム ID を誤って入力した場合、Gravity Forms はフォームが見つからないというメッセージを表示します。
フォーム ID が正しい場合、次に確認するのは引用符です。ショートコードパラメータを手動で入力している場合、ここでタイプミスをする可能性があります。
- 開始引用符または終了引用符を追加するのを忘れます。
- アポストロフィ (') と引用符 (") が混在しています。一重引用符または二重引用符を使用できますが、選択には一貫性を保つ必要があります。
- パラメータの一部として引用符を含めます。たとえば、引用符を含むコンテンツをフィールドに入力しようとします。これも可能ですが、問題が発生する場合は、一重引用符の使用に切り替える (またはその逆) 必要がある場合があります。
また、パラメーター自体をチェックして、タイプミスがないかどうかを確認することもできます。
Gravity Forms アドオンを使用してさらに多くのショートコードを追加
上記で説明した内容はすべて、コアの Gravity Forms プラグインに当てはまります。
ただし、公式またはサードパーティの Gravity Forms アドオンを介して追加のショートコードまたはショートコード パラメーターにアクセスできる可能性があることに注意することが重要です。
たとえば、使用している場合重力流にカスタム ワークフローでフォームを拡張する、重力流独自のショートコードが含まれています、それを変更するためのいくつかのショートコードとともに。
これらのアドオン ショートコードがどのように機能するかを学ぶと、Gravity Forms からさらに多くの価値を得ることができます。
この情報を見つける最も簡単な方法は、アドオン開発者のドキュメントを参照することです。
Gravity Forms のショートコードを使ってみる
Gravity Forms のショートコードを使用すると、コンテンツの埋め込みや条件付きロジックの適用に大きな柔軟性が生まれます。
専用ブロックを使用するなど、フォームを埋め込む他の方法もありますが、Gravity Forms 埋め込みショートコードの利点のいくつかは次のとおりです。
- これを使用すると、サイトのどこにでもコンテンツを埋め込むことができますが、ブロックの場合はそうではありません。たとえば、ショートコードを使用して、ページ ビルダー プラグインやポップアップ プラグインなどにフォームを埋め込むことができます (クラシックな TinyMCE エディターとクラシックなウィジェットは言うまでもありません)。
- 2 つのフォームを連結したり、それらのフォーム間でデータを受け渡したりするなど、より高度なユースケースを利用できるようになります。
ショートコードがどのように機能するかがわかったので、新しくて興味深い方法でショートコードを使い始めることができます。
まだ Gravity Forms ユーザーでない場合は、今すぐライセンスを購入してくださいGravity Forms の他のすべての便利な機能とともに、ショートコードにアクセスします。
ブログで起こっていることの最新情報を入手したい場合は、Gravity Forms ニュースレターにサインアップしてください。