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

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. Om ditt innehåll är hostat utanför HubSpot kan du lägga till formulär med följande metoder:

• Bädda in formul äret genom att kopierainbäddningskoden och lägga till den på din externa sida.
• Använd formulärets delningslänk, som erbjuder en fristående webbsida för ditt formulär som du kan länka till.

Med båda metoderna kommer ändringar som görs i formuläret automatiskt att uppdateras i liveformuläret på din externa webbplats. Du kan utforma ditt inbäddade HubSpot-formulär i formulärredigeraren eller med CSS i din externa stilmall.

Innan du sätter igång

• Om du vill ställa in ditt formulär som ett rå-HTML-formulär är det här alternativet inte tillgängligt i den uppdaterade formulärredigeraren. Endast formulär som byggts med den äldre formulärredigeraren kan ställas in som rå HTML.
• Om du bäddar in ditt HubSpot-formulär på en extern sida måste du installera HubSpots spårningskod för att spåra analyser. Läs mer om hur du installerar HubSpot-spårningskoden.

Styla ditt formulär

Anpassa text, inmatningsfält, knapp och bakgrund för ditt formulär och dina formulärsteg. Stilalternativ som konfigureras på fliken Global styling tillämpas på alla formulärsteg. Du kan inte styla enskilda formulärsteg separat.

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Skapa ett nytt formulär eller håll muspekaren över ett befintligt formulär och klicka på Redigera .
3. Klicka på ikonen styles Styling i menyn i vänster sidofält.
4. Du kan anpassa stilen för följande formulärkomponenter:
   • 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.

Kopiera delningslänken för att dela en fristående formulärsida

Du kan dela ditt formulär med delningslänken, som visar formuläret på en fristående webbsida. Denna delningslänk kan inte döljas eller göras privat. Alla som har delningslänken kommer att kunna komma åt formuläret.

Så här kommer du åt delningslänken:

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på Granska och uppdatera längst upp till höger.
4. Klicka på Uppdatera längst ner i den högra panelen.
5. I dialogrutan klickar du på Kopiera en delningslänk.
6. Längst ner klickar du på Kopiera. Detta kopierar formulärsidans webbadress till ditt urklipp.
7. Öppna ett nytt fönster eller en ny flik i webbläsaren och klistra 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.

Kopiera formulärets inbäddningskod

Du kan bädda in ditt HubSpot-formulär på din externa sida genom att kopiera formulärets inbäddningskod och klistra in den på din externa sida. För att spåra analyser för ditt inbäddade formulär måste din HubSpot-spårningskod installeras på den externa sidan där du bäddar in HubSpot-formuläret.

För att komma åt inbäddningskoden:

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på Granska och uppdatera längst upp till höger.
4. Klicka på Uppdatera längst ner i den högra panelen.
5. I dialogrutan klickar du på Hämta inbäddningskod.
6. På fliken Inbäddningskod klickar du på Kopiera.
7. Klistra in inbäddningskoden i HTML-modulen på din externa sida.

Kopiera formulärutvecklarens kod

Du kan bädda in formulär och utforma dem med CSS i den externa stilmallen. Med den här metoden kan du åsidosätta standardstilar, tillämpa detaljerad styling på specifika formulärelement och ange globala regler för konsekvent styling i dina 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:

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på Granska och uppdatera längst upp till höger.
4. Klicka på Uppdatera längst ner i den högra panelen.
5. Klicka på Hämta inbäddningskod i dialogrutan.
6. Klicka på fliken Utvecklarkod (Avancerat).
7. Om du vill acceptera risken att ändringar som görs externt i CSS eller JavaScript kan leda till att formuläret går sönder markerar du kryssrutan Jag förstår riskerna, visa mig koden.
8. Klicka på Kopiera längst ned.
9. Lägg till koden för inbäddning av formuläret 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.
   • Globala stilar 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.