ms File Upload Button Style anpassen

Elementor Forms File Upload Button Style anpassen

hendrik poddig
Hendrik Poddig
info@p1commerce.de

Wenn ihr wie wir häufig mit Elementor arbeitet, habt ihr mit Sicherheit schon einmal das Elementor Forms Widget verwendet. 

Dieses ist grundlegend sehr hilfreich, hat aber auch ein paar kleine Schwächen, z.B. die Anpassung an das deutsche Datums- und Zeitformat. Doch auch das Dateiuploadfeld ist in seinem Standardformat noch ausbaufähig, da es für weniger erfahrene CSS- oder JavaScript-Nutzer auf den ersten Blick aussieht, als könnte es kaum angepasst werden.

Individuelle Anpassung des Elementor Uploadfelds

Wir zeigen euch heute, wie ihr dieses normale Uploadfeld ausblenden, bzw. anpassen und einen Uploadbutton erstellt, dessen Design ihr vollständig an eure Bedürfnisse anpassen könnt.

Darüber hinaus könnt ihr mit unserem Code eine Funktion einsetzen, die dem Nutzer nach dem Upload eine Erfolgsnachricht anzeigt, den Upload bestätigt, oder die Anzahl der hochgeladenen Dateien anzeigt.

Wir empfehlen für die Umsetzung das Plugin Code Snippets, damit ihr unseren Code ganz einfach einsetzen könnt.

Inhaltsverzeichnis

Was machen wir und was sind die Voraussetzungen?

Um den Uploadbutton zu individualisieren, benutzen wir die von Elementor automatisch erstellten Labels, diese kennt ihr sicher schon aus den Standardeinstellungen auf der linken Seite:

Elementor Forms Label Uploadbutton

Wenn wir Formulare mit Elementor erstellen, blenden wir die Labels standardmäßig immer aus, so sind wir auch hier vorgegangen. Solltet ihr die Formulare in eurem Formular also aktuell verwenden, könnte es sein, dass unsere Lösung bei euch nicht optimal funktioniert.

Stellt auf jeden Fall sicher, dass ihr einen Inhalt in die Labels einfügt, da das Label ansonsten nicht erstellt wird und der JavaScript Code nicht funktioniert. Der Inhalt selber ist dabei egal, da wir diesen an einer späteren Stelle sowieso noch einmal ändern.

Im nächsten Schritt müssen wir die Labels nun ausblenden, dadurch werden diese jedoch nicht wirklich entfernt, sondern lediglich ausgeblendet.

Für diesen Schritt binden nun das erste Stück CSS Code ein:

CSS Code

				
					<style>
.elementor-form input[type="file"]{
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: -1px;
    left: 0;
    width: 0.1px;
    height: 0.1px;
}
.elementor-field-type-upload label{
	text-align:center;
    padding: 10px!important;
    color:white!important;
    border-radius: 0px;
    cursor: pointer;
    font-size: 16px;
	transition:0.3s;
	position: initial;
	top: initial;
	width: initial;
	height: initial;
	margin: initial;
	overflow: hidden;
	clip: initial;
}
.elementor-field-type-upload label:hover{
	color:black!important;
	transition:0.3s;
}
	@media screen and (max-width: 768px) {
		.elementor-field-type-upload label{
	width:100%
}
	}
</style>

				
			

Den Code habe ich für diese Lösung in der Datei selber eingebunden, ihr könnt diesen jedoch auch an jeder anderen Stelle eurer Website einbinden (z.B. im Customizer).

Mit dem ersten Teil des Codes blenden wir den normalen Uploadbutton aus, der durch das Inputfeld dargestellt wird.

Der zweite Teil macht dann das Label wieder sichtbar. Da dieses standardmäßig durch das for-Attribut: 

				
					<label for="id des Input-Felds"></label>
				
			

… im inneren HTML-Code mit der onClick-Funktion des Inputfelds verbunden ist, können wir auch durch einen Klick auf das Label eine Datei hochladen.

Die Textfarbe könnt ihr natürlich einstellen wie ihr möchtet, zu der Hintergrundfarbe kommen wir gleich noch.

Der restliche CSS Code dient nur dem Hover Effekt und der Anpassung auf Mobilgeräten.

Interaktion hinzufügen

Jetzt haben wir schon einen Button, der optisch gut aussieht, es fehlt nur noch eine Interaktion nach einem erfolgreichen Upload.

