Vidensbase

Style din indlejrede formular på eksterne sider

Skrevet af HubSpot Support | Jun 28, 2023 12:41:01 PM

Du kan style din indlejrede HubSpot-formular på dine eksterne sider på to måder i formulareditoren eller med CSS i dit eksterne stilark.


I formulareditoren

Tema

Hvis du vil style dine formularer uden at skrive brugerdefineret kode, kan du anvende forudindstillede temaer på din indlejrede formular eller selvstændige formularside. Temaerne tilføjer flere tilpasningsmuligheder til dine formularer, ud over eventuelle globale indstillinger for formularstil.

  • Klik på navnet på en formular.
  • Klik på fanen Stil og forhåndsvisning i formulareditoren.
  • Fjern markeringen i afkrydsningsfeltet Behold det gamle tema i afsnittet Tema i venstre rude.

Bemærk: Hvis du fjerner markeringen i afkrydsningsfeltet Behold gammelt tema , fjernes den tidligere standard HubSpot-styling, der blev anvendt på denne formular. Eventuel brugerdefineret CSS eller JavaScript, du har tilføjet til formularen, vil ikke længere fungere. Dette afkrydsningsfelt er kun tilgængeligt for ældre formularer og vil ikke være tilgængeligt i nye formularer, der oprettes på din konto.

  • Vælg et af fire temaer.

Stil(kunMarketing Hub Starter, Professional, Enterprise eller Legacy Marketing Hub Basic )

Ud over temaer kan du også style indlejrede formularer på et mere detaljeret niveau.

  • Klik på navnet på en formular.
  • Klik på fanen Style & Preview i formulareditoren.
  • Klik på sektionen > Style i venstre rude for at udvide den. Her kan du style formularfeltets bredde, skrifttype, skriftstørrelse, skriftfarve og formularens knap.

Disse stilarter indstilles på individuel formularbasis og tilsidesætter globale indstillinger for formularstil.

Bemærk: Temaer og stilarter, der indstilles i formulareditoren, gælder kun for indlejrede formularer eller selvstændige formularsider. Formularer på dine HubSpot-sider kan kun styles med formularmodulets stilindstillinger i indholdseditoren.

Med CSS i dit eksterne stylesheet( kunMarketing Hub Professional, Enterprise eller Legacy Marketing Hub Basic )

  • Klik på navnet på formularen.
  • Klik på fanen Style & preview i formulareditoren.
  • Klik for at tænde for Indstil som rå HTML-formular . Formularen vil blive gengivet som et råt HTML-element på din eksterne side i stedet for inde i en iframe, og enhver standard HubSpot-styling, der er anvendt på formularen, vil blive fjernet.

  • Klik på Del øverst til højre.
  • I dialogboksen skal du klikke på Copy for at kopiere formularens embed-kode.
  • Føj formularens ind lejringskode til din eksterne side. Hvis du allerede har indlejret din formular, skal du erstatte den eksisterende indlejringskode med denne nye, ustiliserede version.
  • Når du har indlejret din formular, kan du style den i dit eksterne stylesheet med CSS.
  • Alternativt kan du ændre formularens ind lejringskode for at foretage yderligere formulartilpasninger. Da HubSpot-formularer er bygget med JavaScript, ikke HTML, kræver det hjælp fra en udvikler, der ved, hvordan man arbejder med JavaScript, at tilpasse formularindlejringskoden.