Sette opp og style et HubSpot-skjema på et eksternt nettsted (legacy)

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 dusetter inn et skjema i et WordPress-innlegg eller -side.

Merk: Det anbefales å bruke den oppdaterte sk jemaredigereren til å opprette og administrere skjemaer. Denne artikkelen bør kun brukes som en referanse for eksisterende skjemaer som er laget med den eldre redigeringsprogrammet. Finn ut mer om utforming av skjemaer på et eksternt nettsted.

Legg til koden for skjemainnbygging

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

• 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 URL-adressen til skjemasiden 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 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 vil style det gamle skjemaet ditt 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 markøren 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

Du kan også style 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.
• Hvis du har et Marketing Hub Starter-, Professional- eller Enterprise-abonnement , klikker du på fanen Stil og forhåndsvisning i redigeringsverktøyet for skjemaer.
  • I venstre rute klikker du påStil-delen. Her kan du konfigurere skjemafeltbredde, skriftfamilie, 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.
    
    

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

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

Merk: Du kan bare angi eldre skjemaer som rå HTML. Finn ut mer om hvordan du utformer det innebygde skjemaet med CSS i den oppdaterte skjemaredigereren.

Slik utformer 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