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ättömällä sivustolla joko

• Lomakekoodin upottaminen olemassa olevalle sivulle.
• Luomalla itsenäinen lomakesivu, johon voit linkittää.

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

Jos käytät WordPressiä, opettele lisäämään lomake WordPress-postaukseen 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ähettäminen suodatetaan roskapostiin.

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 analytiikka, HubSpot-seurantakoodisi on asennettava ulkoiselle sivulle, johon sijoitat HubSpot-lomakkeen.

Luo itsenäinen lomakesivu

Voit myös jakaa lomakkeen 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, pääsee käsiksi lomakkeeseen.

• 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 upotettua lomaketta HubSpotin lomakeditorilla, 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 voidaan tyylitellä vain sisältöeditorinlomakemoduulin tyylivaihtoehdoilla.

Muotoile lomakkeesi teemalla (legacy)

Jos haluat tyylitellä vanhan lomakkeen kirjoittamatta mitään mukautettua koodia, voit soveltaa esiasetus teemoja sulautettuun lomakkeeseen tai itsenäiseen lomakesivuun. Nämä teemat lisäävät lomakkeisiisi lisää mukautusvaihtoehtoja lomakkeen yleisten tyyliasetusten lisäksi.

Voit tyylitellä lomakkeen 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ä

Voit myös tyylitellä lomakkeita yksityiskohtaisemmalla tasolla.

Mukautetun tyylin käyttäminen:

• Siirry HubSpot-tililläsi kohtaan Markkinointi > Lomakkeet.
• Vie hiiren kursori lomakkeen päälle ja valitse Muokkaa.
• Jos muokkaat vanhaa lomaketta ja sinulla on Marketing Hub Starter- , Professional- tai Enterprise-tilaus , napsauta lomakkeen muokkausohjelman tyyli- ja esikatseluvälilehteä .
  • Napsauta vasemmanpuoleisessa ruudussa Style (tyyli ) -osiota. Täällä voit määrittää lomakekentän leveyden, kirjasinperheen, fonttikoot, kirjasinvä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ä.
    
    

• Jos käytät päivitettyä lomakeeditoria, napsauta vasemmalla puolella olevaa Muotoilu-kuvaketta.
  • Kun muokkaat tekstiä, syöttökenttiä tai painiketta, voit valita olemassa olevista tyyleistä kenttien syöttötyylien pikavalikoiman avulla. Vaihtoehtoisesti voit mukauttaa tyylin manuaalisesti lomakkeen kullekin komponentille:
    • Kentät: Mukauta kenttää, 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.
    • 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.

Muotoile upotettu lomake CSS:llä ulkoisessa tyylitaulussa (legacy)

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

Huomaa: voit asettaa vanhat lomakkeet vain raa'an HTML:n muodossa.

Voit tyylitellä 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 lomakkeesi:
  
  • 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