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 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.

Omdu arbetar med WordPress kan du läsa om hur du infogar ett formulär i ettinlägg eller på en sida i WordPress.

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

Lägga till koden för inbäddning av 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 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.

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 i formulärredigeraren

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

Observera: teman och stilar som ställs in 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 använda 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 formulärstilsinställningar.

Så här utformar du ditt formulär 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.
• I formulärredigeraren klickar du på fliken Stil och förhandsgranskning .
• Om du redigerar ett äldre formulär avmarkerar du kryssrutan Behåll det gamla temat 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 uppe 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.
• I formulärredigeraren klickar du på fliken Stil och förhandsgranskning .
• I den vänstra rutan klickar du på avsnittetStil. Här kan du konfigurera formulärfältets bredd, teckensnittsfamilj, teckensnittsstorlekar, teckensnittsfärger och formulärknapp. Dessa stilar ställs in för varje enskilt formulär och åsidosätter de globala inställningarna för formulärstil.
• När du har anpassat formuläret klickar du på Publicera eller Uppdatera uppe till höger.
  
  

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 ditt formulär som ett rå HTML-formulär och sedan utforma det inbäddade formuläret med CSS i din externa stilmall.

Så här stylar 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.
• I formulärredigeraren klickar du på fliken Stil och förhandsgranskning .
• Klicka på för att aktivera Set as raw HTML form switch. Formuläret kommer att återges som ett rå HTML-element på din externa sida i stället för i en iframe, och all HubSpot-standardstyling som tillämpas på formuläret kommer att tas bort.
• Klicka på Publicera eller Uppdatera uppe 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 här nya, ostylade versionen. Efter att du har bäddat in ditt formulär:
  
  • Du kommer att kunna styla formuläret i din externa stilmall med CSS.
  • Du kan också ändra inbäddningskoden för formuläret för att göra ytterligare formuläranpassningar. Eftersom HubSpot-formulär är byggda med JavaScript, inte HTML, kräver anpassning av formulärets inbäddningskod hjälp av en utvecklare som vet hur man arbetar med JavaScript