Konfigurere og style et HubSpot-skjema på et eksternt nettsted
Sist oppdatert: juni 28, 2023
Gjelder for:
|
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å et eksternt nettsted som ikke er hostet i HubSpot:
- Bygge inn skjemakoden på en eksisterende side.
- Opprette en frittstående skjemaside som du kan lenke til.
Uansett hvilken av disse metodene du bruker, vil endringer som gjøres i skjemaet i HubSpots skjemaverktøy automatisk gjenspeiles i skjemaet på det eksterne nettstedet. Når du har lagt til skjemaet, kan du style det innebygde HubSpot-skjemaet på de eksterne sidene i skjemaredigeringsverktøyet eller med CSS i det eksterne stilarket.
Hvis du bruker WordPress, kan du lese mer om hvordan du legger innet skjema i et WordPress-innlegg eller på en WordPress-side.
Legg til koden for skjemainnbygging
Slik får du tilgang til skjemainnbyggingskoden:- Naviger til Markedsføring > Leadoppfanging > Skjemaer i HubSpot-kontoen din.
- Hold markøren over et skjema, og klikk på Handlinger > Del.
- Hvis du vil legge til kontakter som sender inn skjemaet i en Salesforce-kampanje, klikker du på rullegardinmenyen Legg til kontakter i en Salesforce-kampanje i dialogboksen og velger en kampanje. Hvis du knytter en Salesforce-kampanje til skjemaet, endres skjemaets innebygde kode. I så fall må du legge til innbyggingskoden på nytt på det eksterne nettstedet.
- Klikk på Kopier.
- Lim inn integreringskoden i HTML-modulen på den eksterne siden. Hvis du vil spore analyser for skjemaet ditt, må HubSpot-sporingskoden være installert på den eksterne siden der du plasserer et HubSpot-skjema.
Opprette en frittstående skjemaside
Du kan også dele skjemaet ditt via Del-lenken. I en delekobling vises skjemaet på en frittstående side med en egen URL-adresse. Denne delingslenken kan ikke skjules eller gjøres privat. Alle med delingslenken vil ha tilgang til skjemaet.
- Naviger til Markedsføring > Leadoppfanging > Skjemaer i HubSpot-kontoen din.
- Hold musepekeren over et skjema og klikk på Handlinger > Del.
- Klikk på fanen Delingskobling i dialogboksen.
- Klikk på Kopier for å kopiere skjemasidens URL 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.
Utform det innebygde skjemaet i skjemaredigeringsprogrammet
Når du skal utforme det innebygde skjemaet i HubSpots skjemaredigeringsprogram, kan du enten bruke et tema eller legge til din egen stil.
Væroppmerksom på at temaer og stiler som er angitt i skjemaredigeringsprogrammet, bare gjelder for innebygde skjemaer eller frittstående skjemasider. Skjemaer på HubSpot-sidene dine kan bare utformes med skjemamodulens stilalternativer i innholdsredigeringsprogrammet.
Tilpasse skjemaet ditt med et tema
Hvis du vil utforme skjemaene dine uten å skrive egen kode, kan du bruke forhåndsinnstilte temaer på det innebygde skjemaet eller den frittstående skjemasiden. Disse temaene gir flere tilpasningsmuligheter for skjemaene dine, i tillegg til eventuelle globale innstillinger for skjemastil.
Slik tilpasser du skjemaet ditt med et tema:
- Naviger til Markedsføring > Leadoppfanging > Skjemaer i HubSpot-kontoen din.
- Hold musepekeren over et skjema, og klikk på Rediger.
- I skjemaredigeringsprogrammet klikker du på fanen Stil og forhåndsvisning .
- Hvis du redigerer et eldre skjema, fjerner du merket for Behold gammelt tema i venstre rute. Dette fjerner den tidligere standard HubSpot-stylingen som ble brukt på dette skjemaet. Eventuell tilpasset CSS eller JavaScript du har lagt til i skjemaet, vil ikke lenger fungere. Denne avmerkingsboksen gjelder ikke for nye skjemaer som opprettes i kontoen din.
- Velg et tema.
- Klikk på Publiser eller Oppdater øverst til høyre.
Bruke en egendefinert stil
Hvis du har et Marketing Hub Starter-, Professional- eller Enterprise-abonnement med HubSpot-kontoen din, kan du også utforme innebygde skjemaer på et mer detaljert nivå.
Slik bruker du en egendefinert stil:
- Naviger til Markedsføring > Leadoppfanging > Skjemaer i HubSpot-kontoen din.
- Hold musepekeren over et skjema og klikk på Rediger.
- I skjemaredigeringsprogrammet klikker du på fanen Stil og forhåndsvisning .
- I venstre rute klikker du påStil-delen. Her kan du konfigurere skjemafeltbredde, skrifttype, skriftstørrelser, skriftfarger og skjemaknapp. Disse stilene angis for hvert enkelt skjema og overstyrer de globale innstillingene for skjemastil.
- Når du har tilpasset skjemaet, klikker du på Publiser eller Oppdater øverst til høyre.

Tilpasse det innebygde skjemaet med CSS i det eksterne stilarket ditt
Hvis du har et Marketing Hub - eller CMS Hub Professional- eller Enterprise-abonnement sammen med HubSpot-kontoen din, kan du bygge inn skjemaet som et HTML-skjema og deretter style det innebygde skjemaet med CSS i det eksterne stilarket.
Slik styler du det innebygde skjemaet med CSS:
- Naviger til Markedsføring > Leadoppfanging > Skjemaer i HubSpot-kontoen din.
- Hold musepekeren over et skjema og klikk på Rediger.
- I skjemaredigeringsprogrammet klikker du på fanen Stil og forhåndsvisning .
- Klikk på for å slå på Angi som rå HTML-skjema . Skjemaet gjengis da som et rå HTML-element på den eksterne siden i stedet for i en iframe, og eventuell standard HubSpot-styling som er brukt på skjemaet, fjernes.
- Klikk på Publiser eller Oppdater øverst til høyre.
- Legg til skjemainnbyggingskoden på den eksterne siden. Hvis du allerede har lagt inn skjemaet, må du erstatte den eksisterende innbyggingskoden med den nye, ustilte versjonen. Når du har innebygd skjemaet:
- Du kan style skjemaet i det eksterne stilarket ditt med CSS.
- Du kan også endre skjemaets innebygde kode for å gjøre ytterligere skjematilpasninger. Ettersom HubSpot-skjemaer er bygget med JavaScript, ikke HTML, må du få hjelp av en utvikler som vet hvordan man arbeider med JavaScript for å tilpasse skjemainnbyggingskoden.