Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.

Konfigurera och utforma ett HubSpot-formulär på en extern webbplats

Senast uppdaterad: 30 april 2025

Tillgänglig med något av följande abonnemang, om inte annat anges:

Alla produkter och planer

När du har skapat ett formulär i HubSpot kan du lägga till det på HubSpot-sidor eller sidor som du har skapat utanför HubSpot. Formulär kan delas på din externa, icke-HubSpot-hostade webbplats genom att antingen:

Bädda in formulärkoden på en befintlig sida.
Skapa en fristående formulärsida som du kan länka till.

Med båda metoderna kommer ändringar som görs i formuläret i HubSpots formulärverktyg automatiskt att återspeglas i liveformuläret på din externa webbplats. När du har lagt till ditt formulär kan du utforma ditt inbäddade HubSpot-formulär på dina externa sidor i formulärredigeraren eller med CSS i din externa stilmall.

Observera: det är inte möjligt att ställa in ditt formulär som rå HTML i den uppdaterade redigeraren. Endast formulär som byggts med den äldre editorn kan ställas in som rå HTML.

Styla ditt formulär

Anpassa text, inmatningsfält, knappar och bakgrund för formuläret och formulärstegen. De stilalternativ som konfigureras på fliken Global stil tillämpas på alla formulärsteg. Du kan inte styla enskilda formulärsteg separat.

I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
Skapa ett nytt formulär eller håll muspekaren över ett befintligt formulär och klicka på Redigera .
Klicka på ikonen Styling på vänster sida.

style-your-form

När du anpassar text, inmatningsfält eller knappar kan du välja bland befintliga stilar med hjälp av inmatningsstilarna för snabbfält. Alternativt kan du manuellt anpassa stilen för varje komponent i ditt formulär:
- Fält: Anpassa fältet, inklusive bakgrund och ramar. Du kan också anpassa teckensnitt, teckenstorlek och färger för dina etiketter, liksom färgerna för din hjälptext, platshållare och feltext.
- Knappar: Anpassa knappens höjd, hörnavrundning, bakgrund, gradient och lägg till en droppskugga på knappen. Du kan också anpassa teckensnitt, teckenstorlek och färg för knapptexten.
- Paragraf (Rich Text): anpassa teckensnitt, teckenstorlek och färg för brödtexten.
- Rubrik: Anpassa teckensnitt och textfärg för rubriken. Du kan välja att lägga till en slagskugga i rubriktexten.
- Bakgrund: Anpassa bakgrunden för formuläret och formulärstegen. Du kan välja att ange 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 ange en kant för ditt formulär.
- Förloppsfält: anpassa förloppsfältet på ditt formulär, inklusive färgen på förloppslinjen och teckensnittet för förloppsfältet.

Lägg till formulärets inbäddningskod

För att komma åt formulärets inbäddningskod:

I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
Håll muspekaren över ett formulär och klicka på Åtgärder > Dela.
Klicka på fliken Inbäddningskod.
Om du vill lägga till kontakter som skickar in formuläret i en Salesforce-kampanj klickar du i dialogrutan på rullgardinsmenyn Lägg till kontakter i en Salesforce-kampanj och väljer en kampanj. Om du kopplar en Salesforce-kampanj till ditt formulär kommer formulärets inbäddningskod att ändras. I så fall måste du lägga till inbäddningskoden på nytt på din externa webbplats.
Klicka på Kopiera.
Klistra in inbäddningskoden i HTML-modulen på din externa sida. För att spåra analyser för ditt formulär måste din HubSpot-spårningskod installeras på den externa sidan där du placerar ett HubSpot-formulär.

get your hubspot form embded code

Skapa en fristående formulärsida

Du kan också dela ditt formulär via länken Dela. I en Share-länk visas formuläret på en fristående sida med en egen URL. Denna delningslänk kan inte döljas eller göras privat. Alla som har delningslänken kommer att kunna komma åt formuläret.

I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
Håll muspekaren över ett formulär och klicka på Åtgärder > Dela.
I dialogrutan klickar du på fliken Dela länk .
Klicka på Kopiera för att kopiera formulärsidans URL till ditt urklipp.
I webbläsaren öppnar du ett nytt fönster eller en ny flik och klistrar in formulärsidans URL i adressfältet för att ladda den. Du kan också dela formulärsidans URL direkt med andra för att ge dem tillgång till formuläret.

Styla ditt inbäddade formulär med CSS i din externa stilmall

Om du har en Marketing Hub- eller Content Hub Professional- eller Enterprise-prenumeration med ditt HubSpot-konto kan du bädda in formulär och utforma dem med CSS i din externa stilmall.

Du kan åsidosätta standardstilar och tillämpa detaljerad styling på specifika formulärelement, samt ställa in globala regler för att upprätthålla konsekvent styling över alla inbäddade formulär.

Läs mer om hur du definierar anpassad styling 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 navigerar du till Marknadsföring > Formulär.
Håll muspekaren över ett formulär och klicka på Redigera.
I formulärredigeraren klickar du på Granska och uppdatera längst upp till vänster.
Klicka på Hämta inbäddningskod i dialogrutan.
Klicka på fliken Utvecklarkod (Avancerat).
Markera kryssrutan Jag förstår riskerna, visa mig koden.
Klicka på Kopiera.
Lägg till formulärets inbäddningskod på din externa sida. När du har bäddat in formuläret kan du formatera formuläret i din externa stilmall med CSS.
- De CSS-variabler som du kan åsidosätta listas i den här artikeln .
- De globala stilarna kommer att åsidosätta styling på toppnivå över alla dina inbäddade formulär. Du kan också rikta in dig på enskilda element i dina formulär, till exempel en formulärelementrad, skicka-knappar eller formulärrubriker.