Comment ajouter un sélecteur de couleur à votre formulaire

Introduction

Souhaitez-vous ajouter un champ sélecteur de couleur à votre formulaire ? En utilisant un extrait de code, du CSS personnalisé et des noms de classes CSS, vous pouvez y parvenir et nous vous guiderons à chaque étape !

Création du formulaire

Tout d'abord, vous devrez créer votre formulaire et ajouter les champs dont vous aurez besoin. Pour chaque champ que vous souhaitez transformer en sélecteur de couleur, ajoutez un champ Texte sur une seule ligne. Dans notre exemple, nous en avons ajouté deux.

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

Créer un champ sélecteur de couleur

Une fois les champs Texte sur une seule ligne ajoutés à votre formulaire, nous devons indiquer à ces champs qu'ils seront des sélecteurs de couleur.

Pour ce faire, cliquez sur l'un des champs Texte sur une seule ligne que vous avez ajoutés et, dans l'onglet Avancé, ajoutez wpforms-color-picker dans le champ Classes CSS.

Ajout du snippet

Il est maintenant temps d'ajouter l'extrait de code à votre site. Si vous avez besoin d'aide sur comment et où ajouter des extraits de code à 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 l'extrait de code ajouté, il recherchera tout champ portant la classe CSS wpforms-color-picker et le transformera en sélecteur de couleur.

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

Et voilà ! Vous avez ajouté avec succès un champ sélecteur de couleur à votre formulaire ! Souhaitez-vous utiliser du CSS pour styliser vos Séparateurs de section ? Consultez cet article sur Comment personnaliser le séparateur de section WPForms à l'aide de CSS.