Gå til innhold
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.

Utform og legg inn HubSpot-skjemaer på et eksternt nettsted

Sist oppdatert: 5 august 2026

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

Bruk HubSpot-skjemaer på din eksterne nettside for å registrere potensielle kunder og synkronisere kontaktopplysningene automatisk til HubSpot-kontoen din. Du kan tilpasse utseendet på skjemaet i HubSpot og bruke innleggingskoden for å legge det inn på nettsiden din. Eller bruk en delingslenke for å sende et frittstående skjema til målgruppen din.

Når du legger inn et skjema, sikres det at innsendingene synkroniseres direkte til HubSpot-kontoen din, der du kan administrere kontakter, utløse automatisering og analysere ytelsen. Du kan for eksempel legge til et HubSpot-skjema på en produktside på bedriftens nettsted for å registrere forespørsler om demoer og følge opp med en automatisert e-post.

Hvis skjemaet ditt ble opprettet i den gamle skjemaeditoren, kan du lære hvordan du konfigurerer og utformer et gammelt skjema på et eksternt nettsted.

Før du setter i gang

Før du begynner å bruke denne funksjonen, bør du gå gjennom de tekniske kravene og hensynene ved bruk av skjemaer på eksterne nettsteder.

Krav

Tillatelser påkrevd Du må ha redigeringsrettigheter for skjemaer for å kunne opprette eller redigere et skjema.

Begrensninger og hensyn

  • Det er ikke mulig å angi skjemaet som et rått HTML-skjema i den oppdaterte skjemaeditoren. Kun skjemaer som er laget med den gamle skjemaeditoren, kan angis som rått HTML.
  • For å tilpasse et skjemaets innebyggingskode trenger du hjelp fra en utvikler som kan arbeide med JavaScript. Mer avansert tilpasning kan gjøres med et skreddersydd skjema og HubSpot Forms API.

Utform skjemaet ditt

Tilpass tekst, inndatafelt, knapper og bakgrunn for skjemaet og skjemaets trinn. Tilpasninger av skjemaets utseende gjelder for alle trinn i skjemaet. Du kan ikke tilpasse utseendet på enkeltstående trinn separat.

  1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > Skjemaer. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Skjemaer.
  2. Opprett et nytt skjema, eller hold musepekeren over et eksisterende skjema og klikk på Rediger.
  3. I menyen i venstre sidepanel klikker du på ikonet « styles -stil».
  4. Fra panelet «Form styles » kan du tilpasse følgende komponenter:
    • Felter: Tilpass feltet, inkludert bakgrunn og rammer. Du kan også tilpasse skrift, skriftstørrelse og farger for etikettene, samt fargene for hjelpetekst, plassholdere og feilmeldinger.
    • Knapper: Tilpass knappens høyde, avrundede hjørner, bakgrunn og fargeovergang, og legg til en skyggelegging på knappen. Du kan også tilpasse skrifttypen, skriftstørrelsen og fargen på knappeteksten.
    • Avsnitt (rik tekst): Tilpass skrifttypen, skriftstørrelsen og fargen på brødteksten.
    • Overskrift: Tilpass skrifttypen og tekstfargen til overskriften din. Du kan velge å legge til en skyggelegging på overskriftsteksten.
    • Bakgrunn: Tilpass bakgrunnen for skjemaet og skjemaets trinn. Du kan velge å angi en bakgrunnsfarge eller bruke et bilde som bakgrunn. Du kan bruke AI-assistenter til å generere bilder. Du kan også velge å angi en ramme for skjemaet.
    • Fremdriftslinje: Tilpass fremdriftslinjen i skjemaet ditt, inkludert fargen på fremdriftslinjen og skrifttypen til fremdriftslinjen.

The form editor with the left panel displaying styles options, including branding, fields, buttons, paragraph, heading, background, and the progress bar.

Del en frittstående skjema-side

