Mit ActiveCampaign können Sie Formulare an die Farben Ihrer Marke anpassen, Bilder hinzufügen, die Schriftart ändern und vieles mehr.
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.
- Bearbeiten oder erstellen Sie ein neues Formular.
- Der Formular-Builder wird geladen. Alle Bearbeitungs- und Stiloptionen werden im rechten Bereich angezeigt. Klicken Sie im rechten Bereich auf die Registerkarte „Stil“.
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.
Allgemeines
Über das Dropdown-Menü „Allgemeines“ können Sie anpassen, wie das Formular den Besuchern Ihrer Website angezeigt wird. Unten finden Sie eine Tabelle mit allen Optionen für den Formularstil.
| Allgemeine Anpassungsoptionen | Beschreibung |
|---|---|
| Layout | Klicken Sie auf eine der Optionen, um ein horizontales oder vertikales Layout für Ihr Formular auszuwählen. |
| Maximale Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert festgelegt. |
| Hintergrund | Ändern Sie die Hintergrundfarbe Ihres Formulars oder machen Sie es transparent. Dieser Formulartyp unterstützt keine Hintergrundbilder. |
| Rahmen | Verwenden Sie diese Option, um Ihrem Formular 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. |
| Ecken | Mit dieser Option können Sie die Ecken Ihres Formulars abrunden oder quadratisch gestalten. Der Eckradius wird als Pixelwert festgelegt. |
| ActiveCampaign Branding anzeigen | Verwenden Sie diese Option, um das ActiveCampaign-Branding ein- oder auszuschalten. |
Text
Im Feld „Text“ können Sie das Aussehen des Textes Ihres Formulars anpassen. Unten finden Sie eine Tabelle mit allen Optionen zur Textanpassung.
| Textanpassungsoptionen | 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 ausgewä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. Unten finden Sie eine Tabelle mit allen Optionen zur Schaltflächenanpassung.
| Optionen zur Schaltflächenanpassung | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche „Senden“. |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Rahmen | Verwenden Sie diese Option, um Ihrer Schaltfläche einen Rahmen hinzuzufügen. Die Ränder 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 quadratisch zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
| Polsterung | Die Polsterung ist der Raum um Ihre Schaltfläche herum. Mit dieser Option können Sie die Polsterung 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.
Anpassung eines modalen Pop-up-Formulars
Mit dem modalen Pop-up-Formular können Sie ein Layout auswählen und die Gestaltung des Formulars, der Eingabefelder und der Schaltfläche „Senden“ anpassen.
Layout
Sie können für Ihr Formular aus vier Optionen wählen: kein Bild, Bild links, Bild oben oder Bild in der Mitte.
Modalstil
Im Feld „Modalstil“ können Sie anpassen, wie das Formular den Besuchern Ihrer Website angezeigt wird. Nachfolgend finden Sie eine Tabelle mit allen modalen Anpassungsoptionen:
| Anpassungsoptionen für den Modalstil | Beschreibung |
|---|---|
| Hintergrund | Klicken Sie auf die Farbauswahl, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Hintergrund | Klicken Sie auf die Farbauswahl, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Schriftart | Ändern Sie die Schriftart Ihres Formulars, damit sie zu Ihrer Marke passt. |
| Breite | Verwenden Sie diese Option, um die Breite Ihres Formulars anzupassen. Die Breite wird als Pixelwert festgelegt. |
| Polsterung | Padding ist der Raum um Ihr Formular herum. Mit dieser Option können Sie die Polsterung erhöhen oder verringern. Diese wird als Pixelwert festgelegt. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abgerundet oder quadratisch zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
| Schatten | Verwenden Sie diese Option, um Ihrem Formular einen Schatten hinzuzufügen. Dadurch wird es sich von anderen abheben. Sie können aus den folgenden Optionen wählen: keiner, leicht, mittel und stark. |
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 |
|---|---|
| Hintergrund | Klicken Sie auf die Farbauswahl, um die Farbe der Eingabefelder zu ändern. |
| Schriftfarbe | Klicken Sie auf die Farbauswahl, um die Farbe des Eingabefeldtextes zu ändern. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Eingabefelder abgerundet oder quadratisch zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
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 „Senden“. |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Rahmen | 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. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abzurunden oder eckig zu machen. Der Eckradius wird als Pixelwert festgelegt. |
| Polsterung | Verwenden Sie diese Option, um die Polsterung Ihrer Schaltfläche anzupassen. Die Polsterung 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 Floating-Box-Formulars
Mit dem Floating-Box-Formular können Sie ein Layout auswählen und die Gestaltung des Formulars, der Eingabefelder und der Schaltfläche „Senden“ anpassen.
Layout
Sie können für Ihr Formular aus vier Optionen wählen: kein Bild, Bild links, Bild oben oder Bild in der Mitte.
Box-Stil
Im Feld „Formularstil“ können Sie anpassen, wie das Formular den Besuchern Ihrer Website angezeigt wird. Zu den Optionen zur Anpassung des Formularstils gehören:
| Optionen zur Anpassung des Box-Stils | Beschreibung |
|---|---|
| Hintergrund | Klicken Sie auf die Farbauswahl, um die Farbe Ihres Formulars zu ändern oder ein Hintergrundbild hinzuzufügen. |
| Schriftfarbe | Ändern Sie die Farbe des Textes, der auf Ihrem Formular angezeigt wird. |
| Schriftart | Ändern Sie die Schriftart im Formular, damit sie zu Ihrer Marke passt. |
| 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. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihres Formulars abzurunden oder eckig zu machen. Der Eckradius wird als Pixelwert festgelegt. |
| Schatten | Verwenden Sie diese Option, um Ihrem Formular einen Schatten hinzuzufügen. Dadurch wird es sich von anderen abheben. Sie können aus den folgenden Optionen wählen: keiner, leicht, mittel und stark. |
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 |
|---|---|
| Hintergrund | Klicken Sie auf die Farbauswahl, um die Farbe der Eingabefelder zu ändern. |
| Schriftfarbe | Klicken Sie auf die Farbauswahl, um die Farbe des Eingabefeldtextes zu ändern. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Eingabefelder abgerundet oder quadratisch zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
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 |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche „Senden“. |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Rahmen | 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. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abzurunden oder eckig zu machen. Der Eckradius wird als Pixelwert festgelegt. |
| Polsterung | Verwenden Sie diese Option, um die Polsterung Ihrer Schaltfläche anzupassen. Die Polsterung 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 schwebenden Balkenformulars
Mit dem schwebenden Balkenformular können Sie den Formularstil und die Senden-Schaltfläche anpassen. Für diesen Formulartyp sind keine Layoutoptionen verfügbar.
Balkenstil
Im Feld „Balkenstil“ können Sie anpassen, wie das Formular den Besuchern Ihrer Website angezeigt wird. Zu den Anpassungsoptionen für den Balkenstil gehören:
| Optionen zur Anpassung des Balkenstils | Beschreibung |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe Ihres Formulars. Hintergrundbilder werden von diesem Formulartyp nicht unterstützt. |
| Schriftfarbe | Ändern Sie die Farbe des Textes, der auf Ihrem Formular angezeigt wird. |
| Schriftart | Ändern Sie die Schriftart im Formular, damit sie zu Ihrer Marke passt. |
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 |
|---|---|
| Hintergrund | Ändern Sie die Hintergrundfarbe der Schaltfläche „Senden“. |
| Text | Ändern Sie die Farbe des Schaltflächentextes. |
| Rahmen | 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. |
| Eckradius | Verwenden Sie diese Option, um die Ecken Ihrer Schaltfläche abzurunden oder eckig zu gestalten. Der Eckradius wird als Pixelwert festgelegt. |
| Polsterung | Verwenden Sie diese Option, um die Polsterung Ihrer Schaltfläche anzupassen. Die Polsterung 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.
Ä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“.
- Im rechten Menü werden die Schaltflächenbeschriftung 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 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.
Wenn Sie mehr über die Verwendung von CSS erfahren möchten, sehen Sie sich dieses CSS-Tutorial von w3schools.com an.
So verwenden Sie die benutzerdefinierte CSS-Option:
- Klicken Sie im Formular-Builder auf die Registerkarte „Stil“.
- Scrollen Sie nach unten, bis Sie das Feld „Benutzerdefiniertes 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 „Benutzerdefiniertes CSS“ angezeigt. Geben Sie das CSS in dieses Feld ein.
Das CSS, das Sie dem Formularelement 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 Lite-Tarifs können das Branding nicht ausschalten.
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.