In diesem Artikel erfahren Sie, wie Sie Ihre ActiveCampaign Formulare anpassen können. Sie erfahren, wie Sie Farben, Schriftarten und Layouts ändern, damit sie zu Ihrem Branding passen. Es umfasst außerdem erweiterte Optionen wie benutzerdefiniertes CSS und das Entfernen des ActiveCampaign Brandings.
Beachten Sie
Die Verwendung von HTML und CSS mit Ihrem Formular wird nur fortgeschrittenen Benutzern empfohlen; Sie sollten mit diesen Sprachen vertraut sein. Wenn Sie mit HTML oder CSS nicht vertraut sind, empfehlen wir Ihnen, mit einem Teammitglied zusammenzuarbeiten, das diese Sprachen beherrscht, oder mit einem unserer zertifizierten Berater[/a] zu arbeiten.
Unser Support-Team kann Ihnen nicht dabei helfen, HTML- oder CSS-Code zu erstellen oder zu beheben, den Sie zu Ihrem Formular hinzufügen.
Video ansehen
Sehen Sie sich dieses Video an, um zu erfahren, wie Sie Ihr Formular erstellen und anpassen.
Zugriff auf Formularanpassungsoptionen
Die Anpassungsoptionen eines Formulars finden Sie im Formular-Builder unter der Registerkarte „Stil“.
So greifen Sie für jedes Formular auf diese Registerkarte zu:
- Klicken Sie im linken Menü auf Website > Formulare.
- Klicken Sie auf die Schaltfläche „Formular bearbeiten“ oder erstellen Sie ein neues Formular.
- Der Formular-Builder wird geladen. Alle Bearbeitungs- und Formatierungsoptionen werden im rechten Bereich angezeigt. Klicken Sie auf die Registerkarte „Style“ im rechten Bereich.
Layout auswählen
Sie können ein Layout für Inline-, Modal- und schwebende Kastenformulare auswählen. Layoutoptionen sind für schwebende Leisten-Formulare nicht verfügbar.
Layoutoptionen für Inline-Formulare
Für Ihr Inline-Formular stehen Ihnen zwei Optionen zur Auswahl: ein horizontales oder ein vertikales Layout für Ihr Formular:
Layoutoptionen für modale Formulare und schwebende Kästen
Für Ihr modales oder schwebendes Kasten-Formular stehen Ihnen vier Optionen zur Auswahl: kein Bild, Bild links, Bild oben oder Bild in der Mitte:
Ein Formular anpassen
Mit den Stiloptionen unter „Layout“ können Sie anpassen, wie das Formular für Ihre Website‑Besucher angezeigt wird. Unten finden Sie Tabellen mit allen Anpassungsoptionen:
Allgemeines
| Allgemeine Anpassungsoptionen | Beschreibung |
|---|---|
| Maximale Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert festgelegt. |
| Polsterung | Polsterung ist der Raum um Ihr Formular herum. Mit dieser Option können Sie die Polsterung vergrößern oder verkleinern. Diese wird als Pixelwert festgelegt. |
| Formularhintergrund | Klicken Sie auf die Farbauswahl, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Seitenhintergrund | Klicken Sie auf die Farbauswahl, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Randfarbe | Klicken Sie auf den Farbwähler, um die Farbe der Formularrahmen zu ändern. |
| Rahmenlinie |
Verwenden Sie diese Option, um Ihrer Schaltfläche einen Rahmen hinzuzufügen. Die Rahmen werden als Pixelwert festgelegt. Sie können den Rahmen vergrößern oder verkleinern, die Rahmenfarbe ändern und aus vier verschiedenen Rahmenarten auswählen: durchgehend, gepunktet, gestrichelt und doppelt. Klicken Sie auf „Benutzerdefiniert“, um für jeden Rahmen im Formular eine andere Breite und einen anderen Stil auszuwählen. |
| Randecken | Verwenden Sie diese Option, um die Ecken Ihres Formulars abzurunden oder eckig zu machen. Der Eckradius wird als Pixelwert festgelegt. |
Eingaben
„Eingaben“ beziehen sich auf die Felder, die Website-Besucher verwenden, um Ihnen ihre persönlichen Daten zu übermitteln. Zu den Eingabeanpassungsoptionen gehören:
| Eingabeanpassungsoptionen | Beschreibung |
|---|---|
| Feldhintergrund | Klicken Sie auf die Farbauswahl, um die Farbe der Eingabefelder zu ändern. |
| Feldrand | Klicken Sie auf den Farbwähler, um die Farbe der Feldrahmen zu ändern. |
| Ecken | Verwenden Sie diese Option, um die Ecken Ihrer Eingabefelder abgerundet oder quadratisch zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
Felder
Im Feld „Felder“ können Sie das Erscheinungsbild der Felder Ihres Formulars anpassen. Zu den Optionen für die Anpassung von Feldern gehören:
| Optionen zur Feldanpassung | Beschreibung |
|---|---|
| Schriftfarbe der Kopfzeile | Klicken Sie auf das Farbauswahlwerkzeug, um die Farbe der Kopfzeilenschrift zu ändern. |
| Textstil der Kopfzeile | Wählen Sie eine Schriftart und -größe für die Kopfzeile aus, und legen Sie fest, ob der Text fett, kursiv oder unterstrichen sein soll. |
| Absatzfarbe | Klicken Sie auf die Farbauswahl, um die Farbe der Fließtextschrift zu ändern. |
| Absatz-Textstil | Wählen Sie einen Absatzschriftstil und eine Schriftgröße aus, und legen Sie fest, ob der Text fett, kursiv oder unterstrichen sein soll. |
Schaltfläche
Über das Feld „Schaltfläche“ können Sie das Aussehen der Senden-Schaltfläche Ihres Formulars anpassen. Zu den Optionen zur Schaltflächenanpassung gehören:
| Optionen zur Anpassung der Schaltflächen | Beschreibung |
|---|---|
| Layout-Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche „Senden“. |
| Layout-Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Layout-Padding | Verwenden Sie diese Option, um die Polsterung Ihrer Schaltfläche anzupassen. Die Polsterung wird als Pixelwert festgelegt. |
| Layoutbreite | Ändern Sie die Breite der Schaltfläche „Senden“. |
| Randfarbe | Klicken Sie auf die Farbauswahl, um die Farbe des Schaltflächenrahmens zu ändern. |
| Rahmenkontur |
Verwenden Sie diese Option, um Ihrer Schaltfläche einen Rahmen hinzuzufügen. Die Rahmen werden als Pixelwert festgelegt. Sie können den Rahmen vergrößern oder verkleinern, die Rahmenfarbe ändern und aus vier verschiedenen Rahmenarten auswählen: durchgehend, gepunktet, gestrichelt und doppelt. Klicken Sie auf „Benutzerdefiniert“, um für jeden Rand im Formular eine andere Breite und einen anderen Stil auszuwählen. |
| Rahmen-Ecke | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abzurunden oder eckig zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
Ändern Sie den Text der Schaltfläche „Senden“
Sie können den Text der Schaltfläche „Senden“ für jedes Formular ändern.
- Klicken Sie auf der Seite „Formulare“ auf die Schaltfläche „Design bearbeiten“ für das Formular, das Sie aktualisieren möchten.
- Klicken Sie im Formular-Builder auf die Schaltfläche „Senden“.
- Das rechte Menü zeigt das Button-Label und ein Feld an. Geben Sie den Text ein, den Sie für die Schaltfläche verwenden möchten.
Der neue Schaltflächentext wird automatisch gespeichert.
Erweiterte Stil-Anpassung
Für jeden Formulartyp in ActiveCampaign ist eine benutzerdefinierte CSS-Option verfügbar. Dies ist für Erweitert-Benutzer, die mit CSS vertraut sind und es problemlos verwenden können.
Bitte beachten Sie, dass CSS eine erweiterte Implementierung beinhaltet, die für Personen ohne Programmierkenntnisse komplex sein kann. Das Customer Experience Team kann keine CSS-bezogenen Codeprobleme beheben. Wir empfehlen Ihnen daher, sich für Unterstützung bei der Implementierung an eine Entwicklerin oder einen Entwickler zu wenden.
Die Option „Benutzerdefiniertes CSS“ befindet sich unter der Registerkarte „Stil“ für jedes Formular und kann verwendet werden, um jedem Formularelement weitere Änderungen hinzuzufügen. Sie können diese Option beispielsweise für Folgendes verwenden:
- Breite und Höhe von Eingabefeldern anpassen
- Breite und Höhe der Schaltfläche „Senden“ anpassen
- Schriftgröße anpassen
- Schriftart für einzelne Elemente anpassen Sie können dies beispielsweise verwenden, um die Schriftart des Schaltflächentexts vom Rest des Formulars abzuheben.
So verwenden Sie die benutzerdefinierte CSS-Option:
- Oben rechts im Formular-Builder schalten Sie den „Code-Editor“-Schalter ein.
- Am unteren Rand des Formular-Builders wird ein HTML-Editor angezeigt. Geben Sie das CSS in dieses Feld ein.
Das CSS, das Sie dem Formular hinzufügen, wird automatisch gespeichert.
So deaktivieren Sie das ActiveCampaign Branding
Wenn Sie einen Plus-, Professional- oder Enterprise-Tarif haben, können Sie das ActiveCampaign Branding aus Ihrem Formular entfernen. Benutzer des Starter Tarifs können das Branding nicht deaktivieren.
So deaktivieren Sie das ActiveCampaign-Branding:
- Klicken Sie im Formular-Builder auf die Registerkarte „Stil“.
- Scrollen Sie nach unten zum Ende des Abschnitts „Allgemeines“.
- Klicken Sie auf den AC-Branding-Schalter, um ihn auf die Position „Aus“ zu stellen.
Diese Einstellung wird automatisch gespeichert.
Erfahren Sie mehr über ActiveCampaign Branding in Formularen.
Weitere Anpassungsoptionen
Mit den Anpassungsoptionen unter „Optionen“ können Sie festlegen, wann Modale, schwebende Kästen und schwebende Formulare auf Ihrer Website angezeigt werden, wie die Nachricht nach dem Absenden des Formulars erscheint, sowie Formularaktionen und Formulareinstellungen konfigurieren. In diesem Abschnitt wird erläutert, wie Sie die Anpassungsoptionen auf der Registerkarte „Optionen“ verwenden.
Wenn Sie die Größe eines Formulars auf einem Mobilgerät anpassen müssen, können Sie dies mit CSS und Media-Queries tun.
Bitte beachten Sie, dass CSS eine erweiterte Implementierung erfordert, die für Personen ohne Programmierkenntnisse komplex sein kann. Das Customer Experience Team kann keine CSS-bezogenen Codierungsprobleme beheben. Wir empfehlen Ihnen daher, für Unterstützung bei der Implementierung eine Entwicklerin oder einen Entwickler zu kontaktieren.
Weitere Anpassungsmöglichkeiten für Modal-, schwebende Kasten- und schwebende Leisten-Formulare
Diese Formulararten bieten zusätzliche Anpassungsoptionen, die festlegen, wann und wie das Formular für Websitebesucher:innen angezeigt wird. Diese Einstellungen finden Sie im Formular-Builder im rechten Menü unter "Optionen" > "Popup-Effekt".
| Formulartyp | Optionen |
| Modalfenster |
|
| Schwebender Kasten |
|
| Schwebende Leiste |
|
Weitere Ressourcen für die Registerkarte „Optionen“:
- Erfahren Sie mehr über „Beim Absenden“
- Erfahren Sie mehr über „Formularaktion“
- Erfahren Sie mehr über „Formular-Einstellungen“