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

Näin upotat yhteydenottolomakkeen Webflowiin kahdessa minuutissa

Code Embed -elementti canvasiin. Julkaise nähdäksesi. Designer ei esikatsele mukautettua koodia — se on Webflow-juttu, ei Toimii-juttu.

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

Toimiiko tämä oikeasti?

Kyllä — Basic-tilauksella tai uudemmalla. Code Embed -elementti (uudelleennimetty "Embed"-komponentista vuonna 2024) ajaa inline-skriptit julkaisussa. Designer ei esikatsele mukautettua koodia, joten näet lomakkeen vain julkaistulla *.webflow.io-URL:lla tai live-domainilla.

Vaihe vaiheelta

Avaa sivu Designerissä

Klikkaa sivulle, jolle lomake tulee. Varmista että olet Basic-tilauksella tai uudemmalla — ilmainen Starter-tilaus poistaa mukautetun koodin.

Vedä Code Embed -elementti

Vedä Code Embed -elementti Add-paneelista canvasille kohtaan, jossa haluat lomakkeen. (Uudelleennimetty "Embed-komponentista" vuonna 2024 — sama asia.)

Liitä upotuskoodi

Tuplaklikkaa Code Embediä avataksesi koodieditorin. Liitä Toimii-koontinäytöltä saamasi kaksi riviä. Klikkaa Save & Close.

Älä odota Designer-esikatselua

Designer näyttää placeholderin upotuksen kohdalla — se on normaalia, mukautettu koodi ei esikatsele Designerissä.

Julkaise ja varmista

Klikkaa Julkaise. Katso lomake *.webflow.io-staging-URL:lla tai live-domainilla. Lähetä testiviesti varmistaaksesi.

Vaadittu tilaus

Webflow:n ilmainen Starter-tilaus poistaa mukautetun koodin julkaisussa. Käyttääksesi Toimii-palvelua tarvitset Basic-tilauksen ($14/kk) tai uudemman.

Yleiset sudenkuopat

Webflow Designer ei esikatsele mukautettua koodia. Näet placeholderin editorissa — lomake renderöityy vain julkaistulla sivulla. Julkaise nähdäksesi.
Code Embed -elementissä on 50 000 merkin raja. Upotuksemme on selvästi sen alle, mutta yhdistä huolellisesti jos liität useita asioita.
Mukautettu koodi vaatii vähintään Basic-tilauksen ($14/kk). Ilmainen Starter-tilaus poistaa mukautetun koodin julkaisussa.
Webflow:n "Embed-komponentti" uudelleennimettiin "Code Embed -elementiksi" vuonna 2024. Jos ohje sanoo "Embed", etsi Code Embed Add-paneelista.
Jos laitat upotuksen div-elementtiin, jolla on display flex / grid, lomakkeen Shadow DOM -juuri käsitellään lohko-tason elementtinä. Tyylittele vanhempi-elementtiä, ei komponenttia.

Usein kysyttyä

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

Ei. Webflow Designer ei suorita mukautettua koodia — se näyttää placeholderin upotuksen kohdalle. Nähdäksesi lomakkeen, klikkaa Julkaise ja katso *.webflow.io-staging-URL tai live-domainisi.

Toimiiko ilmaisella Starter-tilauksella?

Ei — mukautettu koodi vaatii Basic-tilauksen ($14/kk) tai uudemman. Ilmainen Starter-tilaus estää kaiken mukautetun koodin, joten upotus ei aja ennen päivitystä.

Näen "Code Embed -elementin" — onko se sama kuin vanha "Embed"?

Webflow uudelleennimesi "Embed"-komponentin "Code Embed -elementiksi" vuonna 2024. Sama komponentti, uusi nimi. Jos ohjeesi sanoo "Embed", etsi Code Embed.

Kuulin että 50 000 merkin raja on olemassa?

Code Embed -elementissä on 50 000 merkin raja per instanssi. Meidän kaksi riviämme ovat kaukana siitä — mutta jos liität samaan upotukseen myös analytiikka- tai muuta mukautettua koodia, pidä silmällä merkkimäärää.

Onko ristiriidassa Webflow Interactionsin tai animaatioiden kanssa?

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

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

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

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.

Ei luottokorttia. Valmis kahdessa minuutissa.