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? Utilizando um snippet e nomes de classes CSS e CSS personalizados, pode conseguir isso e nós acompanhá-lo-emos em cada passo do processo!

Criar o formulário

Primeiro, tem de criar o seu formulário e adicionar os campos de que vai precisar. Para cada campo que pretende que seja um seletor de cores, adicione um campo de texto de linha única. No nosso exemplo, adicionámos dois destes campos.

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

Criar um campo de seleção de cores

Assim que os campos de texto de linha única forem adicionados ao formulário, precisamos de dizer a estes campos que serão campos de seleção de cores.

Para o conseguir, clique num dos Texto de uma linha que adicionou e no Avançado separador, adicionar wpforms-color-picker para o Classes CSS domínio.

Adicionar 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 );

Assim que o snippet for adicionado, procurará qualquer campo com a classe CSS de wpforms-color-picker e transformará esse campo numa seleção de seletor 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, para além de apresentar a própria cor.

E pronto! Adicionou com êxito 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 WPForms usando CSS.