フォームにカラーピッカーを追加する方法

はじめに

フォームにカラーピッカーフィールドを追加しますか？ スニペット、カスタムCSS、およびCSSクラス名を使用することでこれを実現できます。すべての手順を説明します！

フォームの作成

まず、フォームを作成し、必要なフィールドを追加する必要があります。カラーピッカーにしたい各フィールドには、1行テキストフィールドを追加してください。この例では、これらのフィールドを2つ追加しました。

フォームの作成に関するヘルプについては、こちらのドキュメントをご覧ください。

カラーピッカーフィールドの作成

1行テキストフィールドをフォームに追加したら、これらのフィールドがカラーピッカーフィールドであることを指定する必要があります。

これを実現するには、追加した1行テキストのいずれかをクリックし、詳細設定タブで、CSSクラスフィールドにwpforms-color-pickerを追加します。

スニペットの追加

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

/**
 * Adding a color picker to your form
 *
 * @link https://wpforms.com/developers/how-to-add-a-color-picker-to-your-form/
 */
 
function wpf_dev_color_picker_field() {
    ?>

    <style type="text/css">
#wpforms-cp-input {
    border: none;
    opacity: 0;
    width: 100%;
    height: 100%;
	display: block;
}

#wpforms-color-picker-bg {
	border-right: 1px solid #ccc;
    height: 36px;
    width: 36px;
	left: 1px;
    position: relative;
}

.wpforms-color-picker input[type=text] {
    padding-left: 50px !important;
	margin-top: -37px !important;
}
    </style>

    <script type="text/javascript">

        jQuery(function($) {
            if (typeof Inputmask == 'undefined') {
                $( '<script>' ).attr({
                    'type': 'text/javascript',
                    'src': '/wp-content/plugins/wpforms/assets/lib/jquery.inputmask.min.js'
                }).appendTo('head');
            }

            $( '.wpforms-color-picker' ).each(function() {
                // Generate random hex color on page load
                var randomColor = "#000000".replace(/0/g, function() {
                    return (~~(Math.random() * 16)).toString(16);
                });

                // Save current color picker container object in the loop
                var $colorInputContainer = $(this);

                // Add input mask to text input for color hex values only
                Inputmask({
                    "mask": "\\#******",
                    "definitions": {
                        '*': {
                            validator: "[0-9A-Fa-f]"
                        }
                    }
                }).mask($(this).find( 'input[type=text]' ));

                // Set default random color value and append color input element before text input
                $colorInputContainer.find( 'input[type=text]' )
                    .attr({
                        'data-rule-empty-blanks': 1,
                        'autocomplete': 'off',
                        'placeholder': '#______'
                    })
                    .before( '<div id="wpforms-color-picker-bg" style="background:' + randomColor + ';"><input id="wpforms-cp-input" type="color"/></div>' );

                var $colorInput = $(this).find( '#wpforms-cp-input' );

                // Change input color background and text value on color selection and hide input mask blank error
                $colorInput.on( 'input', function() {
                    $(this).parent().css({
                        background: $(this).val()
                    });
                    $colorInputContainer.find( 'input[type=text]' ).val($(this).val().toUpperCase()).toggleClass( 'wpforms-error', false);
                    $colorInputContainer.find( 'label:last-child' ).hide();
                    $colorInput.attr( 'value', $(this).val());
                });

                // Change input color background if hex value is typed manually or pasted
                $(this).find( 'input[type=text]' ).on( 'change paste keyup', function() {
                    $colorInputContainer.find( '#wpforms-color-picker-bg' ).css({
                        background: $(this).val()
                    });

                    $colorInput.attr( 'value', $(this).val()).change();
                });
            });
        });
    </script>

<?php }
add_action( 'wpforms_wp_footer_end', 'wpf_dev_color_picker_field', 10 );

スニペットが追加されると、CSSクラスwpforms-color-pickerを持つフィールドを探し、そのフィールドをカラーピッカー選択に変換します。

ユーザーがカラーブロックをクリックしてドラッグして色を選択すると、フィールド内に16進値が表示され、色自体も表示されることに気付くでしょう。

これで完了です！フォームにカラーピッカーフィールドを正常に追加できました！CSSを使用してセクション区切りをスタイル設定しますか？CSSを使用してWPFormsセクション区切りをカスタマイズする方法の記事をご覧ください。