Update 1.5

Now you can add the Country Code in "Tel Field"

Update 1.4

Optimize the code
Now you can customize the field layout paying with field width
Can adjust Vertical & Horizontal Gap

Update 1.3

Now you can choose between show if / Hide if Conditions

Update 1.2

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

Update 1.1

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.

How to Use

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

How to use Calculation

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

Condition 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

Style Settings

Animated Checkbox

About Animated Checkbox

Features:

From Tobi

Related Components