This comprehensive description and setup guide is designed to make your Form Field Concatenator stand out on the Framer Marketplace. It highlights the technical "magic" of the component while keeping the instructions clear for designers.
Stop fighting with messy form data. The Form Field Concatenator is a powerful utility component that transforms how you handle leads in Framer. Whether you are building a high-end real estate platform like Driven Properties or a specialized tool like ComplyTude, this component ensures your data arrives exactly how you want it.
Standard Framer forms often send data in fragments, making it difficult to map complex inputs to simple CRM fields or email notifications. This component acts as a "Smart Middleware" that intercepts the submission process to aggregate multiple inputs—like message details, custom dropdown selections, and metadata—into a single, clean "Lead Summary" string.
Unlike traditional methods, you don't need to manually create and name hidden input fields in the Framer UI. This component automatically creates and populates the target field in the background, ensuring 100% reliability even with custom-styled dropdowns and complex inputs that often arrive empty.
⚡️ Zero-Config Injection: Automatically creates the target parameter in your payload—no manual hidden fields required.
🧹 Payload Sanitizer: Toggle "Clean Payload" to remove original, cluttered fields and send only the polished, concatenated string.
🔍 Deep-Scan Technology: Captures values from "greedy" custom components and dropdowns that standard form handlers often miss.
🥷 Stealth Mode: A built-in "Hide on Site" toggle keeps your design canvas and live site clean while the logic runs in the background.
🛡 Developer-Grade Reliability: Restores the browser's original fetch environment automatically when navigating away from the page.
Follow these steps to professionalize your lead generation workflow:
Create a new Code Component in your Framer project named FormFieldConcatenator.
Paste the provided code and save.
Drag the component from your Assets panel onto any page containing a form.
Target Key: Enter the exact name your database or CRM expects (e.g., lead_summary or enquiry_details).
Exclusions: List fields you want the concatenator to ignore, such as name, email, or phone. This ensures the summary only contains the "extra" context you need.
Clean Payload: Set this to No (Disabled) to send both the original fields and the summary. Set it to Yes (Enabled) to strip the originals for a minimalist database entry.
Turn on the Hide on Site toggle to make the component invisible to your users.
Publish your site. The component will now automatically intercept every submission on that page.
The component utilizes Network Interception (also known as "Monkey Patching"). By temporarily modifying the global fetch function, it catches the FormData packet the millisecond it leaves the browser. It then iterates through all entries, filters out system noise and your excluded fields, and appends a new key-value pair to the request before letting it proceed to its destination.
Adlin Antony
