Kun olet luonut lomakkeen HubSpotissa, voit lisätä sen HubSpotin sivuille tai sivuille, jotka olet luonut HubSpotin ulkopuolella. Jos sisältösi on isännöity HubSpotin ulkopuolella, voit lisätä lomakkeita seuraavilla menetelmillä:
Kummallakin menetelmällä lomakkeeseen tehdyt muutokset päivittyvät automaattisesti ulkoisen sivustosi live-lomakkeeseen. Voit tyylitellä upotetun HubSpot-lomakkeesi lomakeeditorissa tai ulkoisen tyylitaulukkosi CSS:llä.
Ennen kuin aloitat
Lomakkeen muotoilu
Mukauta tekstiä, syöttökenttiä, painiketta ja taustaa lomakkeellesi ja lomakkeen vaiheille. Globaali muotoilu -välilehdellä määritettyjä tyyliasetuksia sovelletaan kaikkiin lomakkeen vaiheisiin. Yksittäisiä lomakkeen vaiheita ei voi tyylitellä erikseen.
- Luo uusi lomake tai siirrä hiiren kursori olemassa olevan lomakkeen päälle ja valitse Muokkaa.
- Napsauta vasemman sivupalkin valikossa styles Styling-kuvaketta.
- Voit mukauttaa tyyliä seuraaville lomakekomponenteille:
- Kentät: Mukauta kentän tyyliä, 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ää painikkeelle 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.
- Background (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.
Kopioi jakolinkki, jos haluat jakaa itsenäisen lomakesivun
Voit jakaa lomakkeesi jakolinkillä, joka näyttää lomakkeen erillisellä verkkosivulla. Tätä jakolinkkiä ei voi piilottaa tai tehdä yksityiseksi. Kuka tahansa, jolla on jakolinkki, voi käyttää lomaketta.
Voit käyttää jakolinkkiä:
- Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
- Napsauta oikeassa yläkulmassa Review and update (Tarkista ja päivitä).
- Napsauta oikean paneelin alareunassa Päivitä.
- Valitse valintaikkunassa Kopioi jakolinkki.
- Napsauta alareunassa Kopioi. Tämä kopioi lomakkeen sivun verkko-osoitteen leikepöydälle.
- Avaa selaimessa uusi ikkuna tai välilehti ja liitä lomakesivun 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
Voit upottaa HubSpot-lomakkeesi ulkoiselle sivullesi kopioimalla lomakkeen upotuskoodin ja liittämällä sen ulkoiselle sivullesi. Jotta voit seurata upotetun lomakkeen analytiikkaa, HubSpot-seurantakoodi on asennettava ulkoiselle sivulle, johon upotat HubSpot-lomakkeen.
Pääset käsiksi upotuskoodiin:
- Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
- Napsauta oikeassa yläkulmassa Review and update (Tarkista ja päivitä).
- Napsauta oikean paneelin alareunassa Päivitä.
- Valitse valintaikkunassa Hae upotuskoodi.
- Napsauta Upotuskoodi-välilehdellä Kopioi.
- Liitä upotuskoodi ulkoisen sivun HTML-moduuliin.
Voit upottaa lomakkeita ja tyylitellä niitä CSS:llä ulkoisessa stylesheetissä. 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 voit määrittää mukautetun muotoilun upotetuille lomakkeille CSS:n avulla.
Kehittäjäkoodin käyttäminen:
- Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
- Napsauta oikeassa yläkulmassa Review and update (Tarkista ja päivitä).
- Napsauta oikean paneelin alareunassa Päivitä.
- Valitse valintaikkunassa Hae upotuskoodi.
- Napsauta Kehittäjäkoodi (Lisäasetukset) -välilehteä.
- 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.
- Napsauta alareunassa Kopioi.
- 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.