HubSpot-lomakkeiden muotoilu ja upottaminen ulkoiselle sivustolle

Käytä HubSpot-lomakkeita ulkoisella verkkosivustollasi liidien keräämiseen ja synkronoi yhteystiedot automaattisesti HubSpot-tiliisi. Voit muokata lomakkeen ulkoasua HubSpotissa ja lisätä sen sivustollesi lomakkeen upotuskoodin avulla. Tai voit lähettää itsenäisen lomakkeen kohdeyleisöllesi jakolinkin avulla.

Lomakkeen upottaminen varmistaa, että lähetetyt tiedot synkronoidaan suoraan HubSpot-tiliisi, jossa voit hallita yhteystietoja, käynnistää automaatiota ja analysoida suorituskykyä. Voit esimerkiksi lisätä HubSpot-lomakkeen yrityksesi verkkosivuston tuotesivulle kerätäksesi esittelypyyntöjä ja lähettääksesi niihin automaattisen seurantasähköpostin.

Jos lomakkeesi on luotu vanhassa lomakeeditorissa, lue ohjeet vanhan lomakkeen määrittämisestä ja muotoilusta ulkoisella sivustolla.

Ennen kuin aloitat

Ennen kuin alat käyttää tätä ominaisuutta, tutustu ulkoisilla sivustoilla käytettävien lomakkeiden teknisiin vaatimuksiin ja huomioitaviin seikkoihin.

Vaatimukset

• Jos haluat seurata upotetun lomakkeen analytiikkaa, asenna HubSpot -seurantakoodi ulkoiselle sivullesi.
• Kun upotat HubSpot-lomakkeen ulkoiselle sivustolle, sinun on lisättävä sivuston verkkotunnus seuranta-asetuksiisi. Lomakkeiden lähetykset verkkotunnuksista, joita ei ole lisätty ,merkitään roskapostiksi.

Rajoitukset ja huomioitavat seikat

• Lomakkeen määrittäminen raakana HTML-lomakkeena ei ole mahdollista päivitetyssä lomakeeditorissa. Vain vanhalla lomakeeditorilla luodut lomakkeet voidaan määrittää raakana HTML-lomakkeina.
• Lomakkeen upotuskoodin mukauttaminen edellyttää JavaScriptin hallitsevan kehittäjän apua. Edistyneempiä mukautuksia voidaan tehdä räätälöidyllä lomakkeella ja HubSpot Forms API:n avulla.

Muokkaa lomakkeen ulkoasua

Mukauta lomakkeen ja lomakkeen vaiheiden tekstiä, syöttökenttiä, painikkeita ja taustaa. Lomakkeen tyylimukautukset koskevat kaikkia lomakkeen vaiheita. Yksittäisiä lomakkeen vaiheita ei voi muotoilla erikseen.

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Lomakkeet. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Lomakkeet.
2. Luo uusi lomake tai vie hiiri olemassa olevan lomakkeen päälle ja napsauta Muokkaa.
3. Napsauta vasemmassa sivupalkin valikossa Muokkaa lomakkeen tyyliä ( styles ) -kuvaketta.
4. Lomaketyylit-paneelissa voit mukauttaa seuraavia komponentteja:
   • Kentät: muokkaa kenttää, mukaan lukien tausta ja reunat. Voit myös muokata tekstien fonttia, fonttikokoa ja värejä sekä ohjetekstin, paikkamerkkien ja virhetekstin värejä.
   • Painikkeet: muokkaa painikkeen korkeutta, kulmien pyöristystä, taustaa ja väriliukua sekä lisää painikkeeseen varjostus. Voit myös muokata painikkeen tekstin fonttia, fonttikokoa ja väriä.
   • Kappale (rikas teksti): muokkaa tekstin fonttia, fonttikokoa ja väriä.
   • Otsikko: muokkaa otsikon fonttia ja tekstin väriä. Voit halutessasi lisätä varjon otsikkotekstiin.
   • Tausta: muokkaa lomakkeen ja lomakkeen vaiheiden taustaa. Voit asettaa taustavärin tai käyttää kuvaa taustana. Voit käyttää tekoälyavustajia kuvien luomiseen. Voit myös asettaa lomakkeelle reunan.
   • Edistymispalkki: muokkaa lomakkeen edistymispalkkia, mukaan lukien edistymisviivan väri ja edistymispalkin fontti.

