Skip to content

component

Smart Form Fields

By Farhan Malik

Details

Summary

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 &…

Description

Update 1.6 Fixed a bug where fields could end up sharing the same ID, causing values to mix between fields Now you can set Min & Max Value for Number fields Smart Form Fields A powerful add-on for the default Framer Form system. Build dynamic, logic-driven, fully customizable forms without code. Adds conditional visibility, calculations, notes, and hidden inputs, while native Framer submission keeps working underneath. Great for onboarding flows, multi-step funnels, product configurators, lead capture, surveys, and quotation calculators. How to Use Place the component inside a native Framer Form so submissions still go through Framer's own handling. Open the Fields array and build field by field, each type shows only the settings relevant to it. Field Types Text, Email, Tel (with optional country code), Number (min/max/step), Select, Checkbox, Radio, Date, Time, Textarea, Calculation, Hidden, Note. Each supports full style control, background, text color, borders, padding, and spacing. Calculation Field Automatically computes a value using a formula referencing other field IDs, like price times quantity plus tax, with optional prefix/suffix formatting. Perfect for quotations, configurators, cost estimators, and donation forms needing instant updates. Conditional Logic Show or hide any field based on another field's value. Build branching flows that adapt to user choices, ideal for progressive forms, guided configuration, upgrade selectors, and custom pricing logic. Styling Controls Customize input background, text color, borders, padding, corner radius, spacing, and layout. Style globally or per field, no CSS required. Questions? Reach out at askdesignustaad@gmail.com

Introduction

Making Forms Advance

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150119238/148/228/309/79/15
  • All · #1761