HubSpot-lomakkeiden muotoilu ja upottaminen ulkoiselle sivustolle

Käytä HubSpot-lomakkeita ulkoisella verkkosivustollasi liidien keräämiseen ja synkronoi yhteystiedot automaattisesti HubSpot-tilillesi. Voit muotoilla lomakkeen HubSpotissa ja lisätä sen sivustoosi lomakkeen upotuskoodin avulla. Tai käytä jakolinkkiä lähettääksesi itsenäisen lomakkeen yleisöllesi.

Lomakkeen upottaminen varmistaa, että lähetetyt tiedot synkronoidaan suoraan HubSpot-tilillesi, jossa voit hallita yhteystietoja, käynnistää automaation ja analysoida suorituskykyä. Voit esimerkiksi lisätä HubSpot-lomakkeen yrityksesi verkkosivuston tuotesivulle esittelypyyntöjen keräämiseksi ja automaattisen sähköpostiviestin lähettämiseksi.

Jos lomakkeesi on luotu perinteisellä lomakeditorilla, opi, miten voit määrittää ja muotoilla perinteisen lomakkeen ulkoisella sivustolla.

Ennen kuin aloitat

Ennen kuin aloitat työskentelyn tämän ominaisuuden kanssa, tutustu teknisiin vaatimuksiin ja näkökohtiin, jotka koskevat lomakkeiden käyttöä ulkoisissa sivustoissa.

Vaatimukset

• Kun upotat HubSpot-lomakkeen ulkoiselle sivustolle, sinun on lisättävä sivuston verkkotunnus seuranta-asetuksiin. Lomakkeiden lähettäminen verkkotunnuksista, joita ei ole lisätty, merkitään roskapostiksi.
• Jotta voit seurata upotetun lomakkeen analytiikkaa, sinun on asennettava HubSpot-seurantakoodi ulkoiselle sivulle.
  

Rajoitukset ja huomiot

• Lomakkeen asettaminen raa'aksi HTML-lomakkeeksi ei ole käytettävissä päivitetyssä lomakeeditorissa. Vain vanhalla lomakeditorilla rakennetut lomakkeet voidaan asettaa raa'aksi HTML:ksi.
• Lomakkeen upotuskoodin mukauttaminen vaatii JavaScriptin kanssa työskentelyyn perehtyneen kehittäjän apua. Edistyneempi mukauttaminen voidaan tehdä mukautetun lomakkeen ja HubSpot Forms API:n avulla.

Lomakkeen muotoilu

Mukauta tekstiä, syöttökenttiä, painikkeita ja taustaa lomakkeelle ja lomakkeen vaiheille. Lomakkeen tyylin mukautuksia sovelletaan kaikkiin lomakkeen vaiheisiin. Yksittäisiä lomakkeen vaiheita ei voi tyylitellä erikseen.

1. Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
2. Luo uusi lomake tai siirrä hiiren kursori olemassa olevan lomakkeen päälle ja valitse Muokkaa.
3. Napsauta vasemmanpuoleisessa sivupalkin valikossa styles Styling-kuvaketta.
4. Lomakkeen tyylit -paneelissa voit mukauttaa seuraavia komponentteja:
   • Kentät: Mukauta kenttää, mukaan lukien tausta ja kehykset. Voit myös mukauttaa merkintöjen fonttia, fonttikokoa ja värejä sekä ohjetekstin, sijoitussalpaajien ja virhetekstin värejä.
   • Painikkeet: Mukauta painikkeen korkeutta, kulmien pyöristystä, taustaa, kaltevuutta ja lisää painikkeeseen pudotusvarjo. Voit myös mukauttaa painikkeen tekstin fonttia, fonttikokoa ja väriä.
   • Kappale (Rich Text): Mukauta runkotekstin fonttia, fonttikokoa ja väriä.
   • Otsikko: Mukauta otsikon fonttia ja tekstin väriä. Voit lisätä otsikkotekstiin pudotusvarjon.
   • Tausta: Mukauta lomakkeen ja lomakkeen vaiheiden taustaa. Voit määrittää taustavärin tai käyttää taustana kuvaa. Voit käyttää tekoälyavustajia kuvien luomiseen. Voit myös asettaa lomakkeellesi reunuksen.
   • Edistymispalkki: Mukauta lomakkeesi edistymispalkkia, mukaan lukien edistymisviivan väri ja edistymispalkin fontti.

Jaa itsenäinen lomakesivu

Käytä jakolinkkiä näyttääksesi lomakkeesi erillisellä sivulla. Kuka tahansa, jolla on jakolinkki, voi käyttää lomaketta. Jakolinkkiä ei voi piilottaa tai tehdä yksityiseksi.

Voit kopioida jakolinkin:

1. Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
2. Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
3. Napsauta oikeassa yläkulmassa Tarkista ja päivitä.
4. Napsauta oikean paneelin alareunassa Päivitä.
5. Valitse valintaikkunassa Kopioi jakolinkki.
6. Napsauta alareunassa Kopioi. Tämä kopioi sivun verkko-osoitteen leikepöydälle.
7. Avaa selaimessa uusi ikkuna tai välilehti ja liitä sivusi URL-osoite osoitepalkkiin ladataksesi sen. Voit myös jakaa lomakesivun URL-osoitteen suoraan muille, jotta he pääsevät käyttämään lomaketta.

Kopioi lomakkeen upotuskoodi

Upota lomakkeesi ulkoiselle sivullesi kopioimalla lomakkeen upotuskoodi ja liittämällä se ulkoiselle sivullesi. Jotta voit seurata upotetun lomakkeen analytiikkaa, HubSpot-seurantakoodi on asennettava ulkoiselle sivulle, johon upotat HubSpot-lomakkeen.

Upotuskoodin kopioiminen:

1. Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
2. Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
3. Napsauta oikeassa yläkulmassa Review and update (Tarkista ja päivitä).
4. Napsauta oikean paneelin alareunassa Päivitä.
5. Valitse valintaikkunassa Hae upotuskoodi.
6. Napsauta Upotuskoodi-välilehdellä Kopioi.
7. Liitä upotuskoodi ulkoisen sivun HTML-moduuliin.

Pääset käsiksi lomakkeen kehittäjäkoodiin

Upota lomake ja muokkaa tyyliä CSS:n avulla ulkoisessa stylesheetissäsi. Tällä menetelmällä voit ohittaa oletustyylit, soveltaa yksityiskohtaista muotoilua tiettyihin lomake-elementteihin ja asettaa globaalit säännöt, jotta muotoilu olisi yhdenmukaista kaikissa upotetuissa lomakkeissasi. Lue lisää siitä, miten määritetään mukautettu muotoilu sulautetuille lomakkeille CSS:n avulla.

Kehittäjäkoodin käyttäminen:

1. Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
2. Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
3. Napsauta oikeassa yläkulmassa Review and update (Tarkista ja päivitä).
4. Napsauta oikean paneelin alareunassa Päivitä.
5. Valitse valintaikkunassa Hae upotuskoodi.
6. Napsauta Kehittäjäkoodi (Lisäasetukset) -välilehteä.
7. Jos haluat hyväksyä riskin siitä, että ulkopuolelta CSS:ään tai JavaScriptiin tehdyt muutokset saattavat rikkoa lomakkeen, valitse Ymmärrän riskit, näytä minulle koodi -valintaruutu.
8. Napsauta alareunassa Kopioi.
9. Lisää lomakkeen upotuskoodi ulkoiselle sivullesi. Kun olet upottanut lomakkeen, voit muotoilla lomakkeen ulkoisessa tyylitaulussa CSS:llä.
   • CSS-muuttujat, jotka voit ohittaa, on lueteltu tässä artikkelissa.
   • Globaalit tyylit ohittavat ylätason muotoilun kaikissa upotetuissa lomakkeissasi. Voit myös kohdistaa tyylejä lomakkeiden yksittäisiin elementteihin, kuten lomakkeen elementtiriviin, lähetyspainikkeisiin tai lomakkeen otsikoihin.