Senast uppdaterad: 5 augusti 2026
Använd HubSpot-formulär på din externa webbplats för att samla in leads och automatiskt synkronisera kontaktuppgifter till ditt HubSpot-konto. Du kan anpassa utseendet på ditt formulär i HubSpot och använda inbäddningskoden för att lägga till det på din webbplats. Du kan också använda en delningslänk för att skicka ett fristående formulär till din målgrupp.
Genom att bädda in ett formulär säkerställer du att inskickade uppgifter synkroniseras direkt till ditt HubSpot-konto, där du kan hantera kontakter, utlösa automatiseringar och analysera resultatet. Du kan till exempel lägga till ett HubSpot-formulär på en produktsida på ditt företags webbplats för att samla in förfrågningar om demonstrationer och följa upp med ett automatiserat e-postmeddelande.
Om ditt formulär skapades i den äldre formulärredigeraren kan du läsa om hur du konfigurerar och utformar ett äldre formulär på en extern webbplats.
Innan du börjar
Innan du börjar arbeta med den här funktionen bör du läsa igenom de tekniska kraven och övervägandena för att använda formulär på externa webbplatser.
Krav
Behörigheter krävs Behörighet att redigera formulär krävs för att skapa eller redigera ett formulär.
- För att spåra statistik för ditt inbäddade formulär måste du installera HubSpots spårningskod på din externa sida.
- När du bäddar in ett HubSpot-formulär på en extern webbplats måste du lägga till webbplatsens domän i dina spårningsinställningar. Formulärinlämningar från domäner som inte har lagts till kommer att markeras som skräppost.
Begränsningar och överväganden
- Det går inte att ställa in ditt formulär som ett rått HTML-formulär i den uppdaterade formulärredigeraren. Endast formulär som skapats med den äldre formulärredigeraren kan ställas in som rått HTML.
- För att anpassa ett formulärs inbäddningskod krävs hjälp av en utvecklare som kan arbeta med JavaScript. Mer avancerad anpassning kan göras med ett skräddarsytt formulär och HubSpot Forms API.
Utforma ditt formulär
Anpassa texten, inmatningsfälten, knapparna och bakgrunden för ditt formulär och formulärstegen. Anpassningar av formulärstilen tillämpas på alla formulärsteg. Du kan inte utforma enskilda formulärsteg separat.
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > Formulär. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > Formulär.
- Skapa ett nytt formulär eller håll muspekaren över ett befintligt formulär och klicka på Redigera.
- I menyn i vänster sidfält klickar du på ikonen ” -stil”.
- I panelen Formulärstilar kan du anpassa följande komponenter:
- Fält: anpassa fältet, inklusive bakgrund och kantlinjer. Du kan också anpassa teckensnitt, teckenstorlek och färger för dina etiketter, samt färgerna för hjälptext, platshållare och feltext.
- Knappar: Anpassa knappens höjd, rundade hörn, bakgrund och färgövergång samt lägg till en skugga på knappen. Du kan även anpassa teckensnitt, teckenstorlek och färg för knapptexten.
- Stycke (rik text): Anpassa teckensnitt, teckenstorlek och färg för din brödtext.
- Rubrik: Anpassa teckensnitt och textfärg för din rubrik. Du kan välja att lägga till en skugga till din rubriktext.
- Bakgrund: Anpassa bakgrunden för ditt formulär och formulärstegen. Du kan välja att ställa in en bakgrundsfärg eller använda en bild som bakgrund. Du kan använda AI-assistenter för att generera bilder. Du kan också välja att lägga till en ram runt ditt formulär.
- Förloppsindikator: Anpassa förloppsindikatorn i ditt formulär, inklusive färgen på förloppslinjen och teckensnittet för förloppsindikatorn.
Dela en fristående formulärsida
Använd en delningslänk för att visa ditt formulär på en fristående sida. Alla som har delningslänken kan komma åt formuläret. Delningslänkarna genereras automatiskt och kan inte redigeras eller anpassas.
Så här kopierar du delningslänken:
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > Formulär. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > Formulär.
- Hå ll muspekaren över ett formulär och klicka på Redigera.
- Klicka på Granska och uppdatera längst upp till höger.
- Klicka på Uppdatera längst ned i den högra panelen.
- Klicka på Kopiera en delningslänk i dialogrutan.
- Klicka längst ned på Kopiera. Då kopieras sidans webbadress till urklipp.
- Öppna ett nytt fönster eller en ny flik i webbläsaren och klistra in sidans URL i adressfältet för att ladda den. Du kan också dela formulärsidans URL direkt med andra för att ge dem åtkomst till formuläret.
Kopiera inbäddningskoden för formuläret
Bädda in formuläret på din externa sida genom att kopiera inbäddningskoden och klistra in den på din externa sida. För att spåra statistik för ditt inbäddade formulär måste din HubSpot-spårningskod vara installerad på den externa sidan där du bäddar in HubSpot-formuläret.
Så här kopierar du inbäddningskoden:
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > Formulär. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > Formulär.
- Håll muspekaren över ett formulär och klicka på Redigera.
- Klicka på Granska och uppdatera längst upp till höger.
- Klicka på Uppdatera längst ned i den högra panelen.
- Klicka på Hämta inbäddningskod i dialogrutan.
- Klicka på Kopiera på fliken Inbäddningskod.
- Klistra in inbäddningskoden i HTML-modulen på din externa sida.
Öppna formulärutvecklarens kod
Prenumeration krävs Ett Marketing Hub- eller Content Hub Professional- eller Enterprise-abonnemang krävs för att få åtkomst till formulärutvecklarkoden.
Bädda in ditt formulär och anpassa utseendet med hjälp av CSS i ditt externa stilark. Med den här metoden kan du åsidosätta standardstilar, tillämpa detaljerad formatering på specifika formulärelement och ställa in globala regler för enhetlig formatering i alla dina inbäddade formulär. Läs mer om hur du definierar anpassad formatering för inbäddade formulär med hjälp av CSS.
Så här får du tillgång till utvecklarkoden:
- I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > Formulär. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > Formulär.
- Håll muspekaren över ett formulär och klicka på Redigera.
- Klicka på Granska och uppdatera längst upp till höger.
- Klicka på Uppdatera längst ned i den högra panelen.
- Klicka på Hämta inbäddningskod i dialogrutan.
- Klicka på fliken Utvecklarkod (Avancerat).
- Om du accepterar risken att ändringar som görs externt i CSS eller JavaScript kan leda till att formuläret slutar fungera, markerar du kryssrutan Jag förstår riskerna, visa koden.
- Klicka på Kopiera längst ned.
- Lägg till formulärets inbäddningskod på din externa sida. När du har bäddat in formuläret kan du formatera det i ditt externa stilark med CSS.
- De CSS-variabler som du kan åsidosätta listas i den här artikeln.
- Globala stilar kommer att åsidosätta formateringen på högsta nivå i alla dina inbäddade formulär. Du kan också rikta in dig på enskilda element i dina formulär, till exempel en rad med formulärelement, skicka-knappar eller formulärrubriker.
