Nämä ohjeet kuvaavat Toimiita julkaisun jälkeen. Hallintapaneeli ja laskutus eivät ole vielä käytössä — Toimii julkaistaan vuonna 2026.

Yksinkertaisin tapa lisätä yhteydenottolomake tavalliselle HTML-sivulle

Kaksi riviä mihin tahansa <body>-tagin sisään. Ei buildaystä, ei riippuvuuksia. Jos osaat tallentaa ja ladata, osaat tämän.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Toimiiko tämä oikeasti?

Kyllä — ja tämä on yksinkertaisin tapaus. Tavallisella HTML:llä ei ole lisäosa-sandboxia, editorin skriptisensuuria, eikä tilaustasoja. Kaksi riviä toimivat missä tahansa, missä voit tallentaa ja ladata .html-tiedoston.

Vaihe vaiheelta

Avaa .html-tiedostosi

Avaa muokattava .html-tiedosto millä tahansa tekstieditorilla — VS Code, Sublime, Notepad++, jopa TextEdit (selkokielitilassa).

Liitä upotuskoodi

Liitä Toimii-koontinäytöltä saamasi kaksi riviä <body>-tagin sisään kohtaan, johon haluat lomakkeen ilmestyvän.

Tallenna ja lataa palvelimelle

Tallenna tiedosto ja lataa se palvelimellesi — FTP, S3, Netlify-vetolaatikko, miten ikinä lataatkin. Avaa sivu selaimessa varmistaaksesi.

Yleiset sudenkuopat

Älä liitä koodia <head>-tagin sisään. Mukautettu elementti on body-tason tagi — sen täytyy olla <body>-tagin sisällä.
Älä poista async-attribuuttia script-tagista. Ilman sitä script estää muun sivun renderöinnin.
Jos kopioit ja liität rich-text-editorista, voit saada älylainausmerkit (" ") suorien (") sijaan. Käytä tavallista tekstieditoria — VS Code, Sublime, Notepad, TextEdit selkokielitilassa.
Jos sivullasi on jo Content-Security-Policy meta-tageja, salli cdn.toimii.io kohdissa script-src ja connect-src. Tavallisilla HTML-sivuilla ei yleensä ole CSP:tä lainkaan.

Usein kysyttyä

Tarvitsenko backendin tai PHP:n?

Et tarvitse backendia. Lähetykset menevät suoraan lomakkeesta Toimii-palvelun rajapintaan — HTML-sivusi voi sijaita missä tahansa, vaikka ilmaisella staattisella palvelulla.

Voinko avata .html-tiedoston suoraan file://-protokollalla?

Riippuu selaimesta. Chrome ja Safari avaavat .html-tiedostot file://-protokollalla ongelmitta; Firefox estää cross-origin-skriptit file://-osoitteissa. Luotettava tapa testata on käynnistää pieni paikallinen palvelin (npx serve, python -m http.server) ja avata http://localhost.

Toimiiko CodePenissä, JSFiddlessä tai sandboxissa?

Kyllä — liitä molemmat rivit HTML-paneeliin. Script latautuu ja komponentti renderöityy esikatselun iframe-kehykseen.

Toimiiko offline-tilassa?

Sivu latautuu, mutta lomake tarvitsee verkkoyhteyden lähettääkseen. Jos kävijä on offline, sivu renderöityy normaalisti — viestiä ei vain voi lähettää ennen kuin yhteys palaa.

Upotat eri alustalle?

Sama kaksi riviä koodia, jokaiselle alustalle eri ohjeet.

WordPress

Custom HTML -lohko, Block-editori tai perinteinen. Ei lisäosia. Yksi mutka — käyttäjäroolisi tarvitsee unfiltered_html-oikeuden.

Lue koko opas

Squarespace

Pudota koodilohko mille tahansa sivulle. Vaatii Core-tilauksen (vuoden 2025 uusi nimi Businessille) tai uudemman.

Lue koko opas

Webflow

Code Embed -elementtiin mahtuu 50 000 merkkiä. Mukautettu koodi vaatii Basic-tilauksen tai uudemman. Julkaise nähdäksesi tuloksen.

Lue koko opas

Wix

Wix sandboxaa Embed-widgetin, joten käytämme jaettua menetelmää — script Settings → Custom Code -kohtaan, tagi Embed a Widget -lohkoon. Rehellinen ohje.

Lue koko opas

Shopify

Lisää Custom Liquid -osio mihin tahansa teemaan — sovellusta ei tarvita. Kassasivu vaatii Shopify Plus -tilauksen.

Lue koko opas

Staattiset sivustot

Astro, Hugo, 11ty, Jekyll — sama kaksi riviä layout-tiedostoon. Buildit pysyvät nopeina.

Lue koko opas

React / Vue / Angular

Käytä mukautettua elementtitagia suoraan JSX:ssä, Vue-templateissa tai Angular-komponenteissa. Ei wrapper-komponenttia, ei lisäpaketteja.

Lue koko opas

Valmis kokeilemaan?

30 päivän ilmainen kokeilu. Ei luottokorttia. Valmis minuuteissa.

Ei luottokorttia. Valmis kahdessa minuutissa.