Come Aggiungere un Selettore di Colore al Tuo Modulo

Introduzione

Vuoi aggiungere un campo selettore di colori al tuo modulo? Utilizzando uno snippet, CSS personalizzato e nomi di classi CSS, puoi ottenerlo e ti guideremo in ogni fase del processo!

Creazione del modulo

Per prima cosa, dovrai creare il tuo modulo e aggiungere i campi di cui avrai bisogno. Per ogni campo che desideri sia un selettore di colori, aggiungi un campo Testo a riga singola. Nel nostro esempio, ne abbiamo aggiunti due.

Per qualsiasi aiuto nella creazione del tuo modulo, consulta questa documentazione.

Creazione di un campo selettore di colori

Una volta aggiunti i campi Testo a riga singola al tuo modulo, dobbiamo indicare a questi campi che saranno campi selettori di colori.

Per ottenere questo risultato, fai clic su uno dei campi Testo a riga singola che hai aggiunto e, nella scheda Avanzate, aggiungi wpforms-color-picker al campo Classi CSS.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al tuo sito. Se hai bisogno di aiuto su come e dove aggiungere snippet al tuo sito, dai un'occhiata a questo 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 );

Una volta aggiunto lo snippet, cercherà qualsiasi campo con la classe CSS wpforms-color-picker e trasformerà quel campo in un selettore di colori.

Mentre gli utenti fanno clic sul blocco di colore e trascinano verso l'alto per selezionare il colore, noterai che il valore esadecimale apparirà nel campo, oltre a visualizzare il colore stesso.

E questo è tutto! Hai aggiunto con successo un campo selettore di colori al tuo modulo! Vuoi usare il CSS per stilizzare i tuoi Divisori di sezione? Dai un'occhiata a questo articolo su Come personalizzare i divisori di sezione di WPForms usando CSS.