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

Når du har opprettet et skjema i HubSpot, kan du legge det til på HubSpot-sider eller sider du har opprettet utenfor HubSpot. Hvis innholdet ditt ligger utenfor HubSpot, kan du legge til skjemaer med følgende metoder:

• Bygg innskjemaet ved å kopiere innbyggingskoden og legge den til på den eksterne siden.
• Bruk skjemaets delingslenke, som tilbyr en frittstående nettside for skjemaet ditt som du kan lenke til.

Med begge metodene vil endringer som gjøres i skjemaet, automatisk oppdateres på det live-skjemaet på det eksterne nettstedet ditt. Du kan style det innebygde HubSpot-skjemaet i skjemaredigeringsprogrammet eller med CSS i det eksterne stilarket ditt.

Før du kommer i gang

• Hvis du vil angi skjemaet ditt som et rå-HTML-skjema, er dette alternativet ikke tilgjengelig i den oppdaterte skjemaredigeringsprogrammet. Bare skjemaer som er laget med den gamle skjemaredigereren, kan angis som rå HTML.
• Hvis du legger inn HubSpot-skjemaet på en ekstern side, må du installere Hub Spot-sporingskoden for å spore analyser. Finn ut hvordan du installerer HubSpot-sporingskoden.

Utform skjemaet ditt

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

1. I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
2. Opprettet nytt skjema, eller hold musepekeren over et eksisterende skjema og klikk på Rediger .
3. Klikk på ikonet styles Styling i menyen til venstre.
4. Du kan tilpasse stilen for følgende skjemakomponenter:
   • 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.

Kopier skjemaets innebygde kode

Du kan bygge inn HubSpot-skjemaet ditt på den eksterne siden ved å kopiere skjemainnbyggingskoden og lime den inn på den eksterne siden. For å spore analyser for det innebygde skjemaet må HubSpot-sporingskoden være installert på den eksterne siden der du bygger inn HubSpot-skjemaet.

Slik får du tilgang til den innebygde koden:

1. I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
2. Hold markøren over et skjema og klikk på Rediger.
3. Klikk på Gjennomgå og oppdater øverst til høyre.
4. Klikk på Oppdater nederst i høyre panel.
5. I dialogboksen klikker du på Hent innbyggingskode.
6. Klikk på Kopier i fanen Innebyggingskode.
7. Lim inn innbyggingskoden i HTML-modulen på den eksterne siden.

Bruk delingslenken til å dele en frittstående skjemaside

Du kan dele skjemaet ditt med delingslenken, som viser skjemaet på en frittstående nettside. Denne delingslenken kan ikke skjules eller gjøres privat. Alle som har delingslenken, vil ha tilgang til skjemaet.

Slik får du tilgang til delingslenken:

1. I HubSpot-kontoen din navigerer du 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 høyre panel.
5. I dialogboksen klikker du på Kopier en delingslenke.
6. Nederst klikker du på Kopier. Dette kopierer skjemasidens nettadresse til utklippstavlen.
7. Åpne et nytt vindu eller en ny fane i nettleseren din, og lim inn skjemasidens URL 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

Brukere med en Marketing Hub-, Content Hub Professional- eller Enterprise-konto kan bygge inn skjemaer og style dem ved hjelp av CSS i det eksterne stilarket. Med denne metoden kan du overstyre standardstiler, bruke detaljert styling på spesifikke skjemaelementer og angi globale regler for konsekvent styling på tvers av de innebygde skjemaene dine. Finn ut mer om hvordan du definerer tilpasset styling for innebygde skjemaer ved hjelp av CSS.

Slik får du tilgang til utviklerkoden:

1. I HubSpot-kontoen din navigerer du 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 høyre panel.
5. I dialogboksen klikker du på Hent innbyggingskode.
6. Klikk på fanen Utviklerkode (avansert).
7. Hvis du vil akseptere risikoen for at eksterne endringer i CSS eller JavaScript kan føre til at skjemaet ditt går i stykker, merker du av for Jeg forstår risikoen, vis meg koden.
8. Nederst klikker du på Kopier.
9. Legg til koden for skjemainnbygging 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.
   • Globale stiler 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.