Como Adicionar um Seletor de Cores ao seu Formulário

Introdução

Gostaria de adicionar um campo de seletor de cores ao seu formulário? Usando um snippet e classes CSS personalizadas, você pode conseguir isso e nós o guiararemos em cada etapa do caminho!

Criando o formulário

Primeiro, você precisará criar seu formulário e adicionar os campos que precisará. Para cada campo que você deseja que seja um seletor de cores, adicione um campo de Texto de Linha Única. Em nosso exemplo, adicionamos dois desses campos.

Para qualquer ajuda na criação do seu formulário, por favor revise esta documentação.

Criando um campo de seletor de cores

Depois que os campos de Texto de Linha Única forem adicionados ao seu formulário, precisamos informar a esses campos que eles serão campos de seletor de cores.

Para conseguir isso, clique em um dos campos de Texto de Linha Única que você adicionou e, na aba Avançado, adicione wpforms-color-picker ao campo Classes CSS.

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, por favor, confira 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 wpforms-color-picker e transformará esse campo em uma seleção de seletor de cores.

À medida que os usuários clicam no bloco de cores e arrastam para cima para selecionar a cor, você notará que o valor hexadecimal aparecerá dentro do campo, bem como a exibição da própria cor.

E é isso! Você adicionou com sucesso um campo de seletor 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 Divisores de Seção do WPForms Usando CSS.