So ändern Sie die Hintergrundfarbe eines E-Mail-Felds

Das Design Ihres Formulars spielt eine wichtige Rolle für das professionelle und vertrauenswürdige Erscheinungsbild Ihres Shops.

Eine einfache Änderung, wie beispielsweise die Aktualisierung der Hintergrundfarbe eines E-Mail-Felds, kann helfen:

• Passen Sie Ihre Markenidentität an
• Verbessern Sie die Lesbarkeit
• Eine bessere visuelle Hierarchie schaffen
• Gestalten Sie Ihre Kontaktformulare moderner und professioneller.

Bevor du anfängst

Stellen Sie sicher, dass Sie Folgendes bereits haben:

• Eine in GemPages erstellte Seite
• An E-Mail-Feldelement Ihrem Formular hinzugefügt
• Zugriff auf den GemPages-Editor

Es sind keine fortgeschrittenen Programmierkenntnisse erforderlich.

Schritt 1: E-Mail-Feldelement auswählen

Öffnen Sie Ihre Seite im GemPages-Editor. Klicken Sie auf das E-Mail-Feld, das Sie anpassen möchten. Dadurch wird sichergestellt, dass die benutzerdefinierte Formatierung nur auf das ausgewählte Feld angewendet wird.

Schritt 2: Öffnen Sie das Bedienfeld für benutzerdefinierten Code.

Klicken Sie mit der rechten Maustaste auf das ausgewählte E-Mail-Feld. Wählen Sie dann Folgendes: Benutzerdefinierter Code. Das Bedienfeld „Benutzerdefinierter Code“ wird angezeigt.

Schritt 3: CSS-Code hinzufügen

Fügen Sie folgenden Code in den Editor für benutzerdefinierten Code ein:

ElementClass input {

  Hintergrundfarbe: xxxxx !important;

}

Wichtige Hinweise

1. Sie müssen ElementClass ersetzen. mit dem tatsächlichen Klassennamen Ihres E-Mail-Feld-Elements.

Sie finden diesen Klassennamen in der oberen linken Ecke des Bedienfelds „Benutzerdefinierter Code“.

Ejemplo:

.gf-input-123 input {

  Hintergrundfarbe: #f5f5f5 !important;

}

2. Ersetzen Sie xxxxx durch die Farbe, die Sie verwenden möchten.

Ejemplo:

Hintergrundfarbe: #000000 !important;

or

Hintergrundfarbe: #f5f5f5 !important;

So finden Sie einen Farbcode:

Falls Sie noch keinen Farbcode haben, Sie können kostenlose Tools wie die folgenden verwenden:

• Google Farbwähler
• HTML Color Picker
• Kühler
• Adobe Farbe

Mit diesen Werkzeugen können Sie Farben visuell auswählen und HEX-Codes sofort kopieren.

Beispielhafte HEX-Codes:

• # Ffffff → Weiß
• #000000 → Schwarz
• #f3f3f3 → Hellgrau
• #1a73e8 → Blau

Ergebnis: