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. 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.

Hvis du jobber med WordPress, kan du lære hvordan du setter inn et skjema i etWordPress-innlegg eller -side.

Merk: Fra og med 16. mai 2024 må domenet for siden legges til som et nettsteddomene for å bli behandlet som et betrodd domene når du legger til skjemainnbyggingskoden på en ekstern side. Hvis ikke vil innsendinger til skjemaet også bli filtrert til søppelposten din.

Legg til den innebygde koden for skjemaet

• I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
• Hold musepekeren over et skjema, og klikk på Handlinger > Del.
• 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.

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.
  
  

Utform det innebygde skjemaet i skjemaredigeringsprogrammet

Når du utformer det innebygde skjemaet ditt med HubSpots skjemaredigeringsprogram, kan du enten bruke et tema eller bruke din egen tilpassede stil.

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

Styl skjemaet ditt med et tema

Hvis du ønsker å style skjemaene dine uten å skrive noen tilpasset 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 utformer du skjemaet ditt med et tema:

• I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
• Hold musepekeren over et skjema, og klikk på Rediger.
• Klikk på fanen Stil og forhåndsvisning i skjemaredigeringsprogrammet.
• Hvis du redigerer et eldre skjema, fjerner du avmerkingen for Behold gammelt tema i venstre rute. Dette vil fjerne den tidligere standard HubSpot-stilen som ble brukt på dette skjemaet. Eventuell tilpasset CSS eller JavaScript du har lagt til i skjemaet, vil ikke lenger fungere. Denne avkrysningsboksen gjelder ikke for nye skjemaer som opprettes i kontoen din.
• Velg et tema.
• Klikk på Publiser eller Oppdater øverst til høyre.

Bruk en egendefinert stil

Hvis du har et Marketing Hub Starter-, Professional- eller Enterprise-abonnement med HubSpot-kontoen din, kan du også style innebygde skjemaer på et mer detaljert nivå.

Slik bruker du en egendefinert stil:

• I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
• Hold musepekeren over et skjema, og klikk på Rediger.
• Klikk på fanen Stil og forhåndsvisning i skjemaredigeringsprogrammet.
• Klikk påStil-delen i venstre rute. Her kan du konfigurere skjemafeltbredde, skriftfamilie, skriftstørrelser, skriftfarger og skjemaknapp. Disse stilene angis for hvert enkelt skjema og vil overstyre de globale innstillingene for skjemastil.
• Når du har tilpasset skjemaet, klikker du på Publiser eller Oppdater øverst til høyre.
  
  

Stil det innebygde skjemaet med CSS i det eksterne stilarket

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

Slik formaterer du det innebygde skjemaet med CSS:

• I HubSpot-kontoen din navigerer du til Markedsføring > Skjemaer.
• Hold musepekeren over et skjema, og klikk på Rediger.
• Klikk på Stil og forhåndsvisning-fanen i skjemaredigeringsprogrammet.
• Klikk for å slå på Set as raw HTML form -bryteren. Skjemaet vil bli gjengitt som et rå HTML-element på den eksterne siden i stedet for i en iframe, og all standard HubSpot-styling som er brukt på skjemaet, vil bli fjernet.
• Klikk på Publiser eller Oppdater øverst til høyre.
• Legg til koden for skjemainnbygging på den eksterne siden. Hvis du allerede har lagt inn skjemaet ditt, må du erstatte den eksisterende innbyggingskoden med denne nye, ustilte versjonen. Etter at du har lagt inn skjemaet:
  
  • Du kan style skjemaet i det eksterne stilarket med CSS.
  • Du kan også endre den innebygde sk jemakoden for å gjøre ytterligere skjematilpasninger. Ettersom HubSpot-skjemaer er bygget med JavaScript, ikke HTML, krever tilpasning av skjemainnbyggingskoden hjelp fra en utvikler som vet hvordan man jobber med JavaScript