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

När du har skapat ett formulär i HubSpot kan du lägga till den på HubSpot-sidor eller sidor som du har skapat utanför HubSpot. Formulär kan delas på din externa webbplats som inte är värd för HubSpot antingen genom att:

• 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 HubSpot-formulärverktyget automatiskt att återspeglas i det levande formuläret på din externa webbplats. När du har lagt till ditt formulär kan dustyra ditt inbäddade HubSpot-formulär på dina externa sidor i formulärredigeraren eller med CSS i ditt externa formatmallblad.

Om du arbetar med WordPress kan du lära dig att infoga ett formulär i ditt WordPress-inlägg eller på din WordPress-sida.

Lägg till koden för inbäddning av formuläret

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > 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 i dialogrutan klickar du på rullgardinsmenyn Lägg till kontakter i en Salesforce-kampanj och väljer en kampanj. Om du kopplar en Salesforce-kampanj till formuläret ändras formulärets inbäddningskod. I det här fallet 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. Om du vill 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 blankettsida

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. Den här delningslänken kan inte döljas eller göras privat. Alla som har delningslänken kommer att kunna få tillgång till formuläret.

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > 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 klippbord.
• Ö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 stylar ditt inbäddade formulär med HubSpot-formulärredigeraren kan du antingen använda ett tema eller tillämpa en egen anpassad 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 stylas med formmodulens stilalternativ i innehållsredigeraren.

Styla ditt formulär med ett tema

Om du vill styla 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 lägger till fler anpassningsalternativ till dina formulär, utöver eventuella globala inställningar för formulärstilar.

Så här gör du för att skapa en stil för ditt formulär med ett tema:

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.}
• Håll muspekaren över ett formulär och klicka på Redigera.
• Klicka på flikenStil och förhandsgranskning i formulärredigeraren.
• Om du redigerar ett gammalt formulär avmarkerar du kryssrutanBehåll gammalt tema i den vänstra rutan. Detta kommer att ta bort den tidigare HubSpot-formatinställningen som tillämpats på formuläret. 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

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

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

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.}
• Håll muspekaren över ett formulär och klicka på Redigera.
• Klicka på flikenStil och förhandsgranskning i formulärredigeraren.
• I den vänstra rutan klickar du på Stil . Här kan du konfigurera formulärfältets bredd, teckensnittsfamilj, teckensnittsstorlek, teckensnittsfärg och formulärknapp. Dessa stilar ställs in för varje enskilt formulär och åsidosätter globala inställningar för formulärstilar.
  
• När duhar anpassat formuläret klickar du på Publicera eller Uppdatera uppe till höger.
  
  

Styla det inbäddade formuläret med CSS i det externa formatmallen

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

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

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.}
• Håll muspekaren över ett formulär och klicka på Redigera.
• Klicka på flikenStil och förhandsgranskning i formulärredigeraren.
• Klicka för att aktivera inställningen Ange som rå HTML-formulär . Formuläret kommer att återges som ett obearbetat HTML-element på din externa sida i stället för i en iframe, och alla standardformat för HubSpot som tillämpas på formuläret kommer att tas bort.
• Klicka på Publicera eller Uppdatera uppe till höger.
• Lägg till koden för inbäddning av formuläret 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, ostylerade versionen. När du har bäddat in ditt formulär:
  
  • Du kommer att kunna styla formuläret i ditt externa formatblad med CSS.
  • Du kan också ändra koden för inbäddning av formuläret för att göra ytterligare anpassningar av formuläret. Eftersom HubSpot-formulär byggs med JavaScript, inte HTML,krävs det hjälp av en utvecklare som vet hur man arbetar med JavaScript för attanpassa koden för inbäddning av formuläret.