Hallo,
ich benötige eine Optische Farbauswahl, damit der Anwender die gewünschte Farbe anwählen kann und der Code im Formalar übertragen wird. Dazu habe ich deine KI bemüht. Lässt sich das nachfolgende so umsetzen? Danke.Um eine moderne, optische Farbauswahl (inklusive Hex- und RGBA-Werten) in ein
Visforms-Formular zu integrieren, eignet sich die schlanke und leistungsstarke JavaScript-Bibliothek
Pickr hervorragend. Sie ist voll responsive, unterstützt Transparenzen (RGBA) und lässt sich nahtlos an ein standardmäßiges Visforms-Textfeld koppeln.Hier ist das fertige Skript inklusive einer kurzen Anleitung zur Integration.1. Das JavaScript-SkriptDieses Skript lädt die benötigte Bibliothek (CSS und JS) dynamisch nach, erstellt den interaktiven Colorpicker direkt neben deinem Visforms-Feld und schreibt den gewählten Wert (HEX oder RGBA) automatisch in das Eingabefeld zurück, damit er beim Absenden des Formulars übertragen wird.
JavaScript Code:
document.addEventListener('DOMContentLoaded', function () {
// 1. EINSTELLUNG: Ersetze 'field-farbcode' mit der tatsächlichen ID deines Visforms-Textfelds
const targetFieldId = 'field-farbcode';
const inputField = document.getElementById(targetFieldId);
if (!inputField) {
console.warn(`Colorpicker: Feld mit der ID "${targetFieldId}" wurde nicht gefunden.`);
return;
}
// CSS für Pickr dynamisch laden (Classic Theme)
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '
cdn.jsdelivr.net/npm/@simonwep/pickr/dis...emes/classic.min.css
';
document.head.appendChild(link);
// JS für Pickr dynamisch laden
const script = document.createElement('script');
script.src = '
cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js
';
script.onload = initializeColorPicker;
document.head.appendChild(script);
function initializeColorPicker() {
// Erstelle ein Container-Element für den Colorpicker-Button direkt nach dem Input-Feld
const pickerButton = document.createElement('div');
pickerButton.className = 'visforms-colorpicker-btn';
inputField.parentNode.insertBefore(pickerButton, inputField.nextSibling);
// Pickr Instanz initialisieren
const pickr = Pickr.create({
el: pickerButton,
theme: 'classic', // Alternativen: 'monolith', 'nano'
default: inputField.value || '#30638e',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(63, 81, 181, 1)',
'rgba(33, 150, 243, 1)',
'rgba(3, 169, 244, 1)'
],
components: {
// Hauptkomponenten
preview: true,
opacity: true, // Aktiviert den Alpha-Kanal für RGBA
hue: true,
// Interaktionsoptionen
interaction: {
hex: true,
rgba: true,
input: true, // Erlaubt direkte Texteingabe im Picker
clear: false,
save: true // "Speichern"-Button schließt den Picker und übernimmt den Wert
}
},
// Übersetzungen für Buttons
i18n: {
'btn:save': 'Übernehmen',
'aria:btn:save': 'Farbe speichern'
}
});
// Event: Wenn der Nutzer eine Farbe speichert
pickr.on('save', (color, instance) => {
if (color) {
// Prüfen, ob Transparenz (Alpha < 1) genutzt wird -> dann RGBA, sonst HEX
const alpha = color.toRGBA()[3];
const colorString = alpha < 1
? color.toRGBA().toString(2) // Gibt z.B. "rgba(10, 20, 30, 0.5)" zurück
: color.toHEXA().toString(); // Gibt z.B. "#FF0000" zurück
inputField.value = colorString;
// Event triggern, damit Visforms/Joomla die Änderung am Feld registriert
inputField.dispatchEvent(new Event('change', { bubbles: true }));
}
pickr.hide();
});
}
}); 2. So bindest du den Code in Visforms ein
- Visforms-Feld vorbereiten:
- Erstelle in deinem Visforms-Formular ein einfaches Feld vom Typ Text.
- Gib dem Feld einen eindeutigen Namen oder eine ID (z. B.
).
- Überprüfe im Browser-Quellcode (Rechtsklick -> Untersuchen auf dem Feld) die generierte ID des
-Elements (meistens aufgebaut wie
oder
). Trage diese ID im Skript oben bei
ein.
- JavaScript einfügen:
- Möglichkeit A (Direkt in Visforms): Gehe in die Formularkonfiguration deines Visforms-Formulars. Viele Versionen bieten unter dem Reiter CSS/JS ein Feld für Benutzerdefiniertes Javascript. Füge den Code dort ein.
- Möglichkeit B (Über das Template): Da du mit Helix Ultimate arbeitest, kannst du den Code auch global oder seitenspezifisch in die Template-Optionen einbinden (unter Custom Code -> Custom JS).
3. Optionales CSS für ein sauberes LayoutDamit der Colorpicker-Button optisch schön neben oder im Eingabefeld platziert ist, kannst du folgendes CSS in dein Stylesheet (z. B.
) einfügen:
CSS:
/* Positioniert den Button sauber neben dem Textfeld */
.visforms-colorpicker-btn + .pickr {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
/* Passt den Auslöse-Button von Pickr an */
.pickr .pcr-button {
border: 1px solid #ccc;
border-radius: 4px;
width: 2.5em;
height: 2.5em;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
Danke, Erwin
I recommend you the new and up-to-date documentation for Joomla 6:
.