Utforma och bädda in HubSpot-formulär på en extern webbplats

Använd HubSpot-formulär på din externa webbplats för att fånga upp leads och automatiskt synkronisera kontaktdata till ditt HubSpot-konto. Du kan utforma ditt formulär i HubSpot och använda formulärets inbäddningskod för att lägga till det på din webbplats. Eller använd en delningslänk för att skicka ett fristående formulär till din publik.

När du bäddar in ett formulär synkroniseras inskickningarna direkt till ditt HubSpot-konto, där du kan hantera kontakter, utlösa automatisering och analysera prestanda. Du kan till exempel lägga till ett HubSpot-formulär på en produktsida på ditt företags webbplats för att fånga upp demoförfrågningar och följa upp med ett automatiserat e-postmeddelande.

Om ditt formulär skapades i redigeraren för äldre formulär kan du läsa om hur du konfigurerar och utformar ett äldre formulär på en extern webbplats.

Innan du sätter igång

Innan du börjar arbeta med den här funktionen bör du gå igenom de tekniska kraven och övervägandena för att använda formulär på externa webbplatser.

De tekniska kraven

• När du bäddar in ett HubSpot-formulär på en extern webbplats måste du lägga till webbplatsens domän i dina spårningsinställningar. Formulärinlämningar från domäner som inte har lagts till kommer att markeras som skräppost.
• För att spåra analyser på ditt inbäddade formulär måste du installera HubSpots spårningskod på din externa sida.
  

Begränsningar och överväganden

• Att ställa in ditt formulär som ett rå HTML-formulär är inte tillgängligt i den uppdaterade formulärredigeraren. Endast formulär som byggts med den äldre formulärredigeraren kan ställas in som rå HTML.
• För att anpassa ett formulärs inbäddade kod krävs hjälp av en utvecklare som vet hur man arbetar med JavaScript. Mer avancerade anpassningar kan göras med ett specialbyggt formulär och HubSpot Forms API.

Styla ditt formulär

Anpassa text, inmatningsfält, knappar och bakgrund för ditt formulär och dina formulärsteg. Anpassningar av formulärstilar tillämpas på alla formulärsteg. Du kan inte utforma enskilda formulärsteg separat.

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Skapa ett nytt formulär eller håll muspekaren över ett befintligt formulär och klicka på Redigera .
3. Klicka på ikonen styles Styling i menyn till vänster i sidofältet.
4. I panelen Formulärstilar kan du anpassa följande komponenter:
   • 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.

Dela en fristående formulärsida

Använd en delningslänk för att visa ditt formulär på en fristående sida. Alla som har delningslänken kan komma åt formuläret. Delningslänken kan inte döljas eller göras privat.

Så här kopierar du delningslänken:

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på Granska och uppdatera längst upp till höger.
4. Klicka på Uppdatera längst ner i den högra panelen.
5. I dialogrutan klickar du på Kopiera en delningslänk.
6. Längst ner klickar du på Kopiera. Detta kopierar sidans webbadress till ditt urklipp.
7. Öppna ett nytt fönster eller en ny flik i webbläsaren och klistra in sidans 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.

Kopiera formulärets inbäddningskod

Bädda in ditt formulär på din externa sida genom att kopiera formulärets inbäddningskod och klistra in den på din externa sida. För att spåra analyser för ditt inbäddade formulär måste din HubSpot-spårningskod installeras på den externa sidan där du bäddar in HubSpot-formuläret.

Så här kopierar du inbäddningskoden:

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på Granska och uppdatera längst upp till höger.
4. Klicka på Uppdatera längst ner i den högra panelen.
5. I dialogrutan klickar du på Hämta inbäddningskod.
6. På fliken Inbäddningskod klickar du på Kopiera.
7. Klistra in inbäddningskoden i HTML-modulen på din externa sida.

Få åtkomst till formulärutvecklarens kod

Bädda in formuläret och anpassa stilen med hjälp av CSS i din externa stilmall. Med den här metoden kan du åsidosätta standardstilar, tillämpa detaljerad styling på specifika formulärelement och ange globala regler för konsekvent styling i alla dina inbäddade formulär. Läs mer om hur du definierar anpassad styling för inbäddade formulär med hjälp av CSS.

Så här får du tillgång till utvecklarkoden:

1. I ditt HubSpot-konto navigerar du till Marknadsföring > Formulär.
2. Håll muspekaren över ett formulär och klicka på Redigera.
3. Klicka på Granska och uppdatera längst upp till höger.
4. Klicka på Uppdatera längst ner i den högra panelen.
5. Klicka på Hämta inbäddningskod i dialogrutan.
6. Klicka på fliken Utvecklarkod (Avancerat).
7. Om du vill acceptera risken att ändringar som görs externt i CSS eller JavaScript kan leda till att formuläret går sönder markerar du kryssrutan Jag förstår riskerna, visa mig koden.
8. Klicka på Kopiera längst ned.
9. Lägg till koden för inbäddning av formuläret på din externa sida. När du har bäddat in formuläret kan du formatera formuläret i din externa stilmall med CSS.
   • De CSS-variabler som du kan åsidosätta listas i den här artikeln.
   • Globala stilar kommer att åsidosätta styling på toppnivå över alla dina inbäddade formulär. Du kan också rikta in dig på enskilda element i dina formulär, till exempel en formulärelementrad, skicka-knappar eller formulärrubriker.