Mit ActiveCampaign können Sie Formulare an die Farben Ihrer Marke anpassen, Bilder hinzufügen, die Schriftart ändern und vieles mehr.
Ein 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 Formularersteller.
So rufen Sie diese Registerkarte für ein beliebiges Formular auf:
- Klicken Sie im linken Menü auf "Website" > "Formulare".
- Bearbeiten oder erstellen ein neues Formular.
- Der Formulargenerator 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 wählen und das Styling für das Formular und die Schaltfläche "Senden" anpassen.
Layout
Klicken Sie auf eine der beiden Optionen, um ein horizontales oder vertikales Layout für Ihr Formular zu wählen.
Formular Stil
Im Feld "Formularstil" können Sie festlegen, wie das Formular für die Besucher Ihrer Website aussehen soll. Nachfolgend finden Sie eine Tabelle mit allen Optionen für die Formulargestaltung.
| Optionen zur Anpassung des Formularstils | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe Ihres Formulars oder machen Sie es transparent. 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. |
| Grenze | Verwenden Sie diese Option, um einen Rahmen zu Ihrem Formular 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 Ihres Formulars abgerundet oder eckig zu machen. Der Eckenradius wird als Pixelwert eingestellt. |
| Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert eingestellt. |
Schaltfläche
Im Feld "Schaltfläche" können Sie das Aussehen der Schaltfläche "Senden" 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 "Senden". |
| 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 | Padding ist der Raum um Ihre Taste herum. Mit dieser Option können Sie das Padding erhöhen oder verringern. Dieser 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 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 "Senden". |
| 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 Formulars mit schwebender Box
Mit dem Floating-Box-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.
Box-Stil
Im Feld "Formularstil" können Sie festlegen, wie das Formular für die Besucher Ihrer Website aussehen soll. Die Optionen zur Anpassung des Formularstils umfassen:
| 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
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 "Senden". |
| 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 Balkenformulars
Mit dem schwebenden Balkenformular 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 "Senden". |
| 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 "Senden" 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 in der Formularerstellung auf die Schaltfläche "Absenden".
- Im rechten Menü wird die Beschriftung 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
Jeder Formulartyp in ActiveCampaign verfügt über eine eigene CSS-Option. Dies ist für fortgeschrittene Benutzer gedacht, die mit CSS vertraut sind und es sicher anwenden können. Die benutzerdefinierte CSS-Option befindet sich unter der Registerkarte "Stil" für jedes Formular und kann verwendet werden, um weitere Änderungen an jedem Formularelement vorzunehmen. 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. Zum Beispiel können Sie dies verwenden, um die Schriftart des Schaltflächentextes vom Rest des Formulars zu unterscheiden
Wenn Sie mehr über die Verwendung von CSS erfahren möchten, besuchen Sie dieses CSS Tutorial von w3schools.com.
So verwenden Sie die benutzerdefinierte CSS-Option:
- Klicken Sie im Formulargenerator unter auf die Registerkarte "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-Plan haben, können Sie das ActiveCampaign-Branding von Ihrem Formular entfernen. Benutzer des Lite-Tarifs können das Branding nicht abschalten.
So schalten Sie ActiveCampaign-Branding aus:
- Klicken Sie im Formulargenerator unter auf die Registerkarte "Stil".
- Blättern Sie unter, bis Sie das Feld "Sonstiges" sehen.
- Klicken Sie auf die Umschaltfläche für das AC-Branding, um sie auf "Aus" zu stellen.
Diese Einstellung wird automatisch gespeichert.