Hol dir Hilfe von Experten
Von Schulungen bis hin zum Full-Service-Marketing: Unsere Partnercommunity kann dir dabei helfen, deine Ideen in die Tat umzusetzen.
Jeder Mailchimp-Zielgruppe ist ein gehostetes Registrierungsformular zugeordnet, das mit unserem Formular-Builder angepasst werden kann. Für Benutzer mit kostenpflichtigen Tarifen, die mehr Kontrolle über das Erscheinungsbild ihres gehosteten Registrierungsformulars haben möchten, bietet Mailchimp einen erweiterten Modus an, der Zugriff auf den Formularcode ermöglicht. CSS-Hooks dienen dazu, innerhalb des Formularcodes Frontend-Elemente in deinem Registrierungsformular mithilfe von Code aus serverseitigen Quellen zu ändern.
In diesem Artikel definieren wir CSS und CSS-Hooks, präsentieren beliebte Entwicklungstools und stellen Referenztabellen mit CSS-Hooks zur Verfügung, die du in einem Mailchimp-Registrierungsformular verwenden kannst.
Bevor du mit diesem Vorgang beginnst, solltest du einige Punkte beachten.
Elemente (HTML)
Elemente in HTML sind alle Komponenten, aus denen eine Webseite besteht. Basierend auf den darin platzierten Eigenschaften und Attributen können sie Daten, Text oder Bilder enthalten oder leer sein.
CSS
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die bestimmt, wie Elemente auf einer Webseite dargestellt werden. Sie kann zum Gestalten von Text, zum Zuweisen von Elementen zu bestimmten Teilen einer Seite, zum Erstellen von Animationen und für vieles mehr verwendet werden. Schau dir diese CSS-Einführung von W3Schools an.
CSS-Selektor
CSS-Selektoren dienen zur Identifizierung der Elemente, die du anpassen möchtest. Es gibt 5 Selektorkategorien, die normalerweise auf dem Namen eines Elements, einer Klasse oder einer ID basieren.
CSS-Hook
Ein CSS-Hook verbindet serverseitige Inhaltsbibliotheken über CSS mit HTML-Elementen auf einer Webseite.
Die meisten modernen Webbrowser verfügen über eine Entwicklerkonsole, die bei der Fehlerbehebung, Protokollierung von Fehlern und beim Testen von Codes helfen kann. Nachdem du CSS-Hooks zu deinem Formular-Code hinzugefügt hast, kannst du deine Änderungen mithilfe einer der folgenden Entwicklererweiterungen in Echtzeit sehen.
Firefox Developer Tools ist eine leistungsstarke Web-Entwicklungserweiterung für Firefox.
DevTools ist eine browserbasierte Entwicklungssuite, die in Microsoft Edge verfügbar ist. F12 Developer Tools ist ein ähnliches Produkt für Internet Explorer-Benutzer, das mit allen Versionen von Internet Explorer funktioniert.
Chrome DevTools zählt zu den Entwicklertools von Google Chrome.
Die folgenden Tabellen enthalten CSS-Hooks, mit deren Hilfe du deine Registrierungsformulare anpassen kannst.
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| #mc_embed_signup | DIV-Element | Dieses DIV-Element umgibt das Formular. Wenn du diese Auswahloption vor den anderen folgenden Auswahloptionen wählst, stellst du sicher, dass die gewünschten Stile angewendet werden. (z. B. #mc_embed_signup .mc-field-group) |
| #mc-embedded-subscribe-form | FORMULAR-Element | Mit dieser Auswahlfunktion legst die Stile für das Haupt-Formularelement fest. Sie eignet sich hervorragend, um Füllraum zu Formularelementen hinzuzufügen. |
| div.mc-field-group | Feldgruppe | Außenrand für die einzelnen Labels und Eingabekombination für Formulare mit mehr als einem Feld. Diese Option dient der Einstellung des horizontalen und vertikalen Abstands (Füllraum) zwischen den Eingabeelementen. Einige .mc-Feldgruppenelemente gehören außerdem zur Klasse .size1of2, sodass ihre Größe um die Hälfte reduziert wird. So können pro Zeile zwei Feldgruppenelemente hinzugefügt werden. |
| div.mc-field-group label | Labels | Standardmäßige Label-Auswahl. Mithilfe dieser Option kannst du den Stil der meisten Formular-Labels anpassen. |
| div.mc-field-group input | Eingabe(n) | Standardmäßige Eingaben-Auswahl. Mithilfe dieser Option kannst du den Stil der meisten Eingaben anpassen. |
| div.mc-field-group select | Dropdown-Menüs | Standardmäßige Dropdown-Auswahl. Mithilfe dieser Option kannst du den Stil sämtlicher Dropdown-Menüs anpassen. |
| input.button | Button „Submit" (Einreichen) | Mithilfe dieser Auswahl kannst du den Stil des Buttons zum Einreichen anpassen. |
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| div.mc-field-group.input-group | DIV-Element | Der Haupt-DIV-Container für Kontrollkästchen/Optionsfelder. |
| div.mc-field-group.input-group strong | Fettgedrucktes Label | Dient zum Formatieren des äußeren Feld-Labels für Kontrollkästchen/Optionsfelder. |
| div.mc-field-group.input-group ul | UL-Element | Ungeordneter Listencontainer für Kontrollkästchen/Optionsfelder. |
| div.mc-field-group.input-group ul li | LI-Element | Listen-Element, das das Label und die Eingabe enthält (Kontrollkästchen/Optionsfelder) |
| div.mc-field-group.input-group label | Labels für Kontrollkästchen-/Optionsfelder | Standardmäßige Label-Auswahl für Kontrollkästchen- bzw. Optionsfelder-Gruppen. Hinweis: In Kontrollkästchen- bzw. Optionsfelder-Gruppen wird das Label nach der Eingabe hinzugefügt. |
| div.mc-field-group.input-group input | Eingabe für Kontrollkästchen/Optionsfelder | Standardmäßige Eingaben-Auswahl für Kontrollkästchen- bzw. Optionsfelder-Gruppen. |
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| .indicates-required | DIV-Element | Container für den Hinweis „*indicates required" (Mit Sternchen gekennzeichnete Felder sind Pflichtfelder) am Beginn von Formularen. |
| .mc-field-group .asterisk | SPAN-Element | Container für „*" (Sternchen) im Rahmen erforderlicher Labels. |
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| #mce-responses | DIV-Element | Container für Fehlermeldungen. |
| div.response | DIV-Element | Standardmäßiger Container für Antwortnachrichten. Damit keine leeren mit Stilelementen versehenen Felder angezeigt werden, muss hierfür standardmäßig die Einstellung „display:none;" festgelegt werden. Das JavaScript fügt das Element „display.block" im Inline-Stil hinzu, damit die Nachrichten bei Bedarf angezeigt werden. |
| div.mce_inline_error | DIV-Element | DIV-Element mit einer Fehlermeldung unter den Eingaben, die ein Problem aufweisen. |
| input.mce_inline_error | Eingabe(n) | Die Klasse .mce_inline_error wird ebenfalls zu Eingaben hinzugefügt, um einen roten Rand einzufügen. |
| #mce-error-response | Fehlermeldung | Container für nicht-eingabespezifische Fehlermeldung. |
| #mce-success-response | Erfolgsmeldung | Container für Erfolgsmeldung. |
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| .datefield | DIV-Element | Container für Datumsfelder. |
| .datefield input | Eingabe(n) | Standardmäßige Datumseingaben. |
| .datefield .monthfield input | Texteingabe | Texteingabe für Monatsinformationen |
| .datefield .dayfield input | Texteingabe | Texteingabe für Tagesinformationen |
| .datefield .yearfield input | Texteingabe | Texteingabe für Jahresinformationen |
| .datefield .small-meta | SPAN-Element | Hilfstext für Datumsformat (TT.MM.JJJJ) |
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| .mc-address-group | DIV-Element | Adressgruppe, die das Element enthält. Die einzelnen Adressformular-Elemente haben den gleichen Stil wie die oben aufgeführten allgemeinen Formular-Elemente. |
| CSS-Selektor | Name/Typ | Beschreibung |
|---|---|---|
| .phonefield-us | DIV-Element | Container-Element für Telefonfeld-Eingaben. |
| .phonefield-us .phonearea input | Texteingabe | Eingabe der Telefonvorwahl. |
| .phonefield-us .phonedetail1 input | Texteingabe | Eingabe für die ersten 3 Ziffern von US-Telefonnummern. |
| .phonefield-us .phonedetail2 input | Texteingabe | Eingabe für die letzten 4 Ziffern von US-Telefonnummern. |
| .phonefield-us .small-meta | SPAN-Element | Hilfstext für das Telefoneingabeformat (###) ###-#### |
Technischer Support
Hast du eine Frage?
Zahlende Nutzer können sich anmelden, um E-Mail- oder Chat-Support zu erhalten.
Benutzer mit bezahltem Account können einen erweiterten Modus zur Bearbeitung von auf Mailchimp gehosteten Registrierungsformularen verwenden. Erfahre mehr darüber, wie du zu diesem erweiterten Modus wechselst und was du bearbeiten kannst.
Dein Mailchimp-Formular kann so konfiguriert werden, dass Informationen darüber erfasst werden, über welche Webseite sich Abonnenten registrieren. Erfahre Näheres über den erforderlichen HTML-Code und weitere notwendige Schritte zum Einrichten dieser Funktion.