HubSpot-lomakkeen määrittäminen ja muotoilu ulkoisella sivustolla

Lomaketyökalun avulla voit kerätä tietoja verkkosivustosi kävijöiltä, jolloin voit markkinoida, myydä ja palvella näitä kävijöitä, kun he ovat tekemisissä yrityksesi kanssa. Kun luot lomakkeen HubSpotissa, voit lisätä sen HubSpotin sivuille tai sivuja, jotka olet luonut HubSpotin ulkopuolelle. Lomakkeita voi jakaa kahdella tavalla ulkoisella, muulla kuin HubSpotin isännöimällä sivustolla: upottamalla lomakekoodin olemassa olevaan sivuun tai luomalla erillisen lomakesivun, johon voit linkittää.

Kummallakin menetelmällä HubSpotin lomaketyökalussa lomakkeeseen tehdyt muutokset heijastuvat automaattisesti ulkoisen sivustosi live-lomakkeeseen.

Jos työskentelet WordPressin kanssa, opettele miten lisätä lomakkeen WordPress-postaukseen tai -sivulle.

Lisää lomakkeen upotuskoodi

Huomaa: jos yhdistät lomakkeeseen Salesforce-kampanjan, lomakkeen upotuskoodi muuttuu. Tässä tapauksessa sinun onlisättävä upotuskoodiuudelleen ulkoiselle sivustollesi.

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Liidien kaappaus > Lomakkeet.
• Luo uusi lomaketai siirrä hiiren kursori olemassa olevanlomakkeenpäälle, napsautaavattavaaToiminnot-valikkoa ja valitseMuokkaa lomaketta.
• NapsautaAsetukset-välilehteä valitaksesi, mitä tapahtuu sen jälkeen, kun kävijä on lähettänyt lomakkeen. Voit valita, ohjataanko kävijät kiitos-sivulle vai näytetäänkö kiitosviesti, kun kävijä lähettää lomakkeen.

• Napsauta lomakeditorin oikeassa yläkulmassa Jaa.
• Jos haluat lisätä lomakkeen lähettäneet yhteyshenkilöt Salesforce-kampanjaan, napsauta valintaikkunassa Lisää yhteyshenkilöt Salesforce-kampanjaan-pudotusvalikkoa ja valitse kampanja.
• NapsautaKopioi.
  
• Napsauta oikeassa yläkulmassa Julkaise.
• Liitä upotuskoodi ulkoisen sivun HTML-moduuliin. Jotta voit seurata lomakkeen analytiikkaa, HubSpot-seurantakoodi on asennettava ulkoiselle sivulle, johon sijoitat HubSpot-lomakkeen. HubSpot kerää lomakkeen lähettämiset ilman asennettua HubSpot-seurantakoodia, mutta analytiikkaa ei tallenneta.

Jos käytät WordPressiä, opettele lisäämään lomake WordPress-postaukseen tai -sivulle.

Luo itsenäinen lomakesivu

Voit jakaa lomakkeen lomakesivun kautta, jolloin se on omalla sivullaan omalla URL-osoitteellaan.

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Liidien kaappaus > Lomakkeet.
• Luo uusi lomaketai siirrä hiiren kursori olemassa olevanlomakkeenpäälle, napsautaavattavaaToiminnot-valikkoa ja valitseMuokkaa lomaketta.
• Napsauta oikeassa yläkulmassa Jaa.

• Napsauta valintaikkunassaJaa linkki-välilehteä.
• Kopioi lomakkeen sivun URL-osoite leikepöydälle valitsemalla Kopioi.

• Napsauta oikeassa yläkulmassaJulkaise.

• Avaa selaimessa uusi ikkuna tai välilehti ja liitä lomakkeen URL-osoite osoiteriville ladataksesi sen. Voit myös jakaa lomakesivun URL-osoitteen suoraan muille, jotta he pääsevät käyttämään lomaketta.

Jos huomaat, että lomake ei toimi WordPressissä tai että upotuskoodi muuttuu, kun katsot live-sivua, sinun on ehkä lisättävä lomake käyttämällä lisäosaa varmistaaksesi, että upotuskoodi pysyy ehjänä. Jos käytät Gutenbergin uusinta versiota, joka poistaa inline JavaScriptin, käytä Inline JS Block for Gutenberg -lisäosaa upottaaksesi lomakkeet ja CTA-koodit sivullesi.

