Style og indlejre HubSpot-formularer på et eksternt site

Brug HubSpot-formularer på dit eksterne website til at indsamle leads og automatisk synkronisere kontaktdata til din HubSpot-konto. Du kan style din formular i HubSpot og bruge formularens indlejringskode til at tilføje den til dit websted. Eller brug et delingslink til at sende en selvstændig formular til dit publikum.

Indlejring af en formular sikrer, at indsendelser synkroniseres direkte til din HubSpot-konto, hvor du kan administrere kontakter, udløse automatisering og analysere performance. Du kan f.eks. tilføje en HubSpot-formular til en produktside på din virksomheds hjemmeside for at indsamle demo-anmodninger og følge op med en automatiseret e-mail.

Hvis din formular blev oprettet i den gamle formulareditor, kan du lære at opsætte og style en gammel formular på et eksternt websted.

Før du går i gang

Før du begynder at arbejde med denne funktion, skal du gennemgå de tekniske krav og overvejelser i forbindelse med brug af formularer på eksterne websteder.

Krav og overvejelser

• Når du indlejrer en HubSpot-formular på et eksternt websted, skal du tilføje webstedets domæne til dine sporingsindstillinger. Formularindsendelser fra domæner, der ikke er tilføjet, vil blive markeret som spam.
• For at spore analyser på din indlejrede formular skal du installere HubSpot-sporingskoden på din eksterne side.
  

Begrænsninger og overvejelser

• Indstilling af din formular som en rå HTML-formular er ikke tilgængelig i den opdaterede formulareditor. Kun formularer, der er bygget med den gamle formulareditor, kan indstilles som rå HTML.
• Tilpasning af en formulars indlejringskode kræver hjælp fra en udvikler, der ved, hvordan man arbejder med JavaScript. Mere avanceret tilpasning kan udføres med en specialbygget formular og HubSpot Forms API.

Stil din formular

Tilpas teksten, indtastningsfelterne, knapperne og baggrunden for din formular og formularens trin. Tilpasninger af formularstil anvendes på alle formulartrin. 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. I panelet Form styles kan du tilpasse følgende 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.

Del en selvstændig formularside

Brug et delelink til at vise din formular på en selvstændig side. Alle med delingslinket kan få adgang til formularen. Delingslinket kan ikke skjules eller gøres privat.

For at kopiere 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å Gennemse 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 sidens webadresse til din udklipsholder.
7. Åbn et nyt vindue eller en ny fane i din browser, og indsæt sidens URL i adresselinjen for at indlæse den. Du kan også dele URL'en til formularsiden direkte med andre for at give dem adgang til formularen.

Kopier formularens indlejringskode

Indlejr din 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 kopieres 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.

Få adgang til formularens udviklerkode

Integrer din formular, og tilpas stilen ved hjælp af CSS i dit eksterne stilark. Med denne metode kan du tilsidesætte standardstilarter, anvende detaljeret styling på specifikke formularelementer og indstille globale regler for konsekvent styling på tværs af dine indlejrede formularer. Få mere at vide 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å Rediger.
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.