Como adicionar um seletor de cores ao seu formulário

Introdução

Gostaria de adicionar um campo de seleção de cores ao seu formulário? Usando um snippet e nomes de classes CSS e CSS personalizados, você pode fazer isso e nós o orientaremos em cada etapa do processo!

Criando o formulário

Primeiro, você precisará criar o formulário e adicionar os campos necessários. Para cada campo que você deseja que seja um seletor de cores, adicione um campo Single Line Text. Em nosso exemplo, adicionamos dois desses campos.

Para obter ajuda na criação do formulário, consulte esta documentação.

Criação de um campo de seleção de cores

Depois que os campos de texto de linha única forem adicionados ao formulário, precisaremos informar a esses campos que eles serão campos de seleção de cores.

Para isso, clique em uma das Texto de linha única que você adicionou e no Avançado adicione wpforms-color-picker para o Classes CSS campo.

Adicionando o snippet

Agora é hora de adicionar o snippet ao seu site. Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, consulte este tutorial.

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

Depois que o snippet for adicionado, ele procurará qualquer campo com a classe CSS de wpforms-color-picker e transformará esse campo em uma seleção de seletor de cores.

Quando os usuários clicarem no bloco de cores e arrastarem para cima para selecionar a cor, você notará que o valor hexadecimal aparecerá dentro do campo, além de exibir a própria cor.

E é isso! Você adicionou com sucesso um campo de seleção de cores ao seu formulário! Gostaria de usar CSS para estilizar seus divisores de seção? Dê uma olhada neste artigo sobre Como personalizar o divisor de seção do WPForms usando CSS.