So fügen Sie einen Farbwähler zu Ihrem Formular hinzu

Einleitung

Möchten Sie Ihrem Formular ein Farbwähler-Feld hinzufügen? Mit einem Snippet und benutzerdefinierten CSS- und CSS-Klassennamen können Sie dies erreichen, und wir führen Sie durch jeden Schritt!

Erstellung des Formulars

Zuerst müssen Sie Ihr Formular erstellen und die benötigten Felder hinzufügen. Fügen Sie für jedes Feld, das ein Farbwähler sein soll, ein Feld vom Typ Einzeiliger Text hinzu. In unserem Beispiel haben wir zwei dieser Felder hinzugefügt.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Erstellen eines Farbwähler-Feldes

Sobald die Felder vom Typ Einzeiliger Text zu Ihrem Formular hinzugefügt wurden, müssen wir diesen Feldern mitteilen, dass sie Farbwähler-Felder sein werden.

Um dies zu erreichen, klicken Sie auf eines der hinzugefügten Felder vom Typ Einzeiliger Text und fügen Sie auf der Registerkarte Erweitert wpforms-color-picker in das Feld CSS-Klassen ein.

Hinzufügen des Snippets

Jetzt ist es an der Zeit, das Snippet zu Ihrer Website hinzuzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, sehen Sie sich dieses Tutorial an.

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

Sobald das Snippet hinzugefügt wurde, sucht es nach Feldern mit der CSS-Klasse wpforms-color-picker und wandelt dieses Feld in eine Farbwähler-Auswahl um.

Wenn Benutzer auf den Farbblock klicken und nach oben ziehen, um die Farbe auszuwählen, sehen Sie, dass der Hex-Wert im Feld angezeigt wird und auch die Farbe selbst dargestellt wird.

Und das ist alles! Sie haben erfolgreich ein Farbwähler-Feld zu Ihrem Formular hinzugefügt! Möchten Sie CSS verwenden, um Ihre Abschnittstrenner zu gestalten? Sehen Sie sich diesen Artikel über Anpassen von WPForms-Abschnittstrennern mit CSS an.