Konfigurera och utforma ett formulär för arv på en extern webbplats

När du har skapat ett formulär i HubSpot kan du lägga till det på HubSpot-sidor eller på sidor som du har skapat utanför HubSpot. Formulär kan delas på din externa webbplats, som inte drivs av HubSpot, på följande sätt:

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

Oavsett vilken metod du väljer kommer ändringar som görs i formuläret i HubSpots formulärverktyg automatiskt att återspeglas i det aktiva formuläret på din externa webbplats. När du har lagt till formuläret kan du anpassa utseendet på ditt inbäddade HubSpot-formulär på dina externa sidor i formulärredigeraren eller med CSS i ditt externa stilark. Om du arbetar med WordPress kan du läsa om hur du infogar ett formulär i ett WordPress-inlägg eller på en WordPress-sida.

Observera: den här artikeln gäller endast befintliga formulär som skapats med den äldre redigeraren. Vi rekommenderar att du använder den uppdaterade formulärredigeraren för att skapa och hantera formulär. Läs mer om hur du anpassar utseendet på och bäddar in formulär på en extern webbplats.

Innan du börjar

När du lägger till inbäddningskoden för ditt formulär på en extern sida måste sidans domän läggas till som en webbplatsdomän för att behandlas som en betrodd domän. Om så inte är fallet kommer inlämningar till formuläret också att filtreras bort till dina skräppostinlämningar.

Hämta inbäddningskoden för formuläret

1. 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.
2. Håll muspekaren över ett formulär och klicka på Åtgärder > Dela.
3. Om du i dialogrutan vill lägga till kontakter som skickar in formuläret till en Salesforce-kampanj klickar du 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 ändras formulärets inbäddningskod. I så fall måste du lägga till inbäddningskoden på nytt på din externa webbplats.
4. Klicka på Kopiera.
5. Klistra in inbäddningskoden i HTML-modulen på din externa sida. För att spåra statistik för ditt formulär måste din HubSpot-spårningskod vara installerad 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 delningslänken. I en delningslä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.

1. 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.
2. Håll muspekaren över ett formulär och klicka på Åtgärder > Dela.
3. I dialogrutan klickar du på fliken Delningslänk .
4. Klicka på Kopiera för att kopiera formulärsidans URL till urklipp.
5. Ö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 åtkomst till formuläret.
   
   

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

När du formaterar ditt inbäddade formulär med HubSpots formulärredigerare kan du antingen använda ett tema eller tillämpa 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 hjälp av stilalternativen i formulärmodulen i innehållsredigeraren.

Utforma ditt formulär med ett tema

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

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

1. 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.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. I formulärredigeraren klickar du på fliken Stil och förhandsgranskning .
4. Om du redigerar ett äldre formulär ska du avmarkera kryssrutan Behåll gammalt tema i den vänstra rutan. Detta tar bort den tidigare standardstilen från HubSpot som tillämpats på detta formulär. Eventuell anpassad CSS eller JavaScript som du har lagt till i formuläret kommer inte längre att fungera. Denna kryssruta gäller inte för nya formulär som skapas i ditt konto.
5. Välj ett tema.
6. Klicka på Publicera eller Uppdatera längst upp till höger.

Använd en anpassad stil

Du kan också anpassa formulärens utseende på en mer detaljerad nivå.

Så här tillämpar du en anpassad stil:

1. 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.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på fliken Stil och förhandsgranskning i formulärredigeraren.
   • I den vänstra rutan klickar du på avsnittetStil. Här kan du konfigurera formulärfältens bredd, teckensnitt, teckenstorlek, teckenfärg och formulärknappar. Dessa stilar ställs in för varje enskilt formulär och åsidosätter de globala inställningarna för formulärstilar.
   • När du har anpassat formuläret klickar du på Publicera eller Uppdatera längst upp till höger.

Formatera ditt inbäddade formulär med CSS i ditt externa stilark (äldre metod)

Om du använder ett äldre formulär kan du bädda in ditt formulär som ett rått HTML-formulär. Därefter kan du formatera det inbäddade formuläret med CSS i ditt externa stilark.

Observera: endast äldre formulär kan ställas in som ren HTML. Läs mer om hur du formaterar ditt inbäddade formulär med CSS i den uppdaterade formulärredigeraren.

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

1. 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.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. I formulärredigeraren klickar du på fliken Stil och förhandsgranskning .
4. Klicka för att aktivera alternativet Ange som rå HTML-formulär . Formuläret kommer då att visas som ett rått HTML-element på din externa sida istället för inuti en iframe. All standardformatering från HubSpot som tillämpats på formuläret kommer att tas bort.
5. Klicka på Publicera eller Uppdatera längst upp till höger.
6. Lägg till inbäddningskoden för formuläret på din externa sida. Om du redan har bäddat in formuläret måste du ersätta den befintliga inbäddningskoden med den här nya versionen utan formatering. Efter att du har bäddat in formuläret:
   
   • Du kan formatera formuläret i ditt externa stilark med CSS.
   • Du kan också ändra inbäddningskoden för formuläret för att göra ytterligare anpassningar. Eftersom HubSpot-formulär är byggda med JavaScript, inte HTML, krävs hjälp av en utvecklare som kan arbeta med JavaScript för att anpassa inbäddningskoden för formuläret.