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. Formulär kan delas på din externa, icke-HubSpot-hostade webbplats av 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 live-formulä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.

Om du arbetar med WordPress kan du lära dig hur du infogarett formulär på ditt WordPress-inlägg eller din WordPress-sida.

Observera: från och med den 16 maj 2024 måste domänen för sidan läggas till som en webbplatsdomän för att behandlas som en betrodd domän när du lägger till din formulärinbäddningskod på en extern sida. Om inte, kommer inskick till formuläret också att filtreras till dina skräppostinlämningar.

Lägg till inbäddningskoden för 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.
• Om du vill lägga till kontakter som skickar in formuläret till en Salesforce-kampanj i dialogrutan klickar du på Lägg till kontakter i en Salesforce-kampanj i rullgardinsmenyn och väljer en kampanj. Om du associerar en Salesforce-kampanj med ditt formulär kommer formulärets inbäddningskod att ändras. I så fall måste du lägga till inbäddningskoden igen 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.

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 Delningslänk .
• Klicka på Kopiera för att kopiera formulärsidans URL till urklipp.
• Ö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.
  
  

Styla ditt inbäddade formulär i formulärredigeraren

När du utformar ditt inbäddade formulär med HubSpot formulärredigerare kan du antingen använda ett tema eller tillämpa din egen anpassade stil.

Observera: teman och stilar som anges i formulärredigeraren gäller endast för inbäddade formulär eller fristående formulärsidor. Formulär på dina HubSpot-sidor kan endast utformas med formulärmodulens stilalternativ i innehållsredigeraren.

Styla ditt formulär med ett tema

Om du vill utforma dina formulär utan att skriva någon anpassad kod kan du tillämpa förinställda teman på ditt inbäddade formulär eller din fristående formulärsida. Dessa teman ger fler anpassningsalternativ för dina formulär, utöver eventuella globala inställningar för formulärstil.

Så här utformar du formuläret med ett tema:

• I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
• Håll muspekaren över ett formulär och klicka på Redigera.
• Klicka på fliken Stil och förhandsgranskning i formulärredigeraren.
• Om du redigerar ett äldre formulär avmarkerar du kryssrutan Behåll gammalt tema i den vänstra rutan. Detta kommer att ta bort den tidigare standard HubSpot-styling som tillämpas på detta formulär. Eventuell anpassad CSS eller JavaScript som du har lagt till i formuläret kommer inte längre att fungera. Den här kryssrutan gäller inte för nya formulär som skapas i ditt konto.
• Välj ett tema.
• Klicka på Publicera eller Uppdatera längst upp till höger.

Använd en anpassad stil

Om du har en Marketing Hub Starter-, Professional- eller Enterprise-prenumeration med ditt HubSpot-konto kan du också utforma inbäddade formulär på en mer detaljerad nivå.

Så här använder du en anpassad stil:

• I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
• Håll muspekaren över ett formulär och klicka på Redigera.
• Klicka på fliken Stil och förhandsgranskning i formulärredigeraren.
• Klicka på avsnittetStil i den vänstra rutan. Här kan du konfigurera formulärets fältbredd, teckensnittsfamilj, teckenstorlekar, teckensnittsfärger och formulärknapp. Dessa stilar ställs in för varje enskilt formulär och åsidosätter globala inställningar för formulärstil.
• När du har anpassat formuläret klickar du på Publicera eller Uppdatera längst upp till höger.
  
  

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

Om du har en Marketing Hub - eller CMS Hub Professional- eller Enterprise-prenumeration med ditt HubSpot-konto kan du bädda in ditt formulär som ett HTML-formulär och sedan utforma det inbäddade formuläret med CSS i din externa stilmall.

Så här utformar du ditt inbäddade formulär med CSS:

• I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
• Håll muspekaren över ett formulär och klicka på Redigera.
• Klicka på fliken Stil och förhandsgranskning i formulärredigeraren.
• Klicka här för att slå på inställningen Ange formuläret som rå HTML . Formuläret kommer att återges som ett HTML-element på din externa sida i stället för inuti en iframe, och all HubSpot-standardstyling som tillämpas på formuläret kommer att tas bort.
• Klicka på Publicera eller Uppdatera längst upp till höger.
• Lägg till formulärets inbäddningskod på din externa sida. Om du redan har bäddat in ditt formulär måste du ersätta den befintliga inbäddningskoden med den nya, ostyglade versionen. När du har bäddat in ditt formulär:
  
  • Du kommer att kunna utforma formuläret i din externa stilmall med CSS.
  • Du kan också ändra formulärets in bäddningskod för att göra ytterligare formuläranpassningar. Eftersom HubSpot-formulär är byggda med JavaScript, inte HTML, behöver du hjälp av en utvecklare som vet hur man arbetar med JavaScript för att anpassa inbäddningskoden för formuläret