Forms

Wie kann ich die Farbe der Absendeschaltfläche eines Formulars ändern?

Zuletzt aktualisiert am: April 20, 2016

Für Formulare auf COS Landing-Pages

  • Navigieren Sie zu Inhalte > Landing-Pages.
  • Suchen Sie nach der entsprechenden Landing-Page und bearbeiten Sie sie.
  • Klicken Sie auf die Registerkarte Stil des Formulars
  • Wählen Sie Formular Schaltfläche aus dem Drop-down Menü, um die Absendeschaltfläche zu gestalten.
Vom Benutzer hinzugefügte Abbildung
Speichern und aktualisieren Sie die Landing-Page

Bei Formularen, die auf externen Seiten eingebettet sind

Verändern Sie den Einbettungscode

  • Fügen Sie eine personalisierte CCS-Klasse zum Einbettungscode des Formulars hinzu.
  • Dies wird erreicht, indem Sie das Attribut ‚submitButtonClass‘ hinzufügen
  • Beispielcode:
  • <!--[if lte IE 8]>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <![endif]-->
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
    hbspt.forms.create({
    portalId: '118xxx',
    formId: '41tgif309-ok74-xxxx-xxxx-xxxxxxxxxx',
    submitButtonClass: 'meine-tolle-Absendeschaltflaeche'
    });
    </script>
  • Dadurch werden alle Standard-Stile der Absendeschaltfläche für Formulare gelöscht.
    • Dann müssen Sie die CSS zum Kopfzeile der Seite oder zu einer Formatvorlage hinzufügen.
      • .meine-tolle-Absendeschaltflaeche {background-color:red; padding:10px;}

Alternativ können Sie die Standardstile von HubSpot deaktivieren und einen CSS-Selektor in Ihrer Formatvorlage verwenden, ohne dabei den Code zu verändern:

  • Zum Beispiel input[type="submit"]{ background: #ff0000; }
  • Dadurch wird die Schaltfläche rot.

Bitte beziehen Sie sich auf unsere Entwicklerdokumentation, um mehr Informationen zur Personalisierung von Einbettungscodes zu erhalten.