Dieser Artikel zeigt Ihnen, wie Sie Ihre ActiveCampaign-Formulare anpassen können. Sie lernen, wie Sie Farben, Schriftarten und Layouts an Ihre Marke anpassen können. Außerdem werden erweiterte Optionen wie benutzerdefinierte CSS und das Entfernen des ActiveCampaign-Brandings behandelt.
Hinweis
Die Verwendung von HTML und CSS für Ihr Formular wird für fortgeschrittene Benutzer empfohlen; Sie sollten mit diesen Sprachen vertraut sein. Wenn Sie mit HTML oder CSS nicht vertraut sind, empfehlen wir die Zusammenarbeit mit einem Teammitglied, das mit diesen Sprachen vertraut ist, oder Sie können mit einem unserer Certified Consultants arbeiten.
Unser Support-Team ist nicht in der Lage, Ihnen bei der Erstellung oder Fehlerbehebung von HTML oder CSS zu helfen, die Sie zu Ihrem Formular hinzufügen.
Video ansehen
Sehen Sie sich dieses Video an, um zu erfahren, wie Sie Ihr Formular erstellen und anpassen können.
Zugriff auf Formularanpassungsoptionen
Die Anpassungsmöglichkeiten eines Formulars befinden sich unter der Registerkarte "Stil" im Formular-Builder.
So rufen Sie dieses Tab für ein beliebiges Formular auf:
- Klicken Sie im linken Menü auf "Website" > "Formulare".
- Bearbeiten oder erstellen ein neues Formular.
- Der Formular-Builder wird geladen. Alle Bearbeitungs- und Stiloptionen werden im rechten Fensterbereich angezeigt. Klicken Sie auf das Tab "Stil" im rechten Fensterbereich.
Anpassen eines Inline-Formulars
Mit dem Inline-Formular können Sie ein Layout auswählen und die Gestaltung für das Formular und die Schaltfläche „Senden“ anpassen.
Allgemein
Über das Drop-down-Menü „Allgemeines“ können Sie anpassen, wie das Formular den Besuchern Ihrer Website angezeigt wird. Nachfolgend finden Sie eine Tabelle mit allen Optionen für die Formulargestaltung.
| Allgemeine Anpassungsoptionen | Beschreibung |
|---|---|
| Layout | Klicken Sie auf eine der beiden Optionen, um ein horizontales oder vertikales Layout für Ihr Formular zu wählen. |
| Maximale Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert festgelegt. |
| Hintergrundfarbe des Formulars |
Ändern Sie die Hintergrundfarbe Ihres Formulars oder machen Sie es transparent. Sie können Farben aus Ihrem Brand Kit (falls verwendet), Standardfarben oder eigene Farben auswählen. Dieser Formulartyp unterstützt keine Hintergrundbilder. |
| Hintergrund |
Dies bezieht sich auf die Seite, auf der das Formular erscheint, wenn Sie die Verknüpfungsoption "Link" verwenden. Damit können Sie die Hintergrundfarbe der Formularseite anpassen. Sie können Farben aus Ihrem Brand Kit (falls verwendet), Standardfarben oder eigene Farben auswählen. Seitenhintergründe werden beim Einbetten eines Formulars nicht angezeigt. |
| Rahmen | Verwenden Sie diese Option, um einen Rahmen zu Ihrem Formular hinzuzufügen. Die Rahmen werden als Pixelwert festgelegt. Sie können den Rahmen vergrößern oder verkleinern, die Rahmenfarbe ändern und aus vier Rahmenarten auswählen: durchgehend, gepunktet, gestrichelt und doppelt. |
| Padding | Die Auffüllung bezieht sich auf den Raum, der Ihr Formular umgibt. Mit dieser Option können Sie das Padding vergrößern oder verkleinern. Diese wird als Pixelwert festgelegt. |
| Ecken | Verwenden Sie diese Option, um die Ecken Ihres Formulars abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| ActiveCampaign Branding anzeigen |
Mit dieser Option können Sie das ActiveCampaign-Branding ein- oder ausschalten. Diese Option ist beim Starter-Tarif nicht verfügbar. |
Text
Im Feld „Text“ können Sie das Aussehen des Textes Ihres Formulars anpassen. Unten finden Sie eine Tabelle mit allen Optionen zur Textanpassung.
| Optionen zur Textanpassung | Beschreibung |
| Schriftart | Damit Ihr Formular zu Ihrer Marke passt, können Sie aus rund 1.500 Schriftarten wählen. Die hier ausgewählte Schriftart wird auf den Kopfzeilenblock, den HTML-Codeblock, die Felder und die Schaltfläche angewendet. |
| Kopfzeile |
Die Kopfzeile erscheint zunächst am oberen Rand Ihres Formulars. Für diesen Block können Sie folgendes einstellen:
*Die Möglichkeit, Text fett darzustellen, hängt von der gewählten Schriftart ab. |
| Absatz (HTML-Code) |
Dieser Block wird zunächst unter der Kopfzeile angezeigt und fungiert als „Absatz“-Text in Ihrem Formular. Für diesen Block können Sie folgendes einstellen:
*Die Möglichkeit, Text fett darzustellen, hängt von der gewählten Schriftart ab. |
Schaltfläche
Über das Feld „Schaltfläche“ können Sie das Aussehen der Senden-Schaltfläche Ihres Formulars anpassen. Nachfolgend finden Sie eine Tabelle mit allen Optionen zur Anpassung der Schaltflächen.
| Optionen zur Tastenanpassung | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche "Abschicken". |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Grenze | 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 Rahmenarten auswählen: durchgehend, gepunktet, gestrichelt und doppelt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Padding | Das Padding ist der Raum um Ihre Schaltfläche herum. Mit dieser Option können Sie das Padding anpassen, indem Sie es vergrößern oder verkleinern. Diese wird als Pixelwert festgelegt. |
Beachten Sie, dass Sie die Höhe oder Breite der Schaltfläche hier nicht anpassen können. Um diese Anpassungen vorzunehmen, müssen Sie benutzerdefiniertes CSS verwenden.
Anpassen eines modalen Popup-Formulars
Mit dem modalen Popup-Formular können Sie ein Layout auswählen und das Styling für das Formular, die Eingabefelder und die Schaltfläche "Senden" anpassen.
Layout
Es gibt vier Optionen, aus denen Sie für Ihr Formular wählen können: kein Bild, Bild auf der linken Seite, Bild oben oder Bild in der Mitte.
Modaler Stil
Im Feld "Modaler Stil" können Sie festlegen, wie das Formular für die Besucher Ihrer Website aussehen soll. Nachfolgend finden Sie eine Tabelle mit allen Anpassungsoptionen für das Modal
| Anpassungsoptionen für den Modalstil | Beschreibung |
|---|---|
| Hintergrund | Klicken Sie auf den Farbwähler, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Hintergrund | Klicken Sie auf den Farbwähler, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Schriftart | Ändern Sie die Schriftart auf dem Formular, damit sie zu Ihrer Marke passt. |
| Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert eingestellt. |
| Padding | Padding ist der Raum um Ihr Formular herum. Mit dieser Option können Sie das Padding erhöhen oder verringern. Dieser wird als Pixelwert eingestellt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihres Formulars abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Schatten | Verwenden Sie dies, um einen Schatten zu Ihrem Formular hinzuzufügen. Dadurch hebt er sich von anderen ab. Sie können zwischen den folgenden Optionen wählen: Keine, Leicht, Mittel und Schwer. |
Eingänge
Eingaben beziehen sich auf die Felder, die Website-Besucher verwenden, um ihre persönlichen Daten an Sie zu übermitteln. Zu den Optionen für die Eingabeanpassung gehören:
| Optionen für die Eingabeanpassung | Beschreibung |
|---|---|
| Hintergrund | Klicken Sie auf den Farbwähler, um die Farbe der Eingabefelder zu ändern. |
| Schriftfarbe | Klicken Sie auf den Farbwähler, um die Farbe des Eingabefeldtextes zu ändern. |
| Eckradius | Verwenden Sie diese Option, um die Ecken von Eingabefeldern abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
Schaltfläche
Im Feld "Schaltfläche" können Sie das Aussehen der Schaltfläche "Senden" Ihres Formulars anpassen. Zu den Optionen für die Tastenanpassung gehören:
| Optionen zur Tastenanpassung | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche "Abschicken". |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Grenze | Verwenden Sie diese Option, um Ihrer Schaltfläche einen Rahmen hinzuzufügen. Ränder werden als Pixelwert festgelegt. Sie können den Rahmen vergrößern oder verkleinern, die Rahmenfarbe ändern und zwischen vier verschiedenen Rahmentypen wählen: Voll, Gepunktet, Gestrichelt und Doppelt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Padding | Verwenden Sie diese Option, um das Padding Ihrer Schaltfläche anzupassen. Padding wird als Pixelwert eingestellt. |
Beachten Sie, dass Sie die Höhe oder Breite der Schaltfläche hier nicht anpassen können. Um diese Anpassungen vorzunehmen, müssen Sie benutzerdefiniertes CSS verwenden.
Anpassen eines Schwebender-Kasten-Formulars
Mit dem Schwebender-Kasten-Formular können Sie ein Layout auswählen und das Styling für das Formular, die Eingabefelder und die Schaltfläche "Einreichen" anpassen.
Layout
Es gibt vier Optionen, aus denen Sie für Ihr Formular wählen können: kein Bild, Bild auf der linken Seite, Bild oben oder Bild in der Mitte.
Box-Stil
Das Feld "Formularstil" ermöglicht es Ihnen, das Aussehen des Formulars an die Besucher Ihrer Website anzupassen. Zu den Optionen zur Anpassung des Formularstils gehören:
| Optionen zur Anpassung des Boxstils | Beschreibung |
|---|---|
| Hintergrund | Klicken Sie auf den Farbwähler, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Schriftfarbe | Ändern Sie die Farbe des Textes, der in Ihrem Formular erscheint. |
| Schriftart | Ändern Sie die Schriftart auf dem Formular, damit sie zu Ihrer Marke passt. |
| Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert eingestellt. |
| Padding | Padding ist der Raum um Ihr Formular herum. Mit dieser Option können Sie das Padding erhöhen oder verringern. Dieser wird als Pixelwert eingestellt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihres Formulars abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Schatten | Verwenden Sie dies, um einen Schatten zu Ihrem Formular hinzuzufügen. Dadurch hebt er sich von anderen ab. Sie können zwischen den folgenden Optionen wählen: Keine, Leicht, Mittel und Schwer. |
Eingänge
Eingaben beziehen sich auf die Felder, die Website-Besucher verwenden, um ihre persönlichen Daten an Sie zu übermitteln. Zu den Optionen für die Eingabeanpassung gehören:
| Optionen für die Eingabeanpassung | Beschreibung |
|---|---|
| Hintergrund | Klicken Sie auf den Farbwähler, um die Farbe der Eingabefelder zu ändern. |
| Schriftfarbe | Klicken Sie auf den Farbwähler, um die Farbe des Eingabefeldtextes zu ändern. |
| Eckradius | Verwenden Sie diese Option, um die Ecken von Eingabefeldern abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
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 Tastenanpassung | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche "Abschicken". |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Grenze | Verwenden Sie diese Option, um Ihrer Schaltfläche einen Rahmen hinzuzufügen. Ränder werden als Pixelwert festgelegt. Sie können den Rahmen vergrößern oder verkleinern, die Rahmenfarbe ändern und zwischen vier verschiedenen Rahmentypen wählen: Voll, Gepunktet, Gestrichelt und Doppelt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Padding | Verwenden Sie diese Option, um das Padding Ihrer Schaltfläche anzupassen. Padding wird als Pixelwert eingestellt. |
Beachten Sie, dass Sie die Höhe oder Breite der Schaltfläche hier nicht einstellen können. Sie müssen benutzerdefinierte CSS verwenden, um diese Anpassungen vorzunehmen.
Anpassen eines schwebenden Leistenformulars
Mit dem schwebenden Leistenformular können Sie den Formularstil und die Schaltfläche "Senden" anpassen. Layout-Optionen sind bei diesem Formulartyp nicht verfügbar.
Bar Stil
Im Feld "Balkenstil" können Sie einstellen, wie das Formular für die Besucher Ihrer Website aussehen soll. Optionen zur Anpassung des Barstils umfassen:
| Optionen zur Anpassung des Barstils | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe Ihres Formulars. Hintergrundbilder werden von diesem Formulartyp nicht unterstützt. |
| Schriftfarbe | Ändern Sie die Farbe des Textes, der in Ihrem Formular erscheint. |
| Schriftart | Ändern Sie die Schriftart auf dem Formular, damit sie zu Ihrer Marke passt. |
Schaltfläche
Im Feld "Schaltfläche" können Sie das Aussehen der Schaltfläche "Senden" Ihres Formulars anpassen. Zu den Optionen für die Tastenanpassung gehören:
| Optionen zur Tastenanpassung | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche "Abschicken". |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Grenze | Verwenden Sie diese Option, um Ihrer Schaltfläche einen Rahmen hinzuzufügen. Ränder werden als Pixelwert festgelegt. Sie können den Rahmen vergrößern oder verkleinern, die Rahmenfarbe ändern und zwischen vier verschiedenen Rahmentypen wählen: Voll, Gepunktet, Gestrichelt und Doppelt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Padding | Verwenden Sie diese Option, um das Padding Ihrer Schaltfläche anzupassen. Padding wird als Pixelwert eingestellt. |
Beachten Sie, dass Sie die Höhe oder Breite der Schaltfläche hier nicht einstellen können. Sie müssen benutzerdefinierte CSS verwenden, um diese Anpassungen vorzunehmen.
Text der Schaltfläche "Senden" ändern
Sie können den Text der Schaltfläche "Abschicken" für jedes Formular ändern.
- Klicken Sie auf der Seite Formulare auf die Schaltfläche "Bearbeiten" für das Formular, das Sie aktualisieren möchten.
- Klicken Sie im Formular-Builder auf die Schaltfläche "Einreichen".
- Im rechten Menü wird das Label der Schaltfläche und ein Feld angezeigt. Geben Sie den Text ein, den Sie für die Schaltfläche verwenden möchten.
Der neue Schaltflächentext wird automatisch gespeichert.
Erweiterte Anpassungen
Für jeden Formulartyp in ActiveCampaign ist eine benutzerdefinierte CSS-Option verfügbar. Dies ist für fortgeschrittene Benutzer, die mit CSS vertraut sind und es problemlos verwenden können. 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 zum Beispiel verwenden, um:
- Breite und Höhe von Eingabefeldern anpassen
- Breite und Höhe der Schaltfläche "Senden" anpassen
- Schriftgröße einstellen
- Stellen Sie die Schriftart für einzelne Elemente ein. Sie können dies beispielsweise verwenden, um die Schriftart des Schaltflächentexts vom Rest des Formulars abzuheben.
So verwenden Sie die benutzerdefinierte CSS-Option:
- Klicken Sie im Formular-Builder unter auf das Tab "Stil".
- Scrollen Sie nach unten, bis Sie das Feld "Custom CSS" sehen.
- Klicken Sie auf die Schaltfläche "Inspektor" und dann auf das Formularelement, das Sie ändern möchten.
- Sobald Sie auf das Element klicken, das Sie anpassen möchten, wird es im Feld Custom CSS angezeigt. Geben Sie die CSS in dieses Feld ein.
Das CSS, das Sie dem Formularelement hinzufügen, wird automatisch gespeichert.
ActiveCampaign-Branding ausschalten
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 ausschalten.
So deaktivieren Sie das ActiveCampaign-Branding:
- Klicken Sie im Formular-Builder unter auf das Tab "Stil".
- Blättern Sie unter bis zum Ende des Abschnitts "Allgemeines".
- Klicken Sie auf die Umschaltfläche für das AC-Branding, um sie auf "Aus" zu stellen.
Diese Einstellung wird automatisch gespeichert.