5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5d:T75b,

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

59:[["$","$L5c",null,{"post":{"id":"019a98a6-f918-76d2-94af-8c3f5f04c618","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"aaee6e79-0682-4111-8298-0c8af508c14e","name":"Farhan Malik","slug":"designustaad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/932243/avatar-czxtUtkI8LREtNnzuOQ70YFBTNUVjN.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CdvZLsJqjBZE8gGGDXrx","resolved":true,"title":"Smart Form Fields","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Update 1.6"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fixed a bug where fields could end up sharing the same ID, causing values to mix between fields"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Now you can set Min & Max Value for Number fields"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Smart Form Fields"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Field Types"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Calculation Field"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Conditional Logic"}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Styling Controls"}]},{"type":"paragraph","content":[{"type":"text","text":"Customize input background, text color, borders, padding, corner radius, spacing, and layout. Style globally or per field, no CSS required."}]},{"type":"paragraph","content":[{"type":"text","text":"Questions? Reach out at "},{"type":"text","text":"askdesignustaad@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:askdesignustaad@gmail.com","target":"_blank"}}]}]}]},"introduction":"Making Forms Advance","slug":"smart-form-fields","author":{"framerUserId":"aaee6e79-0682-4111-8298-0c8af508c14e","name":"Farhan Malik","slug":"designustaad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/932243/avatar-czxtUtkI8LREtNnzuOQ70YFBTNUVjN.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/CdvZLsJqjBZE8gGGDXrx/smart-form-fields-IxJXyoBmy8rweXRDN4RIrUrAppUj5d","metadata":{"tint":{"h":260,"s":64,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-07T11:00:22.404Z","updatedAt":"2026-09-03T18:22:53.734Z","publishedAt":"2025-11-18T20:27:50.936Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Smart-Form-Fields-Bxad.js@G3H1bwcMyggDI59V4mIy","previewUrl":"https://smartformfields.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"G3H1bwcMyggDI59V4mIy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-18T20:27:50.936Z","updatedAt":"2025-11-18T20:27:50.936Z","reported":false}}],"$L5e"]

Suggested for you