How to Add a Color Picker to Your Form

Introduction

Would you like to add a color picker field to your form? Using a snippet and custom CSS and CSS class names, you can achieve this and we’ll walk you through every step of the way!

Creating the form

First, you’ll need to create your form and add the fields that you’ll be needing. For each field you want to be a color picker, add a Single Line Text field. In our example, we’ve added two of these fields.

For any help in creating your form, please review this documentation.

Assigning the CSS class name

Next, we need to tell two of these Single Line Text fields that they will be color picker fields by adding a CSS class name. In order to do this, click on the first field and select the Advanced tab. In the CSS Classes you’ll add the class name of wpforms-color-picker.

You’ll repeat this step for each field where you want to display the color picker.

Adding the snippet

Now it’s time to add the snippet to your site. If you need help in how and where to add snippets to your site, please check out this 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 );

Styling the color picker field

The last step is to just add some default CSS styling to make sure the new color picker field displays in line with the rest of the fields. In order to do this, please copy and paste this CSS to your site.

For any assistance on where to add custom CSSplease review this tutorial

#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;
}

When you view the form, you’ll now see the two color picker fields we added to our form.

And that’s it! You’ve successfully added a color picker field to your form! Would you like to use CSS to style your Section Dividers? Take a look at this article on How to Customize WPForms Section Divider Using CSS.