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

Med formulärverktyget kan du samla in information från besökare på din webbplats, så att du kan marknadsföra, sälja och betjäna dessa besökare när de är i kontakt med ditt företag. När du skapar 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å två sätt på din externa webbplats som inte är värd för HubSpot: genom att bädda in formulärkoden på en befintlig sida eller genom att 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.

Om du arbetar med WordPress kan du lära dig att infoga ett formulär i ett inlägg eller en sida i WordPress.

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

Observera att om du associerar en Salesforce-kampanj med ditt formulär ändras formulärets inbäddningskod. I det här fallet måste dulägga till inbäddningskoden pånytt på din externa webbplats.

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.
• Skapa ett nytt formuläreller håll muspekaren över ett befintligtformulär, klicka pårullgardinsmenynÅtgärder och väljRedigera formulär.
• Klicka på flikenAlternativ för att välja vad som ska hända när en besökare skickar in formuläret. Du kan välja att omdirigera besökarna till en tacksida eller visa ett tackmeddelande när en besökare skickar in formuläret.

• Klicka på Dela i formulärredigeraren i övre högra hörnet.
• 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-kampanjoch väljer en kampanj.
• Klicka påKopiera.
  
• Klicka på Publicera uppe till höger.
• Klistra in inbäddningskoden i HTML-modulen på din externa sida. Om du vill spåra analyserna för ditt formulär måste din HubSpot-spårningskod installeras på den externa sidan där du placerar ett HubSpot-formulär. HubSpot samlar in formulärsändningar utan att HubSpot-spårningskoden är installerad, men ingen analys kommer att registreras.

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

Skapa en fristående formulärsida

Du kan dela ditt formulär via en formulärsida så att det finns på en egen sida med en egen URL.

• I ditt HubSpot-konto, navigera till Marknadsföring > Infångande av potentiell kund > Formulär.
• Skapa ett nytt formuläreller håll muspekaren över ett befintligtformulär, klicka pårullgardinsmenynÅtgärder och väljRedigera formulär.
• Klicka på Dela i övre högra hörnet.

• Klicka på flikenDela länki dialogrutan.
• Klicka på Kopiera för att kopiera formulärsidans URL till klippbordet.

• Klicka påPublicera uppe till höger.

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

Om du märker att formuläret inte fungerar i WordPress eller att inbäddningskoden ändras när du tittar på livesidan kan du behöva infoga formuläret med hjälp av ett insticksprogram för att se till att inbäddningskoden förblir intakt. Om du använder den senaste versionen av Gutenberg, som tar bort inline JavaScript, kan du använda insticksprogrammet Inline JS Block for Gutenberg för att bädda in formulär och CTA:er på din sida.

Styla ditt inbäddade formulär på externa sidor

Du kan skapa stil för ditt inbäddade HubSpot-formulär på dina externa sidor på två olika sätt i formulärredigeraren eller med CSS i ditt externa formatblad.

I formulärredigeraren

Tema

Om du vill anpassa dina formulär utan att skriva någon egen kod kan du använda förinställda teman för dittinbäddade formulär eller dinfristående formulärsida. Teman lägger till fler anpassningsalternativ för dina formulär, utöver deglobala inställningarna för formulärstilar.

• I ditt HubSpot-konto navigerar du tillMarknadsföring>Lead Capture>Formulär.
• Klicka pånamnetpå ett formulär.
• Klicka på flikenStil och förhandsgranskningi formulärredigeraren.
• Avmarkera kryssrutanBehåll det gamla temati den vänstra rutan, avsnittetTema.

Observera:Om du avmarkerar kryssrutanBehåll det gamla temattas den tidigare HubSpot-formatmall som tillämpats på det här formuläret bort. Eventuell anpassad CSS eller JavaScript som du har lagt till i formuläret kommer inte längre att fungera. Den här kryssrutan är endast tillgänglig för gamla formulär och kommer inte att vara tillgänglig i nya formulär som skapas på ditt konto.

• Välj ett av fyrateman.

Stil (endastMarketing HubStarter,Professional,Enterprise ellerLegacyMarketing HubBasic)

Utöver teman kan du styra inbäddade formulär på en mer detaljerad nivå.

• I ditt HubSpot-konto navigerar du tillMarknadsföring>Lead Capture>Formulär.
• Klicka pånamnetpå ett formulär.
• Klicka på flikenStil och förhandsgranskningi formulärredigeraren.

• I den vänstra rutan klickar du på avsnittet>Stilför att utöka det. Här kan du styra 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 deglobala inställningarna för stilar för formuläret.

Observera attteman och stilar som ställs in i formulärredigeraren endast gäller förinbäddade formulärellerfristående formulärsidor.Formulär på dina HubSpot-sidor kan endaststylasmed formmodulens stilalternativi innehållsredigeraren.

Styla formuläret med CSS i ditt externa formatblad (Marknadsföringshubben och CMS Hub EndastProfessional eller Enterprise,ellerLegacy Marketing Hub Basic)

• I ditt HubSpot-konto navigerar du tillMarknadsföring>Lead Capture>Formulär.
• Klicka på formuläretsnamn.
• Klicka på flikenStil och förhandsgranskningi formulärredigeraren.
• Klicka för att aktivera inställningenStäll in som obearbetat 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åDela i övre högra hörnet.
• I dialogrutan klickar du påKopieraför att kopiera koden för inbäddning av formuläret.
• Lägg till koden för inbäddning av formuläretpå din externa sida. Om du redan har bäddat in formuläret måste duersättaden befintliga inbäddningskoden med den nya, ostylerade versionen.

• När du har bäddat in formuläret kan du styra formuläret i ditt externa formatblad med CSS.
• Alternativt kan duändra koden för inbäddning av formuläretför att göra ytterligare anpassningar av formuläret. EftersomHubSpot-formulär byggs med JavaScript, inte HTML,krävs det hjälp av en utvecklare som vet hur man arbetar med JavaScriptför att anpassa koden för inbäddning av formuläret.