Getting Started
Framer Components
Contact Component
The Contact + CRM Component helps you turn visitors into customers. Collect contact details from your Framer site and manage them directly in your Supaframe dashboard using built-in CRM tools.
Creating a Contact Form
In your Supaframe dashboard, click New Component.
Select Contact + CRM as the component type.
Name your component (for your reference only).
Add your form fields — by default, these include:
Name
Email
Phone
Message
Save your form. You can now embed it in your Framer site.
Framer Component
Easily add your contact form to your Framer website.
In your Supaframe dashboard, click the Copy Framer Component Link button.
Open your Framer project.
Paste the link into your project — the contact form component will be added instantly.
Use Framer’s Properties Panel to customize styles, fonts, colors, spacing, and layout.
Publish your site and start collecting leads immediately.
Adding Custom Consent Checkbox
You can include a checkbox for consent or terms acceptance (e.g., “I agree to the Privacy Policy”).
In the component settings, toggle Custom Consent Checkbox on.
Add your own checkbox label text.
Optionally, include a link to your terms or privacy page.
Managing Leads in CRM
Every form submission becomes a lead profile in your dashboard.
Each lead has a status:
New — Just submitted, no action taken yet
Contacted — You’ve reached out but haven’t closed the deal
In Progress — Ongoing discussions or work
Won — Successfully converted into a customer
Lost — No longer pursuing the lead
You can update a lead’s status anytime.
Adding Notes, Tags, and Tasks to a Contact
Inside a lead’s profile, you can:
Add notes — keep track of conversations and important details
Tag leads — e.g., “VIP,” “Hot Lead,” “Needs Follow-Up”
Assign tasks — e.g., “Send proposal,” “Call back next week” with optional due dates
Custom Statuses & Priorities
Supaframe gives you full flexibility to adapt the CRM to your workflow:
Go to Settings to edit, delete, or add new status options.
Custom Customer Statuses — Create your own stages beyond the default (e.g., “Proposal Sent”).
Custom Task Statuses — Define unique task progress states (e.g., “Waiting on Client,” “Ready to Launch”).
Task Priorities — Assign urgency levels (e.g., Low, Medium, High) or create your own custom priority labels.
This makes it easy to tailor your pipeline and task management exactly to your business process.
Filtering and Searching Leads
Use the search bar to find leads by name, email, or tag.
Filter by status to focus on specific stages of your pipeline.
Filter by tag
Combine filters for advanced lead management.
Pro Tip: The Contact + CRM component is perfect for agencies, freelancers, or service providers who want to keep all client communication in one place without using a separate CRM tool.
Tasks Management
You can create and manage tasks directly from within a customer’s profile — perfect for keeping track of follow-ups, meetings, and to-dos.
Views
Tasks can be viewed in:
List view — Simple table-style layout for quick scanning.
Card view — Visual, grid-style layout for at-a-glance details.
Kanban board view — Drag-and-drop tasks between statuses for a flexible workflow.
Task Details
When creating or editing a task, you can:
Set a due date — Keep deadlines clear and organized.
Add a description — Provide details, instructions, or notes.
Assign a status — Use default statuses or create custom ones.
Set a priority — Mark as Low, Medium, High, or a custom priority level.
Link to a customer — Associate the task with a specific contact for context.
💡 Linking tasks to customers keeps your CRM organized and ensures you always know which actions are tied to which leads.
Customer Activity Timeline
The Activity section inside each customer profile gives you a complete history of everything that’s happened with that contact — all in one place.
You can see:
New notes — When a note was added and by whom.
Profile updates — Any changes to the contact’s details (name, email, phone, tags, etc.).
New tasks — When a task was created for the customer.
Tags added or removed — See exactly when a tag was assigned or removed.
Status changes — Track when a customer’s status moved from one stage to another (e.g., “New” → “Contacted”).
Task status changes — Monitor progress updates for tasks (e.g., “In Progress” → “Completed”).
This makes it easy to follow the full journey of a lead or customer without digging through separate notes or records.
Email Options
Stay instantly informed when someone contacts you.
Email notifications
When enabled, Supaframe will send an email to your profile email address for each new submission.
Toggle this setting on in your Contact Component options.
