MailChimp on yksi maailman eniten käytetyimmistä uutiskirjetyökaluista. MailChimpia voi käyttää ilmaiseksi, jos uutiskirjeen tilaajia on alle 2000 ja viestejä lähettää alle 12 000 kuukaudessa. Tällä kertaa käymme läpi, miten uutiskirjeen tilauslomakkeen saa liitettyä MailChimpistä omille sivuille.
Lisäosat ja lomakkeen upotus
MailChimpia varten on useita WordPress-lisäosia, mutta valitettavasti ne ovat mielestäni varsin huonoja. Tämän takia tällä kertaa emme käytä lomakkeen lisäämiseen mitään lisäosaa. Ennen kuin lomaketta voi lisätä, MailChimpissa pitää luoda uutiskirjeelle lista. Tämän jälkeen listalle voi rakentaa tilauslomakkeen.
Listan lomakkeiden hallinnassa on embedded forms -osio, jossa voi valita erilaisia lomakkeen upotusvaihtoehtoja. Kun upotusvaihtoehdon on valinnut, tämän jälkeen lomakkeen koodi pitää lisätä WordPressiin. Lomakkeen voi lisätä sivupalkkiin teksti-vimpaimella. Jos lomakkeen haluaa upottaa sivuun tai artikkeliin, tällöin pitää käyttää sisältöeditorissa teksti-tilaa, koska koodi on HTML:ää.
Alla video lomakkeen lisäämisestä.
Videon käsikirjoitus
Tervetuloa WordPress-oppaan pariin. Tällä kertaa käymme läpi, miten lisätä MailChimp-lomake WordPress-sivuille.
MailChimpin omassa hallinnassa voi luoda uutiskirjeen tilausta varten tilauslomakkeen. Lomakkeesta on myös saatavilla upotettava koodi, jonka voi tallentaa WordPressiin. Koodin löytää MailChimpistä listan lomakekohdasta.
Upotusvaihtoehtoja on useita. Itse suosin Naked-vaihtoehtoja, sillä silloin lomakkeen mukana ei tule mitään tyylimäärityksiä. Kun lomake liitetään omille sivuille, tällöin lomakkeen halutaan sopivan omaan sivustoon. Yleensä käytössä olevassa teemassa on valmiiksi lomakkeille tyylimääritykset, joten on parempi liittää sellainen lomake, johon ei tule mitään tyylejä. Tällä videolla lomake liitetään WordPressin mukana tulevaan Twenty Thirteen teemaan.
Upotusta varten voi säätää muutamia juttuja. Poistan ensinnä otsakkeen kokonaan, sillä haluan määrittää otsakkeen erikseen WordPressissä. Lomake kannattaa pitää mahdollisimman yksinkertaisena, joten otan lomakkeelle mukaan vain pakolliset kentät. Poistan myös pakollisuuteen liittyvät tekstit.
Napin teksti on vielä englanniksi, mutta vaihdamme sen hetken kuluttua.
Seuraavaksi kopioimme upotuskoodin WordPressin tekstivimpaimeen. Tallennuksen jälkeen näemme lomakkeen sivupalkissa. Tehdään vielä pari parannusta.
Poistan sähköpostiosoite tekstin ja siirrän sen lomakekentän placeholderiksi. Seuraavaksi muutan vielä tilausnapin tekstiä. Kopioidaan muutettu koodi vimpaimeen.
Nappi on vielä ihan kiinni tekstikentässä. Asetetaan napille pieni marginaali ja korvataan koodi jälleen vimpaimessa.
Nyt meillä on sivupalkissa yksinkertainen lomake, jonka kautta uutiskirjeen voi MailChimpista tilata.
Lomakkeen lisäys sivulle tai artikkeliin onnistuu myös kun muokkaamiseen käyttää Teksti-välilehteä.
En saa näkyviin ollenkaa ”tilaa”-nappia, mistähän voisi johtua?
Vaikeaa arvailla näkemättä tilannetta. Luultavasti joku käytössä olevan teeman CSS-sääntö tekee jotakin sellaista minkä takia nappi on kadoksissa.
Löysin pienen hakemisen jälkeen vian syyn joka ilmeisesti on ollut muillakin. Mailchimpin antama koodi oli nappulan osalta vääränlainen jostain syystä.
Ok, hyvä että nyt toimii :)
Hei,
Mites MailChimp toimii, kun en pääse Sign Up Free painikkeen kautta luomaan tiliä? Miten pääsen luomaan listan?
Minulla sign up nappi vie seuraavalle sivulle https://login.mailchimp.com/signup jossa näen rekisteröitymislomakkeen. Kenties joku hetkellinen häiriö palvelussa.
Kiitos hyvistä WP-ohjeista, täällä näitä nyt opettelen hitaasti ja epävarmasti. Sain lisättyä onnistuneesti tilausruudun sivuilleni, mutta marginaalin lisääminen ei toimi. Käytössä WP 3.9.3, vaikuttaakohan jotenkin asiaan?
Marginaalin toimimattomuus saattaa johtua jostain teeman tyylisäännöstä, joka esim. ylikirjoittaa säännön. Näkemättä sivua ja teemaa vaikea sanoa, mistä lopulta johtuu ja miten sen saisi korjattua. WP:n versio tähän ei vaikuta.
Jos siirrät tuon jälkimmäisen input-elementin ensimmäisen inputin perään niin luultavasti se auttaa jo huomattavasti.