Merk:: Denne artikkelen er oversatt av praktiske årsaker. Oversettelsen opprettes automatisk ved hjelp av oversettingsprogramvare, og det er ikke sikkert at den er korrekturlest. Den engelske versjonen av denne artikkelen skal regnes som den regjerende versjonen med den nyeste informasjonen. Du finner den her.

Sette opp og utforme et HubSpot-skjema på et eksternt nettsted

Sist oppdatert: april 30, 2025

Tilgjengelig med et av følgende abonnementer, unntatt der det er angitt:

Alle produkter og planer

Når du har opprettet et skjema i HubSpot, kan du legge det til på HubSpot-sider eller sider du har opprettet utenfor HubSpot. Skjemaer kan deles på ditt eksterne, ikke-HubSpot-hostede nettsted ved å enten:

Bygge inn skjemakoden på en eksisterende side.
Opprette en frittstående skjemaside som du kan lenke til.

Med begge metodene vil endringer som gjøres i skjemaet i HubSpots skjemaverktøy, automatisk gjenspeiles i live-skjemaet på det eksterne nettstedet ditt. Etter at du har lagt til skjemaet, kan du style det innebygde HubSpot-skjemaet på de eksterne sidene dine i skjemaredigeringsprogrammet eller med CSS i det eksterne stilarket.

Merk: Det er ikke mulig å angi skjemaet som rå HTML i den oppdaterte redigeringsprogrammet. Bare skjemaer som er laget med den gamle editoren, kan settes som rå HTML.

Utform skjemaet ditt

Tilpass teksten, inndatafeltene, knappene og bakgrunnen for skjemaet og skjematrinnene. Stilalternativer som er konfigurert i fanen Global styling, vil bli brukt på alle skjematrinn. Du kan ikke style individuelle skjematrinn separat.

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Opprettet nytt skjema, eller hold musepekeren over et eksisterende skjema og klikk på Rediger .
Klikk på Styling-ikonet på venstre side.

style-your-form

Når du tilpasser tekst, inndatafelt eller knapper, kan du velge mellom eksisterende stiler ved hjelp av Hurtigfelt-inndatastiler. Alternativt kan du tilpasse stilen manuelt for hver enkelt komponent i skjemaet:
- Felt: Tilpass feltet, inkludert bakgrunn og rammer. Du kan også tilpasse skrifttype, skriftstørrelse og farger for etikettene, samt fargene for hjelpetekst, plassholdere og feiltekst.
- Knapper: Du kan tilpasse knappens høyde, hjørneavrunding, bakgrunn, gradient og legge til en slagskygge på knappen. Du kan også tilpasse skrifttype, skriftstørrelse og farge for knappteksten.
- Avsnitt (rik tekst): Tilpass skrifttype, skriftstørrelse og farge for brødteksten.
- Overskrift: Tilpass skrifttype og tekstfarge for overskriften. Du kan velge å legge til slagskygge i overskriftsteksten.
- Bakgrunn: Tilpass bakgrunnen for skjemaet og skjematrinnene. Du kan velge å angi en bakgrunnsfarge eller bruke et bilde som bakgrunn. Du kan bruke AI-assistenter til å generere bilder. Du kan også velge å sette en ramme rundt skjemaet.
- Fremdriftslinje: Du kan tilpasse fremdriftslinjen i skjemaet, inkludert fargen på fremdriftslinjen og skriften på fremdriftslinjen.

Legg til skjemaets innebygde kode

Slik får du tilgang til skjemainnbyggingskoden:

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold markøren over et skjema, og klikk på Handlinger > Del.
Klikk på fanen Innebygd kode.
Hvis du vil legge til kontakter som sender inn skjemaet, i en Salesforce-kampanje i dialogboksen, klikker du på rullegardinmenyen Legg til kontakter i en Salesforce-kampanje og velger en kampanje. Hvis du knytter en Salesforce-kampanje til skjemaet, vil skjemaets innebyggingskode bli endret. I dette tilfellet må du legge til innbyggingskoden på nytt på det eksterne nettstedet.
Klikk på Kopier.
Lim inn innebyggingskoden i HTML-modulen på den eksterne siden. For å spore analyser for skjemaet ditt må HubSpot-sporingskoden være installert på den eksterne siden der du plasserer et HubSpot-skjema.

get your hubspot form embded code

Opprett en frittstående skjemaside

Du kan også dele skjemaet ditt via Share-lenken. I en Share-kobling vises skjemaet på en frittstående side med en egen URL-adresse. Denne delingslenken kan ikke skjules eller gjøres privat. Alle som har delingslenken, vil ha tilgang til skjemaet.

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold musepekeren over et skjema, og klikk på Handlinger > Del .
I dialogboksen klikker du på fanen Delingslenke .
Klikk på Kopier for å kopiere skjemasidens URL-adresse til utklippstavlen.
Åpne et nytt vindu eller en ny fane i nettleseren, og lim inn skjemasidens URL-adresse i adressefeltet for å laste den inn. Du kan også dele URL-adressen til skjemasiden direkte med andre for å gi dem tilgang til skjemaet.

Stil det innebygde skjemaet med CSS i det eksterne stilarket ditt

Hvis du har et Marketing Hub- eller Content Hub Professional- eller Enterprise-abonnement med HubSpot-kontoen din, kan du bygge inn skjemaer og style dem ved hjelp av CSS i det eksterne stilarket ditt.

Du kan overstyre standardstiler og bruke detaljert styling på spesifikke skjemaelementer, samt angi globale regler for å opprettholde konsekvent styling på tvers av alle innebygde skjemaer.

Finn ut mer om hvordan du definerer tilpasset styling for innebygde skjemaer ved hjelp av CSS.

Slik får du tilgang til utviklerkoden:

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold musepekeren over et skjema, og klikk på Rediger.
Klikk på Gjennomgå og oppdater øverst til venstre i skjemaredigeringsprogrammet.
I dialogboksen klikker du på Hent innebygd kode.
Klikk på fanen Utviklerkode (avansert).
Merk av for Jeg forstår risikoen, vis meg koden.
Klikk på Kopier.
Legg til skjemainnbyggingskoden på den eksterne siden. Når du har lagt inn skjemaet, kan du style skjemaet i det eksterne stilarket med CSS.
- CSS-variablene du kan overstyre, er listet opp i denne artikkelen .
- De globale stilene vil overstyre stilen på toppnivå på tvers av alle de innebygde skjemaene dine. Du kan også målrette mot enkeltelementer i skjemaene dine, for eksempel en rad med skjemaelementer, innsendingsknapper eller skjemaoverskrifter.