Formater og integrer HubSpot-formularer på et eksternt websted

Brug HubSpot-formularer på din eksterne hjemmeside til at indsamle kundeemner og synkronisere kontaktoplysninger automatisk med din HubSpot-konto. Du kan tilpasse udseendet på din formular i HubSpot og bruge indlejringskoden til at tilføje den til din hjemmeside. Du kan også bruge et delingslink til at sende en selvstændig formular til din målgruppe.

Når du indsætter en formular, sikres det, at indsendelser synkroniseres direkte til din HubSpot-konto, hvor du kan administrere kontakter, udløse automatisering og analysere resultater. Du kan f.eks. tilføje en HubSpot-formular til en produktside på din virksomheds hjemmeside for at indsamle anmodninger om demoer og følge op med en automatiseret e-mail.

Hvis din formular er oprettet i den gamle formulareditor, kan du læse, hvordan du konfigurerer og tilpasser en gammel formular på et eksternt websted.

Før du går i gang

Inden du begynder at arbejde med denne funktion, skal du gennemgå de tekniske krav og overvejelser vedrørende brug af formularer på eksterne websteder.

Krav

• For at spore analyser på din indlejrede formular skal du installere HubSpot-sporingskoden på din eksterne side.
  
• 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.

Begrænsninger og overvejelser

• Det er ikke muligt at indstille din formular som en rå HTML-formular i den opdaterede formulareditor. Kun formularer, der er oprettet ved hjælp af den gamle formulareditor, kan indstilles som rå HTML.
• Tilpasning af en formulars indlejringskode kræver hjælp fra en udvikler, der har kendskab til JavaScript. Mere avanceret tilpasning kan udføres med en specialudviklet formular og HubSpot Forms API.

Design din formular

Tilpas teksten, indtastningsfelterne, knapperne og baggrunden for din formular og formulartrinene. Tilpasninger af formularens udseende gælder for alle formulartrin. Du kan ikke tilpasse udseendet på de enkelte formulartrin hver for sig.

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > Formularer. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > Formularer.
2. Opret en ny formular, eller hold markøren over en eksisterende formular, og klik på Rediger.
3. Klik på ikonet" styles -stil" i menuen i venstre sidepanel.
4. Fra panelet " Formularstilarter " kan du tilpasse følgende komponenter:
   • Felter: Tilpas feltet, herunder baggrund og rammer. Du kan også tilpasse skrifttypen, skriftstørrelsen og farverne for dine etiketter samt farverne for din hjælpetekst, pladsholdere og fejltekst.
   • Knapper: Tilpas knappens højde, afrundede hjørner, baggrund og farveovergang, og tilføj en slagskygge til knappen. Du kan også tilpasse skrifttypen, skriftstørrelsen og farven på knapteksten.
   • Afsnit (Rich Text): Tilpas skrifttypen, skriftstørrelsen og farven på din brødtekst.
   • Overskrift: Tilpas skrifttypen og tekstfarven på din overskrift. Du kan vælge at tilføje en slagskygge til din overskriftstekst.
   • Baggrund: Tilpas baggrunden for din formular og formulartrinene. 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 indstille en ramme omkring din formular.
   • Statusbjælke: Tilpas statusbjælken på din formular, herunder farven på statuslinjen og skrifttypen på statusbjælken.

Del en selvstændig formularside

Brug et delingslink til at vise din formular på en selvstændig side. Alle, der har delingslinket, kan få adgang til formularen. URL'er til delingslink genereres automatisk og kan ikke redigeres eller tilpasses.

Sådan kopierer du delingslinket:

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > Formularer. Hvis Mere ikke vises på din konto, skal du navigere direkte 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 panelet til højre.
5. Klik på Kopier et delingslink i dialogboksen.
6. Klik nederst på Kopier. Dette kopierer 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 formularsidens URL direkte med andre for at give dem adgang til formularen.

Kopier indlejringskoden til formularen

Indsæt din formular på din eksterne side ved at kopiere indlejringskoden og indsætte den på din eksterne side. For at spore analyser for din indlejrede formular skal din HubSpot-sporingskode være installeret på den eksterne side, hvor du indlejrer HubSpot-formularen.

Sådan kopierer du indlejringskoden:

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > Formularer. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > Formularer.
2. Hold markøren over en formular, og klik på Rediger.
3. Klik på Gennemse og opdater øverst til højre.
4. Klik på "Opdater" nederst i panelet til højre.
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 formularudviklerkoden

Indsæt 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å bestemte formularelementer og indstille globale regler for ensartet styling på tværs af dine indsatte formularer. Få mere at vide om, hvordan du definerer brugerdefineret styling for indsatte formularer ved hjælp af CSS.

Sådan får du adgang til udviklerkoden:

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Marketing > Formularer. Hvis Mere ikke vises på din konto, skal du navigere direkte til Marketing > Formularer.
2. Hold markøren over en formular, og klik på Rediger.
3. Klik på Gennemse og opdater øverst til højre.
4. Klik på "Opdater" nederst i panelet til højre.
5. Klik på Hent indlejringskode i dialogboksen.
6. Klik på fanen Udviklerkode (Avanceret).
7. Hvis du accepterer risikoen for, at ændringer foretaget eksternt i CSS eller JavaScript kan medføre, at din formular ikke længere fungerer, skal du markere afkrydsningsfeltet Jeg forstår risiciene, vis mig koden.
8. Klik på " Kopier" nederst.
9. Indsæt formularens indlejringskode på din eksterne side. Når du har indlejret din formular, kan du style den i dit eksterne stylesheet med CSS.
   • De CSS-variabler, du kan overskrive, er angivet i denne artikel.
   • Globale stilarter vil tilsidesætte formatering på øverste niveau på tværs af alle dine indlejrede formularer. Du kan også målrette mod individuelle elementer i dine formularer, såsom en formularelementrække, afsendelsesknapper eller formularoverskrifter.