Perinteisen lomakkeen määrittäminen ja muotoilu ulkoisella sivustolla

Kun olet luonut lomakkeen HubSpotissa, voit lisätä sen HubSpot-sivuille tai sivuille, jotka olet luonut HubSpotin ulkopuolella. Lomakkeita voi jakaa ulkoisella, HubSpotin ulkopuolella ylläpidetyllä sivustollasi joko:

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

Kummallakin menetelmällä HubSpotin lomaketyökalussa lomakkeeseen tehdyt muutokset näkyvät automaattisesti ulkoisen sivustosi julkaistussa lomakkeessa. Lomakkeen lisäämisen jälkeen voit muokata upotetun HubSpot-lomakkeen ulkoasua ulkoisilla sivuillasi lomakkeen muokkaustyökalussa tai CSS:n avulla ulkoisessa tyylitiedostossasi. Jos käytät WordPressiä, lue ohjeet lomakkeen lisäämisestä WordPress-julkaisuun tai -sivulle.

Huomaa: tämä artikkeli koskee vain vanhan editorin avulla luotuja olemassa olevia lomakkeita. Lomakkeiden luomiseen ja hallintaan suositellaan päivitetyn lomakeeditorin käyttöä. Lue, miten voit muotoilla ja upottaa lomakkeita ulkoiselle sivustolle.

Ennen kuin aloitat

Kun lisäät lomakkeen upotuskoodin ulkoiselle sivulle, sivun verkkotunnus on lisättävä sivuston verkkotunnuksiksi, jotta sitä käsitellään luotettavana verkkotunnuksena. Muussa tapauksessa lomakkeeseen lähetetyt tiedot suodatetaan roskapostiksi.

Hae lomakkeen upotuskoodi

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 Toiminnot > Jaa.
3. Jos haluat lisätä lomakkeen lähettäneet yhteystiedot Salesforce-kampanjaan, napsauta valintaikkunassa Lisää yhteystiedot Salesforce-kampanjaan -pudotusvalikkoa ja valitse kampanja. Jos liität lomakkeeseen Salesforce-kampanjan, lomakkeen upotuskoodi muuttuu. Tällöin sinun on lisättävä upotuskoodi uudelleen ulkoiselle sivustollesi.
4. Napsauta Kopioi.
5. Liitä upotuskoodi ulkoisen sivusi HTML-moduuliin. Jotta voit seurata lomakkeen analytiikkaa, HubSpot-seurantakoodin on oltava asennettuna ulkoiselle sivulle, jolle sijoitat HubSpot-lomakkeen.

Luo erillinen lomakesivu

Voit myös jakaa lomakkeesi jakolinkin kautta. Jakolinkissä lomake näkyy erillisellä sivulla omalla URL-osoitteellaan. Tätä jakolinkkiä ei voi piilottaa tai asettaa yksityiseksi. Jokainen, jolla on jakolinkki, pääsee lomakkeeseen.

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 Toiminnot > Jaa.
3. Napsauta valintaikkunassa Jaa-linkki-välilehteä .
4. Napsauta Kopioi kopioidaksesi lomakesivun URL-osoitteen leikepöydälle.
5. Avaa selaimessasi uusi ikkuna tai välilehti ja liitä lomakesivun URL-osoite osoiteriville ladataksesi sen. Voit myös jakaa lomakesivun URL-osoitteen suoraan muille, jotta he pääsevät käyttämään lomaketta.
   
   

Muokkaa upotetun lomakkeen ulkoasua lomakkeen muokkausohjelmassa

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

Huomaa: lomakeeditorissa määritetyt teemat ja tyylit koskevat vain upotettuja lomakkeita tai erillisiä lomakesivuja. HubSpot-sivuillasi olevien lomakkeiden ulkoasua voi muokata vain sisältöeditorinlomakemoduulin tyylivaihtoehdoilla.

Muotoile lomake teeman avulla

Jos haluat muotoilla vanhan lomakkeesi kirjoittamatta mukautettua koodia, voit soveltaa valmiita teemoja upotettuun lomakkeeseesi tai erilliseen lomakesivuusi. Nämä teemat lisäävät lomakkeisiisi lisää mukautusvaihtoehtoja yleisten lomaketyylien asetusten lisäksi.

Voit muotoilla lomakkeen teeman avulla 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 lomakkeen muokkausnäkymässä Tyyli ja esikatselu -välilehteä .
4. Jos muokkaat vanhaa lomaketta, poista vasemmassa ruudussa valinta Säilytä vanha teema -valintaruudusta . Tämä poistaa lomakkeeseen aiemmin sovelletun HubSpotin oletustyylityksen. Lomakkeeseen lisäämäsi mukautetut CSS- tai JavaScript-koodit eivät enää toimi. Tämä valintaruutu ei koske tililläsi luotuja uusia lomakkeita.
5. Valitse teema.
6. Napsauta oikeassa yläkulmassa Julkaise tai Päivitä.

Käytä mukautettua tyyliä

Voit myös muotoilla lomakkeita tarkemmin.

Mukautetun tyylin soveltaminen:

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 lomakeeditorissa Tyyli ja esikatselu -välilehteä .
   • Napsauta vasemmassa ruudussaTyyli-osiota. Täällä voit määrittää lomakekenttien leveyden, fonttiperheen, fonttikoot, fonttivärit ja lomakepainikkeen. Nämä tyylit määritetään lomakekohtaisesti, ja ne ohittavat lomakkeiden yleiset tyyliasetukset.
   • Kun olet mukauttanut lomakkeen, napsauta oikeassa yläkulmassa Julkaise tai Päivitä.

Muokkaa upotetun lomakkeen tyyliä CSS:llä ulkoisessa tyylitiedostossa (vanha menetelmä)

Jos käytät vanhaa lomaketyyppiä, voit upottaa lomakkeen raakamuotoisena HTML-lomakkeena. Tämän jälkeen voit muotoilla upotetun lomakkeen CSS:llä ulkoisessa tyylitiedostossasi.

Huomaa: vain vanhat lomakkeet voidaan määrittää raakamuotoisiksi HTML-lomakkeiksi. Lue lisää upotetun lomakkeen muotoilusta CSS:llä päivitetyssä lomakeeditorissa.

Ulosmuotoile upotettu lomake CSS:llä 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 lomakkeen muokkausnäkymässä Tyyli ja esikatselu -välilehteä .
4. Napsauta kytkintä Aseta raakana HTML-lomakkeena , jotta se kytkeytyy päälle. Lomake näkyy ulkoisella sivullasi raakana HTML-elementtinä eikä iframe-kehyksen sisällä. Kaikki lomakkeeseen sovelletut HubSpotin oletusmuotoilut poistetaan.
5. Napsauta oikeassa yläkulmassa Julkaise tai Päivitä.
6. Lisää lomakkeen upotuskoodi ulkoiselle sivullesi. Jos olet jo upottanut lomakkeen, sinun on korvattava olemassa oleva upotuskoodi tällä uudella, tyylittömällä versiolla. Kun olet upottanut lomakkeen:
   
   • Voit muotoilla lomaketta ulkoisessa tyylitiedostossasi CSS:n avulla.
   • Voit myös muokata lomakkeen upotuskoodia tehdäksesi lisämuokkauksia lomakkeeseen. Koska HubSpot-lomakkeet on rakennettu JavaScriptillä, ei HTML:llä, lomakkeen upotuskoodin muokkaaminen vaatii sellaisen kehittäjän apua, joka osaa työskennellä JavaScriptin kanssa.