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

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ä:

• Upota lomake kopioimalla upotuskoodi ja lisäämällä se ulkoiselle sivullesi.
• Käytä lomakkeen jakolinkkiä, joka tarjoaa lomakkeellesi erillisen verkkosivun, johon voit linkittää.

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

• Jos haluat asettaa lomakkeesi raa'aksi HTML-lomakkeeksi, tämä vaihtoehto ei ole käytettävissä päivitetyssä lomakeditorissa. Ainoastaan vanhalla lomakeditorilla rakennetut lomakkeet voidaan asettaa raa'an HTML:n muotoon.
• Jos upotat HubSpot-lomakkeen ulkoiselle sivulle, sinun on asennettava HubSpot-seurantakoodi analytiikan seuraamiseksi. Lue, miten HubSpot-seurantakoodi asennetaan.

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.

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 vasemman sivupalkin valikossa styles Styling-kuvaketta.
4. Voit mukauttaa tyyliä seuraaville lomakekomponenteille:
   • Kentät: Mukauta kentän tyyliä, mukaan lukien tausta ja reunukset. 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 lomakkeen upotuskoodi

Voit upottaa HubSpot-lomakkeen 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:

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.

Käytä jakolinkkiä erillisen lomakesivun jakamiseen

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ä:

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 Kopioi jakolinkki.
6. Napsauta alareunassa Kopioi. Tämä kopioi lomakkeen sivun verkko-osoitteen leikepöydälle.
7. 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.

Muotoile upotettu lomake CSS:llä ulkoisessa tyylitaulussa.

Marketing Hub- tai Content Hub Professional- tai Enterprise-tilin käyttäjät voivat 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:

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.