クーポンフィールドにプレースホルダーを追加する方法

はじめに

クーポンフィールドにプレースホルダーを追加したいですか？簡単なスクリプトを実装することで、このプレースホルダー機能をシームレスに統合できます。このチュートリアルでは、プロセスの各ステップを順を追って説明し、この貴重な機能でフォームを簡単に強化できるようにします。さあ、始めましょう！

フォームの作成

まず、フォームを作成し、クーポンフィールドを含むフィールドを追加する必要があります。

このフィールドの使用方法についてサポートが必要な場合は、こちらの役立つガイドをご覧ください。

スニペットの追加

次に、スニペットを追加します。サイトにスニペットを追加する方法と場所についてサポートが必要な場合は、こちらのチュートリアルを確認してください。

/* Set a placeholder to the Coupon field 
 *
 * @link https://wpforms.com/developers/how-to-schedule-a-form-base-on-the-time-of-day/
*/
function wpf_add_coupon_placeholder() {
	
	// Set the placeholder text here to keep it available for translation
	$couponPlaceholder=__( 'Enter your coupon code here', 'textdomain' );
	
    ?>
    <script type="text/javascript">
		var placeholderText='<?=$couponPlaceholder?>';
        document.addEventListener('DOMContentLoaded', function() {
            var couponInput = document.querySelector('.wpforms-field-payment-coupon-input');
            if (couponInput) {
                couponInput.placeholder = placeholderText;
            }
        });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_add_coupon_placeholder', 30);

このスニペットを分解しましょう。まず、クーポンフィールド内に表示したいテキストを変数$couponPlaceholderに設定します。このテキストを変数に配置することで、多言語サイトで使用する場合にテキストが自動的に翻訳されるようになります。

次に、.wpforms-field-payment-coupon-inputは、クーポンフィールドに適用されるCSSクラスを探し、フォーム内でそれを見つけると、このスクリプトは$couponPlaceholderで定義したプレースホルダーを適用します。

これで、訪問者がフィールドを表示すると、プレースホルダーテキストが表示されます。

これで、プレースホルダーを設定するために必要なすべてが揃いました。フォーム内の選択に基づいて、このフィールドを条件付きにすることもできますか？クーポンに条件付きロジックを作成する方法に関するチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end