Eingebettetes Formular auf externen Seiten gestalten

Sie haben zwei Möglichkeiten, Ihr eingebettetes HubSpot-Formular auf externen Seiten zu gestalten:

1. Eingebettetes Formular im Formular-Editor gestalten
2. Eingebettetes Formular mit CSS in Ihrem externen Stylesheet gestalten

Eingebettetes Formular im Formular-Editor gestalten

Design

Wenn Sie Ihre Formulare ohne benutzerdefinierten Code gestalten möchten, können Sie vordefinierte Designs auf Ihr eingebettetes Formular oder die eigenständige Formularseite anwenden. Mit den Designs verfügen Sie zusätzlich zu globalen Stileinstellungen für Formulare über weitere Anpassungsoptionen für die Formulare.

• Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
• Klicken Sie auf den Namen eines Formulars.
• Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.
• Deaktivieren Sie im linken Bereich im Abschnitt Design das Kontrollkästchen Altes Design beibehalten.

Hinweis: Durch das Deaktivieren des Kontrollkästchen Altes Design beibehalten wird die vorherige auf dieses Formular angewendete HubSpot-Standardformatierung gelöscht. Dem Formular hinzugefügte benutzerdefinierte CSS oder JavaScript funktionieren dann nicht mehr.

• Wählen Sie eines der vier Designs aus.

Stil (nur Marketing Hub Starter, Basic, Professional und Enterprise)

Sie können eingebettete Formulare nicht nur mit Designs, sondern auch auf einer detaillierteren Ebene gestalten.

• Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
• Klicken Sie auf den Namen eines Formulars.
• Klicken Sie im Formular-Editor auf die Registerkarte Stil & Vorschau.

• Klicken Sie im linken Bereich auf den Abschnitt > Stil, um ihn zu erweitern. Hier können Sie Breite, Schriftartfamilie, Schriftgrade und Schriftfarben für Formularfelder sowie den Formular-Button anpassen.

Diese Stile werden für einzelne Formulare festgelegt, und sie überschreiben globale Stileinstellungen für Formulare.

Hinweis: Im Formular-Editor festgelegte Designs und Stile gelten nur für eingebettete Formulare und eigenständige Formularseiten. Formulare auf Ihren HubSpot-Seiten können nur mit den Stiloptionen des Formularmoduls im Content-Editor gestaltet werden.

Eingebettetes Formular mit CSS in Ihrem externen Stylesheet gestalten (nur Marketing Hub Basic, Professional und Enterprise)

• Gehen Sie in Ihrem HubSpot-Account zu Marketing > Lead-Erfassung > Formulare.
• Klicken Sie auf den Namen des Formulars.
• Klicken Sie im Formular-Editor auf die Registerkarte Optionen.
• Klicken Sie auf den Schalter Formulare ohne Style, um ihn zu aktivieren. Das Formular wird als HTML-Element auf Ihrer externen Seite und nicht innerhalb eines iFrame angezeigt, und alle standardmäßig auf das Formular angewendeten HubSpot-Formatierungen werden gelöscht.

• Klicken Sie oben rechts auf Teilen.
• Klicken Sie im Dialogfeld auf Kopieren, um den Formular-Einbettungscode zu kopieren.
• Fügen Sie den Formular-Einbettungscode in Ihre externe Seite ein. Wenn Sie Ihr Formular bereits eingebettet haben, müssen Sie den vorhandenen Einbettungscode mit dieser neuen Version ohne Style ersetzen.

• Nach Einbetten des Formulars können Sie es in Ihrem externen Stylesheet mit CSS gestalten. Erfahren Sie mehr über das Gestalten von HubSpot-Formularen mit standardmäßigen Attribut-Selektoren in der Designer-Dokumentation von HubSpot.
• Sie können den Formular-Einbettungscode auch ändern, um zusätzliche Formularanpassungen vorzunehmen. Da HubSpot-Formulare auf JavaScript und nicht auf HTML basieren, wenden Sie sich beim Anpassen des Formular-Einbettungscodes an einen Entwickler, der mit JavaScript vertraut ist.