Mask any form field in seconds
No changes to your form structure, no JavaScript knowledge required, and no impact on how Webflow handles form submissions.
Webflow's native form fields display every character a user types in plain text. For fields collecting sensitive information - access codes, licence keys, PIN numbers, or internal references - there is no built-in way to obscure input as it is entered without writing custom JavaScript or relying on a third-party tool.
The Fractional Field Mask Kit solves this with a single lightweight script and one custom attribute applied directly in the Webflow Designer.
Here is what you need to know:
- The Fractional Field Mask Kit works by adding a single attribute to any existing input field in your Webflow form. No changes to your form structure, no JavaScript knowledge required, and no impact on how Webflow handles form submissions.
- Masking is purely visual. As the user types each character is replaced on screen with a dot, star, or x depending on which mask style you choose. The actual value the user entered is always preserved in full and submitted with the form untouched.
- Three mask styles are available. Choose
dotto replace characters with •,starto replace with *, orxto replace with x. Apply whichever fits your design and use case. - The submitted value is never affected. Whatever the user types is what gets submitted to Webflow - The Fractional Field Mask Kit only changes what is displayed on screen while the user is typing. Your existing Webflow integrations with Zapier, Make, or anything else receive the real unmasked value exactly as entered.
- The Fractional Field Mask Kit is fully GDPR, CCPA, and PIPEDA compliant. It sets no cookies, makes no external requests, and collects no personal data of its own.
Add this <script> inside the <head> tag of your page
This script is the universal script: you only need to include it once, even if you have multiple instances on the page.
<!-- This script is to visually mask sensitive form field inputs - Managed by Fractional Creative -->
<script data-fc="fieldmask" data-fc-version="1.0.0" data-fc-consent="essential" src="https://cdn.fractionalcreative.io/kits@1/kits.js"></script>Build your form as usual
On your website, add a form to your page and build all of your fields inside it as you normally would.
Add this required custom attribute to the field(s)
Without the Kit
With the Kit
Everything you’re probably wondering.
Need more than a Webflow Kit? Hire a Digital Agency.
Fractional Creative is a digital agency. We build Webflow websites, design brands, manage Meta and Google ad campaigns, and build custom automations, and more. Start saving with Fractional services.
