--- title: "QuoteCartPro — Framer component · Best of Framer" description: "$15.00 · Framer component · by Can Girgin · Forms. Animated cart + RFQ with multi-step flow" canonical: "https://framer.elliotli.dev/component/quotecartpro" --- [Home](/)/[Components](/components)/[Forms](/components/category/forms)/QuoteCartPro # QuoteCartPro Animated cart + RFQ with multi-step flow [View on Framer](https://framer.com/marketplace/components/quotecartpro/?via=elliot-li) ![QuoteCartPro preview image 1](https://framer.elliotli.dev/og/component/quotecartpro/9ced58f014d855d0/1600x1200.jpg) ## Summary Animated cart + RFQ with multi-step flow ## Description ## **Overview** QuoteCart Pro is a complete cart and quote request (RFQ) system for Framer websites. It allows visitors to add products to a persistent cart, enter contact details through a multi-step checkout flow, and submit a quote request via webhook, all with polished animations and full design customization. ## **5 Display Modes** ### **Add to Cart Button** Place on product cards. Includes 4 button styles (filled, outline, ghost, minimal). Shows animated checkmark feedback on click. Configurable product ID, name, price, image, and quantity per click. ### **Cart Icon** Designed for your site header. Choose from 3 icon styles (bag, cart, basket). Animated badge counter bounces when items are added. Click opens the slide-in drawer. ### **Cart Drawer** Full slide-in panel from left or right with backdrop blur. Spring-animated open and close. Contains the full cart experience including item list, quantity steppers, promo codes, multi-step form, and submission. ### **Cart Page** Inline full cart view for dedicated cart pages. Same features as the drawer but embedded into your layout. ### **Mini Cart** Compact summary bar showing item count and total price. Clicking opens the drawer. Ideal for sticky footers or floating elements. ## **Multi-Step Checkout Flow** 3-step animated flow with a progress bar: 1. **Cart** — Review items, adjust quantities, apply promo codes, add per-item notes 2. **Details** — Dynamic customer form with configurable fields 3. **Review** — Order summary with itemized breakdown and contact details before submission Animated step indicator shows progress. Steps transition smoothly and can be disabled to skip directly to review. ## **Animated Cart Experience** - Items slide in with staggered animations when the drawer opens - Quantity steppers animate smoothly (trash icon appears at quantity 1) - Toast notifications animate in and out when items are added or removed - Badge counter bounces when cart count changes - Total price updates with a pop animation - Success state displays an animated checkmark after submission - Empty cart shows an illustrated SVG empty state ## **Dynamic Form Builder** Configure customer fields using a simple text format in the property panel. Supported field types: text, email, tel, textarea, and select with custom options. Any field can be marked as required. The form validates before allowing progression to the review step. ## **Promo Code System** Built-in discount code support. Set a valid code and discount percentage in the property panel. Users enter the code in the cart and the discount is applied to the total with visual feedback. Included in the webhook payload. ## **Per-Item Notes** Each cart item can include an optional note. Users click “Add note” to expand a text area. Notes are included in the webhook payload for customization requests or special instructions. ## **Webhook Integration** Sends a POST request with a JSON payload to any endpoint (Make, Zapier, Cloudflare Workers, custom API). Return 2xx for success. Non-2xx responses show a configurable error message. Success displays an animated checkmark with the request ID. ## **15 Currencies** Built-in formatting for USD, EUR, GBP, TRY, JPY, CAD, AUD, CHF, CNY, INR, BRL, KRW, SEK, AED, plus a Custom option for your own symbol. Decimal places configurable from 0 to 4. ## **4 Theme Presets + Custom** - **Obsidian** — Dark glass with subtle transparency - **Snow** — Clean light theme with soft shadows - **Ocean** — Deep blue tones - **Sand** — Warm neutral earth tones - **Custom** — Full control over 15 color properties ## **Cross-Instance Communication** All component instances using the same Storage Key stay synchronized. Add to Cart buttons anywhere update the cart icon badge and drawer contents in real time via localStorage and custom DOM events. Works across browser tabs. ## **Property Panel (14 Grouped Sections)** - **Mode** — Component type selector - **Theme** — Presets and custom colors - **Product** — Product configuration - **Button** — Button settings - **Cart Icon** — Icon settings - **Drawer** — Drawer behavior - **Cart** — Currency and cart options - **Form Fields** — Dynamic field setup - **Checkout Steps** — Step configuration - **Webhook** — Submission settings - **Toast** — Notification settings - **Typography** — Font controls - **Styling** — Border radius controls - **Storage** — Cart persistence key ## Rank history [How rankings work →](/terms#rankings) - All · #8368 ## Details - **Author**: Can Girgin - **Price**: $15.00 - **Published**: 2026-02-18 - **Updated**: 2026-02-18 - **Added**: 2026-02-15 - **Categories**: Forms ## More across types - [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love ## More like this - [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing - [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK - [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield - [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from