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.

Konfigurere og style et HubSpot-skjema på et eksternt nettsted

Sist oppdatert: mars 3, 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 koble til.

Med begge metodene vil endringer i skjemaet i HubSpots skjemaverktøy automatisk gjenspeiles i det aktive skjemaet på det eksterne nettstedet. Når du har lagt til skjemaet, kan du style det innebygde HubSpot-skjemaet på de eksterne sidene i skjemaredigeringsprogrammet eller med CSS i det eksterne stilarket.

Hvis du arbeider med WordPress, kan du finne ut hvordan du setter inn et skjema i WordPress-innlegget eller -siden.

Merk: Fra og med 16. mai 2024 må domenet for siden legges til som et nettstedsdomene for å bli behandlet som et klarert domene når du legger til innebygd skjemakode på en ekstern side. Hvis ikke, vil innsendinger til skjemaet også bli filtrert til søppelpostinnsendinger.

Legg til innebygd skjemakode

For å få tilgang til innebygd skjemakode:

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold markøren over et skjema og klikk på Handlinger > Del.
Hvis du vil legge til kontakter som sender skjemaet til 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, endres skjemaets innebygde kode. 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 må HubSpot-sporingskoden være installert på den eksterne siden der du plasserer et HubSpot-skjema.

Opprett en frittstående skjemaside

Du kan også dele skjemaet ditt via Del-koblingen. I en Del-kobling vises skjemaet på en frittstående side på sin egen nettadresse. Denne delingskoblingen kan ikke skjules eller gjøres privat. Alle med delingskoblingen vil kunne få tilgang til skjemaet.

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

Style det innebygde skjemaet i skjemaredigereren

Når du utformer det innebygde skjemaet med HubSpot skjemaredigering, kan du enten bruke et tema eller bruke din egen egendefinerte stil.

Merk: Temaer og stiler som er angitt i skjemaredigereren, gjelder bare for innebygde skjemaer eller frittstående skjemasider. Skjemaer på HubSpot-sidene kan bare stiliseres med skjemamodulens stilalternativer i innholdsredigeringsprogrammet.

Style skjemaet ditt med et tema (eldre)

Hvis du vil style det gamle skjemaet uten å skrive egendefinert kode, kan du bruke forhåndsinnstilte temaer på den innebygde skjemasiden eller den frittstående skjemasiden. Disse temaene legger til flere tilpasningsalternativer i skjemaene, i tillegg til eventuelle globale skjemastilinnstillinger.

For å style skjemaet ditt med et tema:

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold markøren over et skjema og klikk på Rediger.
Klikk på fanen Stil og forhåndsvisning i skjemaredigereren.
Hvis du redigerer et eldre skjema, fjerner du merket for Behold gammelt tema i ruten til venstre. Dette vil fjerne den tidligere standard HubSpot-stylingen som ble brukt på dette skjemaet. Eventuelle egendefinerte CSS-er eller JavaScript-er du har lagt til i skjemaet, vil ikke lenger fungere. Denne avmerkingsboksen gjelder ikke for nye skjemaer som er opprettet i kontoen din.
Velg et tema.
Klikk på Publiser eller Oppdater øverst til høyre.

Bruk en egendefinert stil

Du kan også formatere skjemaer på et mer detaljert nivå.

Slik bruker du en egendefinert stil:

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold markøren over et skjema og klikk på Rediger.
Hvis du redigerer et eldre skjema og har et abonnement på Marketing Hub Starter, Professional eller Enterprise, klikker du på fanen Stil og forhåndsvisning i skjemaredigeringsprogrammet.
- Klikk på Stil-delen i ruten til venstre. Her kan du konfigurere skjemafeltbredde, skriftfamilie, skriftstørrelser, skriftfarger og skjemaknapp. Disse stilene settes på individuell skjemabasis og vil overstyre globale skjemastilinnstillinger.
- Når du har tilpasset skjemaet, klikker du på Publiser eller Oppdater øverst til høyre.

Hvis du bruker den oppdaterte skjemaredigereren, klikker du på Styling-ikonet til venstre.
- Når du tilpasser tekstfelt , inndatafelt eller knapp, kan du velge mellom eksisterende stiler ved hjelp av hurtigfeltinndatastilene. Du kan også tilpasse stilen manuelt for hver komponent i skjemaet:
  - Felt: Tilpass feltet, inkludert bakgrunn og kantlinjer. Du kan også tilpasse skrifttype, skriftstørrelse og farger for etikettene, i tillegg til fargene for hjelpetekst, plassholdere og feiltekst.
  - Knapper: Tilpass knappens høyde, hjørneavrunding, bakgrunn, gradient, og legg til en skygge på knappen. Du kan også tilpasse skrift, skriftstørrelse og farge for knappeteksten.
  - Avsnitt (rik tekst): Tilpass skrifttype, skriftstørrelse og farge for brødteksten.
  - Overskrift: Tilpass skrifttypen og tekstfargen på overskriften. Du kan velge å legge til skygge i overskriftsteksten.
  - Bakgrunn: Tilpass bakgrunnen for skjemaet og skjematrinnene. Du kan velge å angi en bakgrunnsfarge eller bruke et bilde for bakgrunnen. Du kan bruke AI-assistenter til å generere bilder. Du kan også velge å angi en kantlinje for skjemaet.
  - Fremdriftslinje: Tilpass fremdriftslinjen i skjemaet, inkludert fargen på fremdriftslinjen og skrifttypen på fremdriftslinjen.

Style det innebygde skjemaet med CSS i det eksterne stilarket (eldre)

Hvis du har et abonnement på Marketing Hub eller Content Hub Professional eller Enterprise med HubSpot-kontoen din, kan du bygge inn det gamle skjemaet som et rått HTML-skjema og deretter style dette innebygde skjemaet med CSS i det eksterne stilarket.

Merk: Du kan bare angi eldre skjemaer som rå HTML.

For å style det innebygde skjemaet med CSS:

I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
Hold markøren over et skjema og klikk på Rediger.
Klikk på fanen Stil og forhåndsvisning i skjemaredigereren.
Klikk for å slå på Set as raw HTML skjemabryteren. Skjemaet gjengis som et rått HTML-element på den eksterne siden i motsetning til inne i en iframe, og eventuell standard HubSpot-styling som brukes på skjemaet, fjernes.
Klikk på Publiser eller Oppdater øverst til høyre.
Legg til innebygd skjemakode på den eksterne siden. Hvis du allerede har innebygd skjemaet, må du erstatte den eksisterende innebygde koden med denne nye versjonen uten stil. Etter å ha bygget inn skjemaet ditt:
- Du vil kunne style skjemaet i det eksterne stilarket med CSS.
- Du kan også endre innebyggingskoden for skjemaet for å gjøre flere skjematilpasninger. Ettersom HubSpot-skjemaer bygges med JavaScript, ikke HTML, krever tilpassing av den innebygde skjemakoden hjelp fra en utvikler som vet hvordan man arbeider med JavaScript

Var denne artikkelen nyttig? Ja Nei

Dette skjemaet brukes kun for tilbakemeldinger om dokumentasjon. Se hvordan du kan få hjelp med HubSpot.