Comment ajouter un sélecteur de couleurs à votre formulaire

Introduction

Souhaitez-vous ajouter un champ de sélection de couleur à votre formulaire ? A l'aide d'un snippet, d'un CSS personnalisé et de noms de classes CSS, vous pouvez y parvenir et nous vous accompagnerons à chaque étape du processus !

Création du formulaire

Tout d'abord, vous devez créer votre formulaire et ajouter les champs dont vous aurez besoin. Pour chaque champ que vous souhaitez utiliser comme sélecteur de couleur, ajoutez un champ de texte à ligne unique. Dans notre exemple, nous avons ajouté deux de ces champs.

Pour toute aide à la création de votre formulaire, veuillez consulter cette documentation.

Création d'un champ de sélection des couleurs

Une fois les champs de texte à ligne unique ajoutés à votre formulaire, nous devons indiquer à ces champs qu'ils seront des champs de sélection de couleur.

Pour ce faire, cliquez sur l'un des Texte sur une seule ligne que vous avez ajouté et sur le Avancé ajouter wpforms-color-picker à la Classes CSS domaine.

Ajout du snippet

Il est maintenant temps d'ajouter l'extrait à votre site. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, veuillez consulter ce tutoriel.

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

Une fois le snippet ajouté, il recherchera tout champ ayant la classe CSS wpforms-color-picker et transformera ce champ en sélecteur de couleurs.

Lorsque les utilisateurs cliquent sur le bloc de couleur et le font glisser vers le haut pour sélectionner la couleur, vous remarquerez que la valeur hexadécimale apparaît dans le champ et que la couleur elle-même est affichée.

Et c'est tout ! Vous avez ajouté avec succès un champ de sélection de couleur à votre formulaire ! Souhaitez-vous utiliser les CSS pour styliser vos séparateurs de section? Jetez un coup d'œil à cet article sur Comment personnaliser les séparateurs de section de WPForms en utilisant CSS.