Optimize the code
Now you can customize the field layout paying with field width
Can adjust Vertical & Horizontal Gap
Now you can choose between show if / Hide if Conditions
Fix the Hidden Field
On submission, users will get the field label instead of the field ID
Add the new success message feature after form submission
The new slider field is now available
Fix and remove extra properties from Radio & Check Box
Fix the step Indicator style properties
Smart Form Fields is a powerful add-on for the default Framer Form system. It helps you build dynamic, logic-driven, and fully customizable forms without writing code. It introduces advanced fields such as conditional visibility, calculations, notes, and hidden inputs, while still keeping the native Framer form submission working seamlessly. You can control how each field behaves, appears, and interacts with other fields, allowing you to create forms that feel intelligent, responsive, and personalized to user input.
This makes it ideal for onboarding flows, multi-step funnels, product configurators, lead capture forms, survey experiences, quotation calculators, and more.
Field Types and Usage
Text — Standard single-line input (e.g., Name, Company, City).
Email — Email input with built-in validation.
Tel — Phone number input with option to restrict to numeric-only.
Number — Numeric input with optional min/max/step controls.
Select (Dropdown) — Choose from multiple selectable options.
Checkbox — Toggle option, supports on/off or multi-choice logic.
Radio — Select one option from a grouped set.
Date — Choose a date using a calendar picker.
Time — Select a time value for scheduling and appointments.
Textarea — Multi-line field for longer text entries.
Calculation — Automatically computes values using a formula (e.g., price * qty + tax) with optional prefix/suffix formatting.
Hidden — Invisible field for passing metadata or dynamic values in form submission.
Note — Display static text inside the form (instructions, labels, messages) with full background/text/border styling control.
Calculation Field
The Calculation field automatically updates values based on other fields in the form, letting you set up dynamic pricing, totals, and real time outputs. Create custom formulas by referencing field IDs and apply currency or unit formatting. Perfect for quotations, product configurators, cost estimators, and donation forms that need instant updates as users enter information.
Conditional Logic
Show or hide any field based on the value selected in another field. This allows you to create smart branching flows that adapt to the user’s choices. It works well for progressive forms, guided configuration steps, upgrade selectors, and custom pricing logic.
Styling Controls
Customize input background, text color, borders, padding, corner radius, spacing, and field layout. Style all fields consistently or style each field individually. All of this works visually without requiring any CSS.
Farhan Malik
