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

はじめに

フォームにカラーピッカーフィールドを追加したいですか？スニペットとカスタムCSS、CSSクラス名を使うことで実現できます！

フォームの作成

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

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

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

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

そのためには 単一行テキスト を追加した。 上級 タブに wpforms-color-picker に対する CSSクラス フィールドにいる。

スニペットの追加

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

/**
 * 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 );

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

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

これで完了です！これでフォームにカラーピッカーフィールドを追加できました！CSS を使ってセクションディバイダーをカスタマイズしたいですか？CSS を使って WPForms のセクションディバイダをカスタマイズする方法をご覧ください。