Opsæt og style en HubSpot-formular på et eksternt site

Når du har oprettet en formular i HubSpot, kan du tilføje den til HubSpot-sider eller sider, du har oprettet uden for HubSpot. Hvis dit indhold er hostet uden for HubSpot, kan du tilføje formularer med følgende metoder:

• Indlejr formularen ved at kopiere indlejringskoden og tilføje den til din eksterne side.
• Brug linket til deling af formularer, som tilbyder en selvstændig webside til din formular, som du kan linke til.

Med begge metoder vil ændringer i formularen automatisk blive opdateret på live-formularen på dit eksterne site. Du kan style din indlejrede HubSpot-formular i formulareditoren eller med CSS i dit eksterne stylesheet.

Før du går i gang

• Hvis du vil indstille din formular som en rå HTML-formular, er denne mulighed ikke tilgængelig i den opdaterede formulareditor. Kun formularer, der er bygget med den gamle formulareditor, kan indstilles som rå HTML.
• Hvis du indlejrer din HubSpot-formular på en ekstern side, skal du installere HubSpot-sporingskoden for at spore analyser. Lær, hvordan du installerer HubSpot-sporingskoden.

Stil din formular

Tilpas teksten, inputfelterne, knappen og baggrunden for din formular og formularens trin. Stilindstillinger, der er konfigureret på fanen Global styling, vil blive anvendt på alle formularens trin. Du kan ikke style individuelle formulartrin separat.

1. På din HubSpot-konto skal du navigere til Marketing > Formularer.
2. Opret en ny formular, eller hold musen over en eksisterende formular, og klik på Rediger.
3. Klik på ikonet styles Styling i menuen i venstre side.
4. Du kan tilpasse stilen for følgende formular-komponenter:
   • Felter: Tilpas feltet, herunder baggrund og kanter. Du kan også tilpasse skrifttype, skriftstørrelse og farver for dine etiketter samt farverne for din hjælpetekst, pladsholdere og fejltekst.
   • Knapper: Tilpas knappens højde, hjørneafrunding, baggrund, gradient og tilføj en skygge til knappen. Du kan også tilpasse skrifttype, skriftstørrelse og farve for knapteksten.
   • Paragraph (Rich Text): Tilpas skrifttype, skriftstørrelse og farve til din brødtekst.
   • Overskrift: Tilpas skrifttype og tekstfarve for din overskrift. Du kan vælge at tilføje slagskygge til din overskriftstekst.
   • Baggrund: Tilpas baggrunden for din formular og formularens trin. Du kan vælge at indstille en baggrundsfarve eller bruge et billede som baggrund. Du kan bruge AI-assistenter til at generere billeder. Du kan også vælge at sætte en kant på din formular.
   • Fremdriftslinje: Tilpas fremdriftslinjen på din formular, herunder farven på fremdriftslinjen og skrifttypen på fremdriftslinjen.

Kopier formularens indlejringskode

Du kan indlejre din HubSpot-formular på din eksterne side ved at kopiere formularens indlejringskode og indsætte den på din eksterne side. For at spore analyser for din indlejrede formular skal din HubSpot-sporingskode installeres på den eksterne side, hvor du indlejrer HubSpot-formularen.

Sådan får du adgang til indlejringskoden:

1. På din HubSpot-konto skal du navigere til Marketing > Formularer.
2. Hold musen over en formular, og klik på Rediger.
3. Klik på Gennemse og opdater øverst til højre.
4. Klik på Opdater nederst i højre panel.
5. Klik på Hent indlejringskode i dialogboksen.
6. Klik på Kopier på fanen Indlejringskode.
7. Indsæt indlejringskoden i HTML-modulet på din eksterne side.

Brug delingslinket til at dele en selvstændig formularside

Du kan dele din formular med delingslinket, som viser formularen på en selvstændig webside. Dette delingslink kan ikke skjules eller gøres privat. Alle med delingslinket vil kunne få adgang til formularen.

Sådan får du adgang til delingslinket:

1. På din HubSpot-konto skal du navigere til Marketing > Formularer.
2. Hold musen over en formular, og klik på Rediger.
3. Klik på Gennemgå og opdater øverst til højre.
4. Klik på Opdater nederst i højre panel.
5. Klik på Copy a share link i dialogboksen.
6. Klik på Kopier nederst. Dette vil kopiere formularsidens webadresse til din udklipsholder.
7. Åbn et nyt vindue eller en ny fane i din browser, og indsæt formularsidens URL i adresselinjen for at indlæse den. Du kan også dele formularsidens URL direkte med andre for at give dem adgang til formularen.

Stil din indlejrede formular med CSS i dit eksterne stilark

Brugere med en Marketing Hub- eller Content Hub Professional- eller Enterprise-konto kan indlejre formularer og style dem med CSS i det eksterne stilark. Med denne metode kan du tilsidesætte standardformater, anvende detaljeret styling på specifikke formularelementer og indstille globale regler for konsekvent styling på tværs af dine indlejrede formularer. Læs mere om, hvordan du definerer brugerdefineret styling til indlejrede formularer ved hjælp af CSS.

Sådan får du adgang til udviklerkoden:

1. På din HubSpot-konto skal du navigere til Marketing > Formularer.
2. Hold musen over en formular, og klik på Edit.
3. Klik på Review and update øverst til højre.
4. Klik på Opdater nederst i højre panel.
5. Klik på Hent indlejringskode i dialogboksen.
6. Klik på fanen Udviklerkode (avanceret).
7. For at acceptere risikoen for, at ændringer foretaget eksternt i CSS eller JavaScript kan få din formular til at gå i stykker, skal du markere afkrydsningsfeltet Jeg forstår risikoen, vis mig koden.
8. Klik på Kopier i bunden.
9. Føj formularens indlejringskode til din eksterne side. Når du har indlejret din formular, kan du style formularen i dit eksterne stylesheet med CSS.
   • De CSS-variabler, du kan tilsidesætte, er listet i denne artikel.
   • Globale stilarter tilsidesætter topniveau-styling på tværs af alle dine indlejrede formularer. Du kan også målrette individuelle elementer i dine formularer, f.eks. en række formularelementer, indsendelsesknapper eller formularoverskrifter.