ご注意!

この記事には PHP コードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

フォームフィールドのラベル内にショートコードを表示する

ショートコードを使用して、インタラクティブなツールチップや動的なコンテンツでフォームのラベルを強化しますか? WPFormsはデフォルトではラベルにショートコードをサポートしていませんが、PHPを使用してこの機能に簡単に追加できます。

このガイドでは、フォームフィールドのラベル内に任意のショートコードを表示する方法を説明します。

Shortcodes Ultimateプラグインのインストール(オプション)

ショートコードプラグインをまだお持ちでない場合は、WordPressプラグインリポジトリからShortcodes Ultimateをインストールできます。すでに別のショートコードプラグインをお持ちの場合や、テーマの組み込みショートコードを使用している場合は、この手順はオプションです。

プラグインのインストールのヘルプについては、WPBeginnerのプラグインのインストール方法に関するガイドを参照してください。

必要なツールチップショートコードを作成するには、ツールチップショートコードの作成方法に関するドキュメントに従う必要があります。

フォームの作成

新しいフォームを作成するか、既存のフォームを編集できます。フォームの作成方法に関するヘルプが必要な場合は、このドキュメントを参照してください

ツールチップテキストをラベルとして使用するため、電話フォームフィールドのラベルは必要ありません。そのため、フォームフィールドの詳細設定タブでラベルを非表示オプションを選択し、フォームの保存をクリックしてください。

詳細設定タブをクリックし、ラベルを非表示に切り替えてフォームラベルをオフにします

コードの追加

フォームラベルにショートコードを表示するには、サイトにコードスニペットを追加する必要があります。カスタムコードの追加方法がわからない場合は、コードスニペットの追加に関するガイドを参照してください。

上記のコードスニペットでは、3つの主要な値を変更する必要があります。

  • 10行目:フォームIDで1055を置き換えてください
  • 10行目:フィールドIDで4を置き換えてください
  • 12行目:ショートコードを目的のショートコードに置き換えてください

訪問者がフォームを見てツールチップをクリックすると、メッセージが表示されます。

これで、フォームフィールドのラベル内にショートコードが表示されていることがわかります

よくある質問

Q:異なるフォームやラベルに異なるショートコードを追加するにはどうすればよいですか?

A:異なるショートコードを使用して他のフォームでこのスニペットを再利用したい場合は、確かに可能です。

/**
 * Run shortcodes on the form label field.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-label-of-the-form-field/
 */
 
function add_shortcode_to_label( $field, $form_data ) {
         
        // Check that the form ID is 1055 and the field id is 4 for the Phone field
    if ( 1055 === absint( $form_data[ 'id' ] ) && 4 === absint( $field[ 'id' ] ) ) {
 
        echo do_shortcode( ' [su_tooltip text="Your information is completely protected and will not be sold!<br><a href=&ldquo;https://myexamplesite.com/privacy/&ldquo;>Click here to learn more.</a>" behavior="click" hide_delay="500"]Click Me![/su_tooltip] ' );
     
        }
     
        // Check that the form ID is 1055 and the field id is 2 for the Name field
    if ( 1055 === absint( $form_data[ 'id' ] ) && 2 === absint( $field[ 'id' ] ) ) {
 
        echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on the same form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
     
        }   
 
        // Check that the form ID is 1072 and the field id is 6 for the Comments field
    if ( 1072 === absint( $form_data[ 'id' ] ) && 6 === absint( $field[ 'id' ] ) ) {
 
        echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on a completely different form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
     
        }
     
}
add_action( 'wpforms_display_field_before', 'add_shortcode_to_label', 16, 2 );

これで、ラベルフォームフィールド内に任意のショートコードを表示するために必要なすべてが揃いました。HTMLフィールド内にショートコードを表示したいですか? HTMLフィールド内にショートコードを表示する方法に関する記事をご覧ください。

参照アクション

wpforms_display_field_before