Cómo añadir un selector de color a su formulario

Introducción

¿Te gustaría añadir un campo selector de color a tu formulario? Utilizando un fragmento y nombres de clase CSS y CSS personalizados, puedes conseguirlo, ¡y te guiaremos paso a paso!

Creación del formulario

En primer lugar, tendrá que crear su formulario y añadir los campos que va a necesitar. Para cada campo que desee que sea un selector de color, añada un campo de texto de una sola línea. En nuestro ejemplo, hemos añadido dos de estos campos.

Si necesita ayuda para crear su formulario, consulte esta documentación.

Creación de un campo selector de color

Una vez añadidos los campos de texto unifilar a su formulario, necesitamos indicar a estos campos que serán campos de selección de color.

Para ello, haga clic en uno de los Texto de una línea que ha añadido y en el Avanzado añada wpforms-color-picker a la Clases de CSS campo.

Añadir el fragmento

Ahora es el momento de añadir el snippet a tu sitio. Si necesitas ayuda sobre cómo y dónde añadir snippets a tu sitio, consulta 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 );

Una vez añadido el fragmento, buscará cualquier campo con la clase CSS de wpforms-color-picker y convertirá este campo en una selección de selector de color.

Cuando los usuarios hagan clic en el bloque de color y arrastren hacia arriba para seleccionar el color, observarán que el valor hexadecimal aparecerá dentro del campo, además de mostrarse el propio color.

Y ¡listo! ¡Ha añadido con éxito un campo selector de color a su formulario! ¿Le gustaría usar CSS para dar estilo a sus Divisores de Sección? Eche un vistazo a este artículo sobre Cómo personalizar el divisor de sección de WPForms usando CSS.