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.

Om du arbetar med WordPress kan du lära dig hur du infogar ettformulär i ett inlä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 inte, kommer inskick av formuläret också att filtreras till dina skräppostinlämningar.

Lägg 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 på rullgardinsmenyn Lägg till kontakter i en Salesforce-kampanj i dialogrutan 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 vara delbetalad 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 Share. I en Share-länk visas formuläret på en fristående sida med en egen URL. Denna share-lä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 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 (legacy)

Om du vill utforma ditt äldre formulär utan att skriva någon anpassad kod kan du använda förinställda teman på det inbäddade formuläret eller den fristående formulärsidan. Dessa teman ger fler anpassningsalternativ för dina formulär, utöver eventuella globala inställningar för formulärstil.

För att utforma 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 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 uppe till höger.

Använd en anpassad stil

Du kan också utforma formulär på en mer detaljerad nivå.

För att använda 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.
• Om du redigerar ett äldre formulär och du har en Marketing Hub Starter-, Professional- eller Enterprise-prenumeration klickar du på fliken Style & Preview i formulärredigeraren.
  • I den vänstra rutan klickar du på avsnittet Style. 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.
    
    

• Om du använder den uppdaterade formulärredigeraren klickar du på Styling-ikonen på vänster sida.
  • När du anpassar din text, dina inmatningsfält eller din knapp kan du välja bland befintliga stilar med hjälp av Quick field input styles. Alternativt kan du manuellt anpassa stilen för varje komponent i ditt formulär:
    • Fält: Anpassa fältet, inklusive bakgrund och ramar. Du kan också anpassa teckensnitt, teckenstorlek och färger för dina etiketter, liksom färgerna för din hjälptext, platshållare och feltext.
    • Knappar: Anpassa knappens höjd, hörnavrundning, bakgrund, gradient och lägg till en droppskugga på knappen. Du kan också anpassa teckensnitt, teckenstorlek och färg för knapptexten.
    • Paragraf (Rich Text): anpassa teckensnitt, teckenstorlek och färg för brödtexten.
    • Rubrik: Anpassa teckensnitt och textfärg för rubriken. Du kan välja att lägga till en slagskugga i rubriktexten.
    • Bakgrund: Anpassa bakgrunden för formuläret och formulärstegen. Du kan välja att ange en bakgrundsfärg eller använda en bild som bakgrund. Du kan använda AI-assistenter för att generera bilder. Du kan också välja att ange en kant för ditt formulär.
    • Förloppsfält: anpassa förloppsfältet på ditt formulär, inklusive färgen på förloppslinjen och teckensnittet för förloppsfältet.

Styla ditt inbäddade formulär med CSS i din externa stilmall (legacy)

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

Observera: du kan bara ställa in äldre formulär som rå HTML.

För att utforma 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 standard HubSpot-styling 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