Tally is one of the easiest and most flexible form builders out there. It's clean, intuitive, and powerful — but what if you want to give your forms a personal touch or fully align them with your brand?
That’s where custom CSS comes in. With a bit of styling, you can transform the look and feel of your Tally forms no advanced tools or coding knowledge required.
Why Style Your Tally Forms?
Here’s what you can do with custom CSS:
Match your brand colors – Backgrounds, text, and buttons can reflect your visual identity.
Use custom fonts – Integrate Google Fonts or your own for a consistent typographic style.
Improve UX – Adjust spacing, button sizes, and animations for better usability.
Add personality – Rounded corners, shadows, hover effects — bring your form to life.
Seamless embeds – Make your embedded forms look native to your website.
How to Add Custom CSS to Tally Forms
Here’s the catch: Tally doesn’t officially support direct CSS editing within its interface. But don’t worry there are a few easy workarounds:
1. Embed + Style via External CSS
If you're embedding the Tally form on your website (e.g., with an <iframe>), you can:
Wrap the form in a styled container.
Use CSS targeting the iframe or elements around it.
Use JavaScript to access and style the content inside the iframe (advanced).
html exemple
<div class="custom-form-wrapper">
<iframe src="https://tally.so/r/your-form-id" frameborder="0" width="100%" height="500"></iframe>
</div>
css exemple
.custom-form-wrapper {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
Note: Due to iframe limitations, direct styling of internal form elements may require advanced workarounds like proxying or using Tally embeds that allow deeper integration (such as with Webflow or React components).
2. Custom Styling with Tally Plugins or Tools
Some third-party tools and browser extensions can let you inject CSS into embedded Tally forms. You can also use platforms like Webflow or Framer to embed and style your Tally forms more deeply.
3. Create a Custom Wrapper Form
If you want full design control, consider creating a custom wrapper using HTML/CSS and use Tally only for handling submissions through webhooks or API integrations.
Example CSS Snippets
css
iframe {
border-radius: 12px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
iframe:hover {
transform: scale(1.01);
}
.custom-form-container {
padding: 2rem;
background-color: #f8f9fc;
border: 2px solid #e0e0e0;
border-radius: 20px;
}
Pro Tips
Use dev tools in your browser to inspect elements and test styles live.
Test responsiveness on mobile and tablets.
Keep accessibility in mind – high contrast, legible fonts, and focus styles are important.
Want Help Styling Your Tally Form?
Drop your form link or share your brand colors, and we’ll help you come up with a beautiful design!
Or check out Tally’s documentation and community for more advanced tips.
Ready to elevate your forms? Start styling and turn your basic forms into stunning, branded experiences.
#TallyForms #CSS #FormStyling #NoCodeDesign #WebDesign #BrandConsistency
0 Comments