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, pode conseguir isto e nós guiá-lo-emos em cada passo!

Criação do formulário

Primeiro, terá de criar o seu formulário e adicionar os campos de que necessitará. Para cada campo que queira que seja um seletor de cores, adicione um campo de Texto de Linha Única. No nosso exemplo, adicionámos dois destes campos.

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

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

Depois de os campos de Texto de Linha Única serem adicionados ao seu formulário, precisamos de dizer a estes campos que serão campos de seleção de cores.

Para conseguir isto, clique num dos campos de Texto de Linha Única que adicionou e, no separador Avançadas, adicione wpforms-color-picker ao campo Classes CSS.

Adição do trecho de código

Agora é hora de adicionar o snippet ao seu site. Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, por favor veja 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 de o snippet ser adicionado, procurará qualquer campo com a classe CSS de wpforms-color-picker e transformará este campo numa seleção de cores.

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

E é tudo! Adicionou com sucesso um campo de seleção de cores ao seu formulário! Gostaria de usar CSS para estilizar os seus Divisores de Secção? Dê uma vista de olhos a este artigo sobre Como Personalizar o Divisor de Secção WPForms Usando CSS.