Muotoile upotettu lomake ulkoisilla sivuilla

Muotoile upotettu HubSpot-lomake ulkoisilla sivuillasi kahdella tavalla lomake-editorissa tai CSS:llä ulkoisessa tyylitaulussa.

Lomakkeen editorissa

Teema

Jos haluat tyylitellä lomakkeesi kirjoittamatta mitään mukautettua koodia, voit soveltaa esiasetettuja teemojaupotettuun lomakkeeseen taierilliseen lomakesivuun. Teemat lisäävät lomakkeisiisi lisää mukautusvaihtoehtoja lomakkeidenyleisten tyyliasetusten lisäksi.

• Siirry HubSpot-tililläsi kohtaanMarkkinointi>Lead Capture>Lomakkeet.
• Napsauta lomakkeennimeä.
• Napsauta lomakeeditorissatyyli- ja esikatseluvälilehteä.
• Poista vasemmanpuoleisen ruudunTeema-osiossavalintaruudunPidä vanha teema-valintaruutu.

Huomaa:Vanhan teeman säilyttäminen-valintaruudun tyhjentäminen poistaa tähän lomakkeeseen käytetyn HubSpotin entisen oletusmuotoilun.Lomakkeeseen lisäämäsi mukautettu CSS tai JavaScript ei enää toimi. Tämä valintaruutu on käytettävissä vain vanhoissa lomakkeissa, eikä se ole käytettävissä tilillesi luoduissa uusissa lomakkeissa.

• Valitse yksi neljästäteemasta.

Tyyli(vainMarketing HubStarter,Professional,Enterprise taiLegacyMarketing HubBasic).

Teemojen lisäksi voit tyylitellä upotettuja lomakkeita yksityiskohtaisemmalla tasolla.

• Siirry HubSpot-tililläsi kohtaanMarkkinointi>Lead Capture>Lomakkeet.
• Napsauta lomakkeennimeä.
• Napsauta lomakeeditorissatyyli- ja esikatseluvälilehteä.

• Laajenna vasemmanpuoleisen ruudun>Tyyli-osiotanapsauttamalla sitä. Täällä voit muotoilla lomakekentän leveyden, kirjasintyypin, fonttikoon, fonttivärin ja lomakepainikkeen.

Nämä tyylit asetetaan lomakekohtaisesti ja ne ohittavatlomakkeen yleiset tyyliasetukset.

Huomaa:Lomake-editorissa asetettuja teemoja ja tyylejä sovelletaan vainupotettuihin lomakkeisiintaiitsenäisiin lomakesivuihin.HubSpot-sivujen lomakkeita voidaanmuotoillavainsisältöeditorinlomakemoduulin tyylivaihtoehdoilla.

Muotoile lomake CSS:llä ulkoisessa stylesheetissä (Marketing Hub ja CMS Hub VainProfessional- tai Enterprise-taiLegacy Marketing Hub Basic -versio).

• Siirry HubSpot-tililläsi kohtaanMarkkinointi>Lead Capture>Lomakkeet.
• Napsauta lomakkeennimeä.
• Napsauta lomakeeditorissatyyli- ja esikatseluvälilehteä.
• Napsauttamalla tätä voit kytkeäSet as raw HTML form-kytkimen päälle. Lomake renderöidään ulkoisella sivulla raakana HTML-elementtinä eikä iframen sisällä, ja kaikki lomakkeeseen sovelletut HubSpotin oletusmuotoilut poistetaan.

• Napsauta oikeassa yläkulmassaJaa.
• Kopioi lomakkeen upotuskoodi valitsemalla valintaikkunassaKopioi.
• Lisää lomakkeen upotuskoodiulkoiselle sivullesi.Jos olet jo upottanut lomakkeen, sinun onkorvattavanykyinen upotuskoodi tällä uudella, tyylittelemättömällä versiolla.

• Kun olet upottanut lomakkeen, voit muotoilla lomakkeen ulkoisessa tyylitaulukossa CSS:llä.
• Vaihtoehtoisesti voitmuokata lomakkeen upotuskoodiaja tehdä lisää lomakkeen mukautuksia. KoskaHubSpot-lomakkeet on rakennettu JavaScriptillä, ei HTML:llä,lomakkeen upotuskoodin muokkaaminenvaatii JavaScriptin kanssa työskentelyyn perehtyneen kehittäjän apua.