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. Lomakkeita voidaan jakaa ulkoisella, muulla kuin HubSpotin isännöimällä sivustolla joko

• Upottamalla lomakkeen koodi olemassa olevaan sivuun.
• Luomalla erillisen lomakesivun, johon voit linkittää.

Kummallakin menetelmällä HubSpotin lomaketyökalussa lomakkeeseen tehdyt muutokset heijastuvat automaattisesti ulkoisen sivustosi live-lomakkeeseen. Kun olet lisännyt lomakkeen, voit muotoilla upotetun HubSpot-lomakkeen ulkoisilla sivuillasi lomakeditorissa tai ulkoisen tyylitaulukkosi CSS:llä.

Jos työskentelet WordPressin kanssa, opettele, miten lomake lisätään WordPress-postiin tai -sivulle.

Huomaa: 16. toukokuuta 2024 alkaen, kun lisäät lomakkeen upotuskoodin ulkoiselle sivulle, sivun verkkotunnus on lisättävä sivuston verkkotunnukseksi, jotta sitä voidaan käsitellä luotettavana verkkotunnuksena. Jos näin ei tehdä, myös lomakkeen lähetykset suodatetaan roskapostiviesteihin.

Lisää lomakkeen upotuskoodi

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
• Vie hiiren kursori lomakkeen päälle ja valitse Toiminnot > Jaa.
• Jos haluat lisätä lomakkeen lähettäneet yhteyshenkilöt Salesforce-kampanjaan, napsauta valintaikkunassa Lisää yhteyshenkilöt Salesforce-kampanjaan -pudotusvalikkoa ja valitse kampanja. Jos yhdistät lomakkeeseen Salesforce-kampanjan, lomakkeen upotuskoodi muuttuu. Tällöin sinun on lisättävä upotuskoodi uudelleen ulkoiseen sivustoosi.
• Napsauta Copy (Kopioi).
• Liitä upotuskoodi ulkoisen sivusi HTML-moduuliin. Jotta voit seurata lomakkeesi analytiikkaa, HubSpot-seurantakoodisi on asennettava ulkoiselle sivulle, johon sijoitat HubSpot-lomakkeen.

Luo itsenäinen lomakesivu

Voit myös jakaa lomakkeesi Jaa-linkin kautta. Jaa-linkissä lomake näkyy erillisellä sivulla omalla URL-osoitteellaan. Tätä jakolinkkiä ei voi piilottaa tai tehdä yksityiseksi. Kuka tahansa, jolla on jakolinkki, voi käyttää lomaketta.

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
• Vie hiiren kursori lomakkeen päälle ja valitse Toiminnot > Jaa.
• Napsauta valintaikkunassa Jaa-linkki-välilehteä .
• Kopioi lomakkeen sivun URL-osoite leikepöydälle valitsemalla Kopioi.
• 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 lomakeeditorissa

Kun muotoilet upotetun lomakkeen HubSpotin lomakeeditorilla, voit joko käyttää teemaa tai soveltaa omaa mukautettua tyyliäsi.

Huomaa: Lomake-editorissa asetettuja teemoja ja tyylejä sovelletaan vain upotettuihin lomakkeisiin tai itsenäisiin lomakesivuihin. HubSpot-sivujen lomakkeita voi tyylitellä vain sisältöeditorinlomakemoduulin tyyliasetuksilla.

Muotoile lomakkeesi teemalla

Jos haluat tyylitellä lomakkeesi kirjoittamatta mitään mukautettua koodia, voit soveltaa esiasetettuja teemoja upotettuun lomakkeeseen tai erilliseen lomakesivuun. Nämä teemat lisäävät lomakkeillesi lisää mukautusvaihtoehtoja kaikkien globaalien lomaketyyliasetusten lisäksi.

Lomakkeen tyylittely teemalla:

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
• Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
• Napsauta lomakeeditorissa tyyli- ja esikatseluvälilehteä .
• Jos muokkaat vanhaa lomaketta, poista vasemmanpuoleisessa ruudussa Pitäkää vanha teema -valintaruudun valinta. Tämä poistaa tähän lomakkeeseen sovelletun entisen HubSpotin oletusmuotoilun. Lomakkeeseen lisäämäsi mukautettu CSS tai JavaScript ei enää toimi. Tämä valintaruutu ei koske tilillesi luotuja uusia lomakkeita.
• Valitse teema.
• Napsauta oikeassa yläkulmassa Julkaise tai Päivitä.

Käytä mukautettua tyyliä

Jos sinulla on Marketing Hub Starter-, Professional- tai Enterprise-tilaus HubSpot-tililläsi, voit myös tyylitellä upotettuja lomakkeita tarkemmalla tasolla.

Mukautetun tyylin käyttäminen:

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
• Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
• Napsauta lomakeeditorissa tyyli- ja esikatseluvälilehteä .
• Napsauta vasemmanpuoleisessa ruudussaTyyli-osiota. Täällä voit määrittää lomakekentän leveyden, kirjasinperheen, fonttikoot, fonttivärit ja lomakepainikkeen. Nämä tyylit määritetään lomakekohtaisesti, ja ne ohittavat lomakkeen yleiset tyyliasetukset.
• Kun olet mukauttanut lomakkeen, napsauta oikeassa yläkulmassa Julkaise tai Päivitä.
  
  

Sisällytetyn lomakkeen tyylittely ulkoisen tyylitaulukon CSS:llä

Jos sinulla on Marketing Hub- tai Content Hub Professional- tai Enterprise-tilaus HubSpot-tilisi yhteydessä, voit upottaa lomakkeesi raakana HTML-lomakkeena ja tyylitellä tämän upotetun lomakkeen CSS:llä ulkoisessa tyylitaulussa.

Tyylitelläksesi upotetun lomakkeen CSS:llä:

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
• Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
• Napsauta lomakeeditorissa tyyli- ja esikatseluvälilehteä .
• Napsauta Set as raw HTML form -kytkintä päälle. Lomake renderöityy ulkoisella sivulla raakana HTML-elementtinä eikä iframe-kehyksen sisällä, ja kaikki lomakkeeseen sovelletut HubSpotin oletusmuotoilut poistetaan.
• Napsauta oikeassa yläkulmassa Julkaise tai Päivitä.
• Lisää lomakkeen upotuskoodi ulkoiselle sivullesi. Jos olet jo upottanut lomakkeen, sinun on korvattava nykyinen upotuskoodi tällä uudella, tyylittelemättömällä versiolla. Kun olet upottanut lomakkeen:
  
  • Voit muotoilla lomakkeen ulkoisessa tyylitaulussa CSS:llä.
  • Voit myös muokata lomakkeen upotuskoodia tehdessäsi muita lomakkeen mukautuksia. Koska HubSpot-lomakkeet on rakennettu JavaScriptillä, ei HTML:llä, lomakkeen upotuskoodin mukauttaminen vaatii JavaScriptin kanssa työskentelyyn perehtyneen kehittäjän apua.