Loading tutorials…
Loading tutorials…
Tally's embed code is dead simple. Picking the wrong embed type is where most teams lose 20% of conversions. This walks through inline vs. popup vs. slider vs. full-page — and when each one wins.
Who this is forMarketers embedding Tally forms on landing pages, pricing pages, or blog posts. If your form is hidden behind a button when it should be inline (or vice versa), conversion is already suffering.
What you'll need
Step 1
Inline (in the page body) for primary CTAs. Popup (triggered by button) for secondary asks. Slider/Widget (corner of screen) for support. Full-page (own URL) for high-intent flows.
Inline embed: form sits in the page body. Best for landing-page CTAs, pricing-page demo requests, blog-post lead magnets. Converts 2-3x better than popup variants because users see the form without an extra click.
Popup embed: form opens in a modal when a button is clicked. Best for secondary CTAs ('Got a question? Click here') where you want the page to load fast.
Slider/Widget: small persistent UI in the corner (usually bottom-right). Best for support contact forms or chat-style lead capture.
Full-page: Tally hosts the form at a Tally URL (e.g., `tally.so/r/xxxx`). Best for high-intent flows linked from emails or ads where the form IS the destination.
Default to inline for primary asks. Popup only when load speed or page real estate is the constraint.
Step 2
Open the form → Share → Embed → pick embed type → copy code snippet.
Open the form in Tally. Click "Share" → "Embed."
Pick the embed type (inline, popup, slider, full-page).
For each type, Tally generates a code snippet (script tag + div). Copy it.
For inline embeds, Tally shows preview options — height auto-resize, hide title, hide page numbers. Configure here, not in CSS.
For popups, you also get a button code or a JS trigger snippet.
Step 3
Drag an Embed element where the form should appear. Paste the Tally code. Publish.
In Webflow Designer, drag an "Embed" element to the location where the form should appear (inside a section, in a column, etc.).
Paste the Tally embed code into the Embed element. Save.
Publish the site. View the live URL — form should render within 1-2 seconds.
For popups: paste the button snippet wherever you want the trigger, paste the script snippet in the page Settings → Custom Code → Footer.
Step 4
For Gutenberg: add an HTML block, paste the code. For classic editor: paste in the HTML view, not visual.
Gutenberg editor: add a "Custom HTML" block. Paste the Tally embed code. Update.
Classic editor: switch to "Text" view (not Visual). Paste the embed code where you want the form. Update.
If you use a builder like Elementor, drop an HTML widget and paste the code.
Some WordPress security plugins strip script tags from posts. If the form does not appear, check the page source — if the script tag was removed, allow it in plugin settings.
Step 5
Drag the Embed component, paste Tally code, set frame size.
In Framer, drag an "Embed" component to the layout.
In the right panel, paste the Tally embed code in the HTML field.
Set the frame size — Tally is responsive, so set width to 100% and let height auto-resize.
Preview in Framer → publish. Test on mobile.
Step 6
Paste the script + div directly into your HTML where the form should appear. Test in incognito.
Open your HTML file or template. Paste the Tally script tag in the `<head>` or just before `</body>`.
Paste the div snippet where the form should render in the page body.
Deploy. Test in incognito to ensure no cached version is showing.
If using a framework (Next.js, Astro, etc.), wrap the script in the appropriate dynamic-script component to avoid hydration warnings.
Step 7
Open in incognito on iPhone Safari, Android Chrome, and desktop. Submit a test response. Verify no broken layouts.
Open the live URL in incognito on three devices.
Verify the form renders without horizontal scroll on mobile (most common embed bug).
Submit a test response. Verify the post-submit state (redirect or thank-you message) works on all three.
Delete the test response from Tally and any downstream system.
Common mistakes
Defaulting to popup embed
What goes wrong: Popup forms convert 30-50% lower than inline forms for the same audience. Most teams pick popup because it 'feels modern.' Each percentage point of conversion loss on a 1,000-visitor/month page is 10 lost leads — typically $200-500 of LTV.
How to avoid: Use inline embed for primary CTAs. Reserve popups for secondary asks ("Got a question?") where the page already has a primary inline form.
Not setting the embed to full width on mobile
What goes wrong: Form renders at 600px wide on a 375px mobile viewport. Horizontal scroll, broken layout, abandonment rate spikes to 60%+.
How to avoid: Always set the Tally embed container to `width: 100%` and let Tally's auto-resize handle height. Test on real mobile device.
Loading the Tally script on every page
What goes wrong: Page weight increases by 60-80KB across the site, even on pages without forms. Page-speed score drops, SEO suffers.
How to avoid: Load the Tally script only on pages with forms. Use a conditional include in your site builder or template engine.
Embedding the form behind authentication
What goes wrong: Form embedded on a logged-in dashboard page. Users hit it after login. But Tally's analytics show traffic from the embedded page as one anonymous source — you cannot attribute submissions to logged-in users without passing user info via hidden fields.
How to avoid: Pass user ID, email, and plan via hidden fields in the embed URL. Pre-fill those Tally fields from URL parameters.
No fallback for blocked scripts
What goes wrong: Users with strict ad-blockers or CSP policies see a blank space where the form should be. You lose 5-10% of would-be submitters silently.
How to avoid: Add fallback text below the embed: 'Form not loading? Email us at [hello@yourcompany.com] instead.' Catches the edge cases.
Recap
Done — what's next
How to build a Tally form that actually converts
Read the next tutorial
Hand it off
Embedding one form is easy. Embedding 15 forms across a real site with conversion tracking, A/B testing, and per-page analytics is a job. A vetted specialist will set up the embed strategy and own optimization. From $14-16/hr.
See specialist rates
Tally's embed script is ~60-80KB and loads asynchronously, so it does not block initial page render. Page-speed impact is minimal if you load it only on pages with forms.
Yes. Each form has its own embed code with a unique form ID. Paste each one where you want it. The Tally script handles multiple forms automatically.
Use Tally's redirect URL with UTM parameters, then fire a GA4/Mixpanel event on the destination page. Tally also has a native Google Analytics block (Pro) that fires events on submission.
Limited. Tally allows hiding the title, page numbers, and progress bar in the embed config. Deeper CSS customization requires Pro and the 'Custom CSS' field in form settings.
Yes. Paste the embed link as an iframe in Notion. The form renders inline. Works for any iframe-supporting destination.
Tally
Tally's block-based editor is forgiving — which is why most teams build forms that look fine and convert at 18%. This walks through the build path that lands forms at 35-45% conversion.
Tally
Logic jumps are what turn a static form into a smart one. They are also where most Tally forms quietly break. This walks through the branching patterns that actually hold up at scale.
Tally
Tally's native Notion and Airtable integrations are some of the cleanest in SaaS — when set up right. When set up wrong, you end up with 200 rows of mis-mapped fields. This walks through the schema-first approach.
Tally
DIY forms are great — until your conversion rate caps at 18% and you cannot tell why. Here is the honest framework: when the cost of self-managing exceeds the cost of hiring, and how to tell which side you are on.