How to Use Tally for Designers

Designers who need fast, flexible forms often reach for Tally. This tutorial shows how to add Tally to a UI kit, style it with CSS, and connect it to Stripe. Follow the steps, copy the code blocks, and see the screenshots described in the figure stubs. By the end you’ll be able to embed a polished form without writing JavaScript.

Table of Contents

• 1. What is Tally?
• 2. Quick Setup and Embedding
• 3. Styling Tally to Match Your Design System
• 4. Advanced Features: Logic, Payments, and API
• 5. Tally vs. Competing Form Builders
• FAQ
• Conclusion

1. What is Tally?

Tally is a cloud‑hosted, no‑code form builder. It creates forms that render as plain HTML inside an iframe. No extra JavaScript runs on your page, which keeps load time under 300 ms on average. The platform offers:

• Unlimited forms on the free plan.
• Built‑in integrations (Zapier, Make, Stripe, Google Sheets).
• Custom CSS injection for full branding control.
• Conditional logic without code.

Why designers choose Tally

Designers need precision. Tally gives you the markup, then lets you style every input, label, and button. The form’s HTML is predictable, so you can map it to your design tokens.

2. Quick Setup and Embedding

The fastest way to get a form on a page is to copy the embed code from the Tally dashboard.

Step 1 – Create a form

1. Log in to tally.so.
2. Click “New Form” and choose a blank template.
3. Add fields: Name, Email, Message.
4. Save and click “Share”.

Step 2 – Copy the embed snippet

In the Share modal, select “Embed” → “Iframe”. Copy the code:

<iframe src="https://tally.so/r/mYb5QZ" width="100%" height="500" frameborder="0"></iframe>

Step 3 – Paste into your HTML

Place the snippet where you want the form to appear. Example page:

<section id="contact-form">
  <h2>Get in Touch</h2>
  <iframe src="https://tally.so/r/mYb5QZ" width="100%" height="600"
          frameborder="0"></iframe>
</section>

Responsive height trick

To keep the form height responsive, use CSS variables:

.tally-iframe{
  width:100%;
  height:calc(100vh - 200px);
}

3. Styling Tally to Match Your Design System

By default Tally applies its own style sheet. You can disable it and write your own CSS.

Disable default styles

Append ?hide_branding=1 to the iframe URL:

<iframe src="https://tally.so/r/mYb5QZ?hide_branding=1"
        class="tally-iframe" loading="lazy"></iframe>

Targeting elements

The iframe’s content is isolated, but Tally offers a style URL that injects CSS directly into the form. Create a CSS file (e.g., tally-custom.css) and host it on your CDN, then add:

<iframe src="https://tally.so/r/mYb5QZ?hide_branding=1&css=https://cdn.example.com/tally-custom.css"
        class="tally-iframe"></iframe>

Example custom CSS

/* tally-custom.css */
input, textarea{
  border:2px solid #0066cc;
  border-radius:4px;
  padding:0.6rem;
  font-family:inherit;
}
button{
  background:#0066cc;
  color:#fff;
  border:none;
  padding:0.8rem 1.2rem;
  border-radius:4px;
  cursor:pointer;
}
button:hover{
  background:#004999;
}

Using CSS variables for theming

If your site uses design tokens, map them to Tally variables:

:root{
  --tally-primary:#0066cc;
  --tally-radius:4px;
}

Then reference them in tally-custom.css:

input, textarea{
  border:2px solid var(--tally-primary);
  border-radius: var(--tally-radius);
}
button{
  background: var(--tally-primary);
}

4. Advanced Features: Logic, Payments, and API

Tally can do more than basic contact forms. Below are three common advanced use‑cases.

Conditional Logic

1. In the form builder, select a field.
2. Click “Logic” and set “Show this field if” a previous answer matches.
3. Publish – the logic runs client‑side inside the iframe.

Example: Show a “Company Size” dropdown only if the user selects “Business” as their type.

Collecting Payments

Tally integrates with Stripe. Follow these steps:

1. Enable “Payments” in the form settings.
2. Connect your Stripe account.
3. Add a “Payment” block, set amount or allow custom input.
4. Publish. The payment button appears inside the form.

Sample code block for a subscription form:

<iframe src="https://tally.so/r/xyz123?hide_branding=1&css=https://cdn.example.com/tally-pay.css"></iframe>

Using Tally’s API

For designers who need to display submitted data, Tally offers a simple JSON endpoint.

GET https://api.tally.so/forms/{form_id}/submissions?api_key=YOUR_KEY

Example fetch in vanilla JS (you can place this in a separate script file, not inside the iframe):

fetch('https://api.tally.so/forms/mYb5QZ/submissions?api_key=pk_test_123')
  .then(r=>r.json())
  .then(data=>{ console.log(data); });

5. Tally vs. Competing Form Builders

Below is a side‑by‑side comparison of Tally, Typeform, and Google Forms for a typical design workflow.

Feature	Tally	Typeform	Google Forms
Load time (avg.)	≈250 ms	≈600 ms	≈350 ms
Custom CSS	Full control via CSS URL	Limited, uses built‑in theming	None
Conditional logic	Yes, visual builder	Yes, visual builder	No
Payment integration	Stripe & PayPal	Stripe only, higher fees	No
Free tier limit	Unlimited forms, 100 submissions/mo	10 responses/mo	Unlimited
Branding removal	One‑click hide	Paid plan only	Not applicable
Data export	CSV, JSON API	CSV, Excel	CSV

For designers who prioritize speed and design fidelity, Tally usually wins. Typeform shines when you need highly animated experiences, while Google Forms is best for internal surveys.

FAQ

What is Tally and why should designers use it?

Tally is a no‑code form builder that creates embeddable forms with zero JavaScript. Designers love it because it respects design systems, loads instantly, and can be styled with CSS.

Can I customize Tally forms to match my design system?

Yes. Tally outputs clean HTML that you can target with your own CSS variables, class names, or Tailwind utilities. You can also hide the default styles and start from scratch.

How does Tally compare to Typeform for UI designers?

Tally is lighter, loads faster, and costs less. Typeform offers richer animations but adds extra JavaScript weight. For most design systems, Tally provides enough flexibility without the bloat.

Is it possible to collect payments with Tally?

Yes. Tally integrates with Stripe and PayPal via built‑in blocks. You can embed a payment field, set the amount, and receive funds directly to your account.

Do I need to host anything to use Tally?

No. All forms are hosted on tally.so. You only embed an iframe or a script tag on your site. This keeps your server footprint minimal.

Conclusion

Using Tally lets designers add functional forms without sacrificing speed or brand consistency. Create a form, hide the default styling, inject your own CSS, and extend with logic or payments as needed. Compare it to other builders, pick the right plan, and you’ll have a reliable form solution that fits any design system.