Embed forms on your website
Embed Mokaform forms as inline widgets, popups, popovers, sliders, side tabs, or full-screen forms on your website.
Embedding keeps respondents on your website while Mokaform handles the form experience.
Embed styles
| Style | Best for | Behavior |
|---|---|---|
| Widget | Contact pages, landing pages, blog posts | The form appears inline inside the page. |
| Full screen widget | Dedicated survey pages | The form fills the available container or screen. |
| Popup | Campaign pages and CTAs | A button or link opens the form in a modal. |
| Popover | Lightweight website feedback | A compact corner-style launcher opens the form. |
| Slider | Lead capture and contextual feedback | The form slides in from the side. |
| Side tab | Persistent feedback or support entry point | A tab stays on the left or right edge of the page. |
If compatibility matters more than visual effect, start with the widget embed. It is the simplest option for most website builders.
Add an embed
Open your form and publish the latest version.
Go to the Share tab.
Choose the embed style you want.
Configure size, button text, colors, position, and submit behavior.
Save the embed, copy the code, and paste it into your website's HTML area.
Use the embed link instead of the full HTML code when a tool only accepts URL embeds.
Configuration options
Mokaform embed code uses data-mf-* attributes. The generated code handles these for you, but understanding them helps when you work with developers.
Common attributes include:
data-mf-widget,data-mf-popup,data-mf-popover,data-mf-slider, ordata-mf-side-tab.data-mf-linkfor the public form URL.data-mf-width,data-mf-height, anddata-mf-auto-heightfor inline sizing.data-mf-full-screenfor full-screen widget behavior.data-mf-button-text,data-mf-button-color, anddata-mf-button-sizefor launcher buttons.data-mf-popup-size,data-mf-slider-position, anddata-mf-side-tab-position.data-mf-hide-on-submitto hide an embed after a successful submission.data-mf-backgroundanddata-mf-opacityfor visual blending.
Passing data into embedded forms
You can pass URL parameters through the form link used by the embed.
https://your-form-link?utm_source=website&plan=proUse this for attribution, prefilled fields, or branch logic. Define the matching URL parameters in Mokaform before relying on them in rules or copy.
Website builder notes
| Platform type | Recommendation |
|---|---|
| Custom website | Paste the full embed code before the closing body tag or in the target HTML block. |
| CMS or no-code builder | Use a custom HTML/embed block when available. |
| Tools that block JavaScript | Use the public form link or URL embed instead. |
| Email clients | Use the email embed instructions from the Share tab, not the website embed code. |
Troubleshooting
What to explore next
Publishing and sharing forms
Publish Mokaform forms, customize share links, embed on websites, generate QR codes, download PDFs, and set social previews.
Custom domains and branded email
Set up Mokaform custom form domains, branded form paths, DNS records, and verified email sending domains for notifications.