Muotoile upotettu HubSpot-lomake ulkoisilla sivuillasi kahdella tavalla lomake-editorissa tai CSS:llä ulkoisessa tyylitaulussa.
Lomakeeditorissa
Teema
Jos haluat tyylitellä lomakkeesi kirjoittamatta mitään mukautettua koodia, voit soveltaa esiasetettuja teemoja upotettuun lomakkeeseen tai erilliseen lomakesivuun. Teemat lisäävät lomakkeisiisi lisää mukautusvaihtoehtoja kaikkien -lomakkeen globaalien tyyliasetusten lisäksi.
- Napsauta lomakkeen nimeä .
- Napsauta lomakeeditorissa Style & Preview (Tyyli ja esikatselu ) -välilehteä.
- Poista vasemmanpuoleisen ruudun Teema-osiosta valinta Säilytä vanha teema -valintaruudusta.
Huomaa: Säilytä vanha teema -valintaruudun tyhjentäminen poistaa tähän lomakkeeseen sovelletun HubSpotin entisen oletusmuotoilun. Lomakkeeseen lisäämäsi mukautettu CSS tai JavaScript ei enää toimi. Tämä valintaruutu on käytettävissä vain vanhoissa lomakkeissa, eikä se ole käytettävissä tilillesi luoduissa uusissa lomakkeissa.
- Valitse yksi neljästä teemasta.
Tyyli(vainMarketing Hub Starter, Professional, Enterprise tai Legacy Marketing Hub Basic).
Teemojen lisäksi voit tyylitellä upotettuja lomakkeita tarkemmalla tasolla.
- Napsauta lomakkeen nimeä .
- Napsauta lomakeeditorissa Style & Preview -välilehteä.
- Laajenna vasemmanpuoleisen ruudun > Tyyli -osio napsauttamalla sitä. Täällä voit muotoilla lomakekentän leveyden, kirjasintyypin, fonttikoon, fonttivärin ja lomakepainikkeen.
Nämä tyylit asetetaan lomakekohtaisesti ja ne ohittavat lomakkeen yleiset tyyliasetukset.
Huomaa: Lomakeeditorissa asetettuja teemoja ja tyylejä sovelletaan vain upotettuihin lomakkeisiin tai itsenäisiin lomakesivuihin. HubSpot-sivujen lomakkeita voidaan tyylitellä vain sisältöeditorinlomakemoduulin tyyliasetuksilla .
CSS:n avulla ulkoisessa tyylitaulussa (Marketing Hub VainProfessional, Enterprise tai Legacy Marketing Hub Basic).
- Napsauta lomakkeen nimeä.
- Napsauta lomakeeditorissa Tyyli ja esikatselu -vä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 Share (Jaa).
- Kopioi lomakkeen upotuskoodi valitsemalla valintaikkunassa Kopioi.
- Lisää lomakkeen upotuskoodi ulkoiselle sivullesi. Jos olet jo upottanut lomakkeen, sinun on korvattava nykyinen upotuskoodi tällä uudella, muotoilemattomalla versiolla .
- Kun olet upottanut lomakkeen, voit tyylitellä lomakkeen ulkoisessa tyylitaulussa CSS:llä.
- Vaihtoehtoisesti voit muokata lomakkeen upotuskoodia ja tehdä lomakkeen lisämuokkauksia. Koska HubSpot-lomakkeet on rakennettu JavaScriptillä, ei HTML:llä,lomakkeen upotuskoodin muokkaaminen vaatii JavaScriptin kanssa työskentelyyn perehtyneen kehittäjän apua.