Toimii on julkaistu hiljaisesti, joten nämä ohjeet kuvaavat palvelua, johon voit rekisteröityä ja jota voit käyttää jo nyt. Muutama osa on vielä matkalla — iOS- ja Android-sovellukset julkaistaan vielä vuoden 2026 aikana.

Näin upotat yhteydenottolomakkeen Webflowiin kahdessa minuutissa

Yksi Code Embed -elementti, kaksi riviä sen sisään, julkaise. Canvas näyttää paikkamerkin eikä lomaketta — niin Webflow piirtää script-tagin.

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

Toimiiko tämä oikeasti?

Kyllä. Code Embed on Webflown oma elementti: se ottaa kaksi riviä vastaan juuri sellaisinaan ja suorittaa ne julkaistulla sivulla, eikä mitään Appia tarvitse asentaa. Tilaukselle on yksi ehto, alla.

Vaihe vaiheelta

Avaa sivu Designerissä

Avaa Designerissä sivu, jolle lomake tulee, ja vieritä siihen kohtaan, johon haluat sen.

Vedä Code Embed -elementti

Vedä elementti Add-paneelista canvasille siihen osioon tai säiliöön, johon lomake kuuluu.

Liitä upotuskoodi

Tuplaklikkaa elementtiä avataksesi sen koodieditorin, liitä komponenttisi Toimii-sivulta kopioidut kaksi riviä ja tallenna. Kopioi ne käsin kirjoittamisen sijaan — elementin nimi on juuri sinun komponenttisi oma.

Julkaise ja tarkista live-sivu

Julkaise sivusto, avaa sitten julkaistu sivu ja lähetä itsellesi testiviesti. Vasta perille tullut viesti todistaa, että koko ketju toimii.

Vaadittu tilaus

Mukautettu koodi on maksullinen ominaisuus, ja sen avaa kaksi eri asiaa: maksullinen Workspace tai sivustolla voimassa oleva Site plan. Kumpi tahansa riittää yksinään — useimmat ohjeet menevät juuri tässä pieleen. Webflow listaa kelpaavat tilaukset omalla Code Embed -elementin sivullaan; muualla siteeratut tilaustasot ja hinnat ovat muuttuneet useammin kuin kerran.

Sudenkuopat

Julkaisu menee vain niihin domaineihin, jotka valitset julkaisuikkunassa. Jos lomake näkyy staging-osoitteessa mutta puuttuu omasta domainistasi, tarkista ensimmäisenä tuo valinta.
Tyylittele säiliötä, älä lomaketta: leveys, tasaus ja välit kuuluvat sille elementille, jonka sisällä Code Embed on. Lomakkeen oma ulkoasu säädetään Toimiissa.
Kaksi lomaketta samalla sivulla tarkoittaa kahta komponenttia, joilla kummallakin on omat kaksi riviään. Samojen rivien liittäminen toiseen kertaan vain toistaa ensimmäisen lomakkeen, ja molemmat päätyvät samaan paikkaan.

Usein kysyttyä

Designer ei näytä lomaketta — onko se rikki?

Ei. Webflow piirtää canvasille paikkamerkin jokaisen script-tagin kohdalle, joten lomake ilmestyy vasta kun sivu tarjoillaan. Preview suorittaa mukautetun koodin, jos kytket sen päälle, mutta tarjoilee sivun Webflown omasta osoitteesta — julkaistu sivu on yhä se testi, joka ratkaisee.

Toimiiko tämä Webflown ilmaisella tilauksella?

Ei — mukautettu koodi on Webflowissa se maksullinen osa. Ennen kuin ostat mitään, tarkista, mitä sinulla jo on: maksullinen Workspace kattaa sen siinä missä Site plan, ja kumpi tahansa riittää yksinään.

Onko ristiriidassa Webflow Interactionsin tai animaatioiden kanssa?

Ei. Komponentti on omassa Shadow DOM:issaan — se ei näe Webflown interaktioita tai animaatioita, eikä Webflow näe komponentin sisälle. Molemmat toimivat rinnakkain.

Upotatko eri alustalle?

Samat 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

Lisää Code Block mille tahansa sivulle. Vaatii tilauksen, jonka code blockit saavat suorittaa JavaScriptiä.

Lue koko opas

Wix

Käytä Wixin Custom Element -elementtiä: komponentin script-URL Server URL -kenttään, sen tagi Tag Name -kenttään. HTML-upotus ei toimi — se on sandboxattu iframe.

Lue koko opas

Shopify

Lisää Custom Liquid -osio Shopifyn teema-editorissa — ei sovellusasennusta, ei teemakoodin muokkausta. Kassasivu on ainoa paikka, johon se ei sovi.

Lue koko opas

Staattiset sivustot

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

Lue koko opas

HTML / Muu

Pelkkä HTML-sivu riittää. Avaa tekstieditorissa, liitä, tallenna, lataa palvelimelle. Kolme askelta ja toimii.

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.

Aloita ilmainen kokeilu

Ei luottokorttia. Valmis kahdessa minuutissa.