Cómo agregar un selector de color a tu formulario

Introducción

¿Te gustaría añadir un campo selector de color a tu formulario? Usando un fragmento, CSS personalizado y nombres de clases CSS, puedes conseguirlo y te guiaremos en cada paso del proceso.

Creación del formulario

Primero, necesitarás crear tu formulario y añadir los campos que necesites. Para cada campo que quieras que sea un selector de color, añade un campo de Texto de una sola línea. En nuestro ejemplo, hemos añadido dos de estos campos.

Para cualquier ayuda en la creación de tu formulario, por favor revisa esta documentación.

Crear un campo selector de color

Una vez que los campos de Texto de una sola línea se añaden a tu formulario, necesitamos indicar a estos campos que serán campos selectores de color.

Para conseguir esto, haz clic en uno de los campos de Texto de una sola línea que has añadido y, en la pestaña Avanzado, añade wpforms-color-picker al campo Clases CSS.

Añadir el fragmento

Ahora es el momento de añadir el fragmento a tu sitio. Si necesitas ayuda sobre cómo y dónde añadir fragmentos a tu sitio, por favor, 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 wpforms-color-picker y convertirá este campo en una selección de selector de color.

Al hacer clic los usuarios en el bloque de color y arrastrar hacia arriba para seleccionar el color, notarás que el valor hexadecimal aparecerá dentro del campo, además de mostrar el color en sí.

¡Y eso es todo! Has añadido con éxito un campo selector de color a tu formulario. ¿Te gustaría usar CSS para estilizar tus Divisores de Sección? Echa un vistazo a este artículo sobre Cómo personalizar el divisor de sección de WPForms usando CSS.