HubSpot-lomakkeen määrittäminen ja tyylittely ulkoisella sivustolla (vanha)

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 tyylitellä upotetun HubSpot-lomakkeen ulkoisilla sivuillasi lomake-editorissa tai CSS:llä ulkoisessa tyylitaulussa.

Jos työskentelet WordPressin kanssa, opettele lisäämään lomake WordPress-virkaan tai -sivuun.

Huomaa: lomakkeiden luomiseen ja hallintaan suositellaan käytettäväksi päivitettyä lomakeeditoria. Tätä artikkelia tulisi käyttää viitteenä vain olemassa oleville lomakkeille, jotka on luotu vanhalla editorilla. Lue lisää lomakkeiden muotoilusta ulkoisella sivustolla...

Lisää lomakkeen upotuskoodi

Huomaa: 16. toukokuuta 2024 alkaen, kun lisäät lomakkeen upotuskoodia 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.

• 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ässä tapauksessa 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ä vanhan lomakkeen kirjoittamatta mitään mukautettua koodia, voit soveltaa valmiita 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ä

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 sinulla on Marketing Hub Starter-, Professional- tai Enterprise-tilaus , napsauta lomakeditorin tyyli- ja esikatseluvälilehteä .
  • Napsauta vasemmanpuoleisessa ruudussaTyyli-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ä.
    
    

Sisällytetyn lomakkeen tyylittely ulkoisen tyylitaulukon CSS:llä (vanhaa)

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 stylesheetissäsi.

Huomaa: voit asettaa vanhat lomakkeet vain raa'an HTML:n muodossa. Lisätietoja upotetun lomakkeen muotoilusta CSS:llä päivitetyssä lomakeditorissa.

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 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.