Wie ihr sehen könnt, wird uns hier zwar schon angezeigt, dass eine Datei hochgeladen wurde, uns wird allerdings nur der Dateiname angezeigt. 

Das ist zwar besser als gar keine Reaktion zu sehen, kann allerdings auch zu ein paar kleinen Problemen führen. Wenn ihr beispielsweise eine Datei mit einem sehr langen Namen hochladen wollt, kann dieser aus dem ganzen Fenster hinausragen und andere Objekte verdecken.

Für dieses Beispiel habe ich sowohl eine Funktion für den Upload einer einzelnen, als auch für den mehrerer Dateien erstellt. Damit wird uns dann auch angezeigt, wie viele Dateien wir hochgeladen haben.

Das machen wir mit folgenden JavaScript Code:

JavaScript

				
					<script>window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.elementor-form input[type="file"]').forEach(el => {
        var label	 = el.previousElementSibling;
	    label.innerHTML = 'Foto hochladen';
		label.style = 'background-color:#FE120CA6;';
    });



jQuery(function($) {
	$('body').on('change', '.elementor-form input[type="file"]', function() {
  		var label = this.previousElementSibling;
		label.style = 'background: #FE120C;';
	   	var numFiles = this.files.length;
		if (numFiles > 1)	{
			label.innerHTML = '<i aria-hidden="true" class="fas fa-check-circle"></i> '+numFiles+' Dateien ausgewählt';
		}
			else{
			label.innerHTML = '<i aria-hidden="true" class="fas fa-check-circle"></i> '+numFiles+' Datei ausgewählt';
			}
});
});

	
});</script>
				
			

Mit dem ersten Teil des Skripts steuern wir alle Uploadfelder an, greifen auf die Labels jedes Feldes zu und ändern sowohl den Inhalt, als auch die Hintergrundfarbe des Labels (das ja jetzt schon unser neuer Button ist).

Hier könnt ihr jetzt die Hintergrundfarbe auswählen, die angezeigt werden soll, wenn keine Datei hochgeladen ist.

Der zweite Teil des Scripts sorgt dafür, dass die Hintergrundfarbe angepasst wird, sobald der Input sich ändert. Außerdem definieren wir hier die Anzahl der hochgeladenen Objekte als Variablen und fügen sie in den Inhalt des Labels ein.

Da die Formulierung bei einer einzelnen Datei natürlich anders ist als beim Upload mehrerer Dateien, habe ich hier noch eine if-Bedingung zwischen gesetzt.

Auch hier könnt ihr die Texte und Farben nach euren Wünschen anpassen.

Das Ergebnis

Vollständiger Code

Hier findet ihr noch einmal den vollständigen Code zum raus kopieren, so könnt ihr ihn einfach über Code Snippets einbinden.

				
					add_action( 'wp_footer', function() {
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
?>
<script>window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.elementor-form input[type="file"]').forEach(el => {
        var label	 = el.previousElementSibling;
	    label.innerHTML = 'Foto hochladen';
		label.style = 'background-color:#FE120CA6;';
    });



jQuery(function($) {
	$('body').on('change', '.elementor-form input[type="file"]', function() {
  		var label = this.previousElementSibling;
		label.style = 'background: #FE120C;';
	   	var numFiles = this.files.length;
		if (numFiles > 1)	{
			label.innerHTML = '<i aria-hidden="true" class="fas fa-check-circle"></i> '+numFiles+' Dateien ausgewählt';
		}
			else{
			label.innerHTML = '<i aria-hidden="true" class="fas fa-check-circle"></i> '+numFiles+' Datei ausgewählt';
			}
});
});

	
});</script>
<style>
.elementor-form input[type="file"]{
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: -1px;
    left: 0;
    width: 0.1px;
    height: 0.1px;
}
.elementor-field-type-upload label{
	text-align:center;
    padding: 10px!important;
    color:white!important;
    border-radius: 0px;
    cursor: pointer;
    font-size: 16px;
	transition:0.3s;
	position: initial;
	top: initial;
	width: initial;
	height: initial;
	margin: initial;
	overflow: hidden;
	clip: initial;
}
.elementor-field-type-upload label:hover{
	color:black!important;
	transition:0.3s;
}
	@media screen and (max-width: 768px) {
		.elementor-field-type-upload label{
	width:100%
}
	}
</style>
<?php
} , 22
);
				
			

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert