Utforme og bygge inn HubSpot-skjemaer på et eksternt nettsted

Bruk HubSpot-skjemaer på ditt eksterne nettsted for å fange opp potensielle kunder og automatisk synkronisere kontaktdata til HubSpot-kontoen din. Du kan utforme skjemaet i HubSpot og bruke skjemaets innebygde kode for å legge det til på nettstedet ditt. Eller bruk en delingslenke for å sende et frittstående skjema til målgruppen din.

Når du bygger inn et skjema, synkroniseres innsendingene direkte med HubSpot-kontoen din, der du kan administrere kontakter, utløse automatisering og analysere resultatene. Du kan for eksempel legge til et HubSpot-skjema på en produktside på bedriftens nettsted for å fange opp demoforespørsler og følge opp med en automatisert e-post.

Hvis skjemaet ditt ble opprettet i redigeringsprogrammet for eldre skjemaer, kan du lære hvordan du konfigurerer og utformer et eldre skjema på et eksternt nettsted.

Før du kommer i gang

Før du begynner å jobbe med denne funksjonen, bør du gå gjennom de tekniske kravene og hensynene ved bruk av skjemaer på eksterne nettsteder.

Tekniske krav

• Når du legger inn et HubSpot-skjema på et eksternt nettsted, må du legge til nettstedets domene i sporingsinnstillingene dine. Skjemainnsendinger fra domener som ikke er lagt til, vil bli merket som søppelpost.
• For å spore analyser på det innebygde skjemaet må du installere HubSpot-sporingskoden på den eksterne siden.
  

Begrensninger og hensyn

• Det er ikke mulig å angi skjemaet som et rå-HTML-skjema i den oppdaterte skjemaredigeringsprogrammet. Bare skjemaer som er laget med den gamle skjemaredigeringsprogrammet, kan angis som rå HTML.
• Tilpasning av et skjemas innebygde kode krever hjelp fra en utvikler som kan jobbe med JavaScript. Mer avansert tilpasning kan gjøres med et spesialbygd skjema og HubSpot Forms API.

Utform skjemaet ditt

Tilpass teksten, inndatafeltene, knappene og bakgrunnen for skjemaet og skjematrinnene. Skjemaets stiltilpasninger brukes på alle skjematrinn. 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. I Skjemastiler-panelet kan du tilpasse følgende komponenter:
   • 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.

Del en frittstående skjemaside

Bruk en delingslenke til å vise skjemaet på en frittstående side. Alle som har delingslenken, kan få tilgang til skjemaet. Delingslenken kan ikke skjules eller gjøres privat.

Slik kopierer du delingslenken:

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å Kopier en delingslenke.
6. Nederst klikker du på Kopier. Dette kopierer sidens nettadresse til utklippstavlen.
7. Åpne et nytt vindu eller en ny fane i nettleseren din, og lim inn sidens URL i adressefeltet for å laste den inn. Du kan også dele URL-adressen til skjemasiden direkte med andre for å gi dem tilgang til skjemaet.

Kopier den innebygde koden for skjemaet

Legg inn skjemaet 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 kopierer du 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.

Få tilgang til skjemautviklerkoden

Legg inn skjemaet og tilpass stilen ved hjelp av CSS i det eksterne stilarket ditt. 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 innebygd kode.
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.