Bruk en delingslenke for å vise skjemaet ditt på en egen side. Alle som har delingslenken, kan få tilgang til skjemaet. URL-adressene til delingslenkene genereres automatisk og kan ikke redigeres eller tilpasses.

Slik kopierer du delingslenken:

  1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > Skjemaer. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Skjemaer.
  2. Hold musepekeren over et skjema, og klikk på Rediger.
  3. Øverst til høyre klikker du på Gjennomgå og oppdater.
  4. Klikk på Oppdater nederst i panelet til høyre.
  5. I dialogboksen klikker du på Kopier en delingslenke.
  6. Klikk på Kopier nederst. Dette kopierer sidens nettadresse til utklippstavlen.
  7. Åpne et nytt vindu eller en ny fane i nettleseren din, og lim inn sidens URL i adressefeltet for å laste den inn. Du kan også dele URL-en til skjemaet direkte med andre for å gi dem tilgang til skjemaet.
The form editor share options, highlighting the option to copy the form share link.

Kopier innleggingskoden for skjemaet

Legg inn skjemaet på en ekstern side ved å kopiere innleggingskoden og lime den inn på den eksterne siden. For å spore statistikk for det innlagte skjemaet må HubSpot-sporingskoden være installert på den eksterne siden der du legger inn HubSpot-skjemaet.

Slik kopierer du innleggingskoden:

  1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > Skjemaer. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Skjemaer.
  2. Hold musepekeren over et skjema og klikk på Rediger.
  3. Klikk på Gjennomgå og oppdater øverst til høyre.
  4. Klikk på «Oppdater» nederst i panelet til høyre.
  5. I dialogboksen klikker du på «Hent innebyggingskode».
  6. Klikk på Kopier på fanen Innbyggingskode.
  7. Lim inn innleggingskoden i HTML-modulen på den eksterne siden din.
The form editor share options, highlighting the option to copy the form embed code.

Få tilgang til utviklerkoden for skjemaet

Abonnement påkrevd Du må ha et Marketing Hub- eller Content Hub Professional- eller Enterprise-abonnement for å få tilgang til utviklerkoden for skjemaet.

Legg inn skjemaet ditt og tilpass stilen ved hjelp av CSS i det eksterne stilarket ditt. Med denne metoden kan du overstyre standardstiler, bruke detaljert styling på bestemte skjemaelementer og angi globale regler for ensartet styling på tvers av de innlagte skjemaene dine. Les mer om hvordan du definerer tilpasset styling for innlagte skjemaer ved hjelp av CSS.

Slik får du tilgang til utviklerkoden:

  1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Markedsføring > Skjemaer. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Markedsføring > Skjemaer.
  2. Hold musepekeren over et skjema og klikk på Rediger.
  3. Klikk på Gjennomgå og oppdater øverst til høyre.
  4. Klikk på Oppdater nederst i panelet til høyre.
  5. I dialogboksen klikker du på «Hent innebyggingskode».
  6. Klikk på fanen Utviklerkode (Avansert).
  7. Hvis du aksepterer risikoen for at endringer gjort eksternt i CSS eller JavaScript kan føre til at skjemaet slutter å fungere, merker du av for Jeg forstår risikoen, vis meg koden.
  8. Klikk på «Kopier» nederst.
  9. Legg til innbyggingskoden for skjemaet på den eksterne siden din. Etter at du har lagt inn skjemaet, kan du formatere det i det eksterne stilarket ditt med CSS.
    • CSS-variablene du kan overstyre, er oppført i denne artikkelen.
    • Globale stiler vil overstyre stiler på øverste nivå i alle dine innebygde skjemaer. Du kan også målrette mot enkeltelementer i skjemaene dine, for eksempel en rad med skjemaelementer, sendeknapper eller skjemaoverskrifter.
The form editor share options, highlighting the option to copy the form developer code.

Var denne artikkelen nyttig?
Dette skjemaet brukes kun for tilbakemeldinger om dokumentasjon. Se hvordan du kan få hjelp med HubSpot.