Jaa erillinen lomakesivu

Käytä jakolinkkiä, jotta lomake näkyy erillisellä sivulla. Jokainen, jolla on jakolinkki, pääsee lomakkeeseen. Jakolinkkien URL-osoitteet luodaan automaattisesti, eikä niitä voi muokata tai mukauttaa.

Voit kopioida jakolinkin seuraavasti:

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Lomakkeet. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Lomakkeet.
2. Vie hiiri lomakkeen päälle ja napsauta Muokkaa.
3. Napsauta oikeassa yläkulmassa Tarkista ja päivitä.
4. Napsauta oikean paneelin alaosassa Päivitä.
5. Napsauta valintaikkunassa Kopioi jakolinkki.
6. Napsauta alareunassa Kopioi. Tämä kopioi sivun verkko-osoitteen leikepöydällesi.
7. Avaa selaimessasi uusi ikkuna tai välilehti ja liitä sivun URL-osoite osoiteriville 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 lomake ulkoiselle sivullesi kopioimalla lomakkeen upotuskoodi ja liittämällä se ulkoiselle sivullesi. Jotta voit seurata upotetun lomakkeen analytiikkaa, HubSpot-seurantakoodin on oltava asennettuna ulkoiselle sivulle, johon upotat HubSpot-lomakkeen.

Upotuskoodin kopioiminen:

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Lomakkeet. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Lomakkeet.
2. Vie hiiri lomakkeen päälle ja napsauta Muokkaa.
3. Napsauta oikeassa yläkulmassa Tarkista ja päivitä.
4. Napsauta oikean paneelin alaosassa Päivitä.
5. Napsauta valintaikkunassa Hanki upotuskoodi.
6. Napsauta Upotuskoodi -välilehdessä Kopioi.
7. Liitä upotuskoodi ulkoisen sivusi HTML-moduuliin.

Siirry lomakkeen kehittäjän koodiin

Upota lomake ja muokkaa sen tyyliä CSS:n avulla ulkoisessa tyylitiedostossasi. Tällä menetelmällä voit ohittaa oletustyylit, soveltaa tarkkoja tyylimäärittelyjä tiettyihin lomake-elementteihin ja asettaa yleisiä sääntöjä, jotta upotettujen lomakkeiden tyyli on yhdenmukainen. Lue lisää siitä, miten määrität upotettujen lomakkeiden mukautetun tyylin CSS:n avulla.

Voit käyttää kehittäjän koodia seuraavasti:

1. Napsauta HubSpot-tilissäsi Lisää ja siirry sitten kohtaan Markkinointi > Lomakkeet. Jos Lisää-kohtaa ei näy tilissäsi, siirry suoraan kohtaan Markkinointi > Lomakkeet.
2. Vie hiiri lomakkeen päälle ja napsauta Muokkaa.
3. Napsauta oikeassa yläkulmassa Tarkista ja päivitä.
4. Napsauta oikean paneelin alaosassa Päivitä.
5. Napsauta valintaikkunassa Hanki upotuskoodi.
6. Napsauta Kehittäjän koodi (Lisäasetukset) -välilehteä.
7. Jos hyväksyt riskin, että ulkoisesti CSS- tai JavaScript-tiedostoihin tehdyt muutokset voivat aiheuttaa lomakkeen toimimattomuuden, valitse valintaruutu Ymmärrän riskit, näytä koodi.
8. Napsauta alareunassa Kopioi.
9. Lisää lomakkeen upotuskoodi ulkoiselle sivullesi. Kun olet upottanut lomakkeen, voit muokata lomakkeen ulkoasua ulkoisessa tyylitiedostossasi CSS:n avulla.
   • Tässä artikkelissa on luettelo CSS-muuttujista, joita voit ohittaa.
   • Yleiset tyylit ohittavat ylätason muotoilun kaikissa upotetuissa lomakkeissasi. Voit myös kohdistaa muotoilun lomakkeiden yksittäisiin elementteihin, kuten lomakeelementtiriviin, lähetyspainikkeisiin tai lomakkeiden otsikoihin.