Quick Answer
- Profile Form's real panel has Button Label ("Update Profile"), Name Placeholder, Email Placeholder, Success Message ("Profile updated"), Dismiss (ms) (3000), and six style objects: Label Style, Input Style, Focus Style, Button Style, Error Style, and Success Style.
- Dismiss (ms) controls how long the success message stays visible before it clears itself, in milliseconds.
- Neither OTP Form nor Magic Link Form has a Dismiss (ms) property. Profile Form is the only one of the three that auto-dismisses its success feedback on a timer you can set.
- On a freshly inserted instance, the canvas shows "John Doe" and "
john@example.com" in the fields, not the Placeholder property text ("Enter your name..." and "Enter your email..."). Check your own instance's canvas before assuming the Placeholder values are what visitors see. - Profile Form has no built-in Hide toggle for login state, and it typically sits alongside Avatar and Identity Label on an account page.
Auth Plugin's introduction docs list Profile among the official pre-built components. In the Framer insert panel, it's labeled "Profile Form," described as "Editable user profile with name & email." Unlike OTP Verification and Magic Link, there's no separate insert-panel name to untangle here: the canvas instance and its property section are both named Profile Form too. Everything below comes from that live panel in Framer.
What Is Profile Form?
Profile Form is the component that lets a signed-in visitor edit their own name and email. It's built for an account or settings page, the place a user goes after they've already signed up and want to update their details. The components overview page lists it alongside the other account-management components, and the marketing components page describes it as editing "name, email, and custom fields," with the note that it "auto-populates with current user data." The properties below are what the panel itself actually exposes.
What Properties Does Profile Form Have?
Reading down the Profile Form panel in Framer, in order:
- Button Label: "Update Profile"
- Name Placeholder: "Enter your name..."
- Email Placeholder: "Enter your email..."
- Success Message: "Profile updated"
- Dismiss (ms): 3000, with the helper text "Auto-dismiss success message after this many milliseconds."
- Six style objects: Label Style, Input Style, Focus Style, Button Style, Error Style, Success Style.
Below the six style objects, a collapsed Code Overrides section sits at the bottom of the panel, under the "by Auth Plugin" line. That's the full confirmed property list. Nothing above it names a Custom Fields property, an Accent Color property, or a Show Avatar toggle, covered below.
Two of the docs site's own pages describe Profile Form a little differently. The docs page for Profile Form lists Accent Color (default #9EE86F), Show Avatar (boolean, default true), and Custom Fields (array, default empty), none of which appear on the real panel above. This post uses the confirmed panel in Framer as its source. Moving on.
What Does the Canvas Actually Show on a Fresh Instance?
Insert a fresh Profile Form instance and look at the canvas rather than the properties panel. The Name field shows "John Doe" and the Email field shows "john@example.com." The Name Placeholder and Email Placeholder properties are set to "Enter your name..." and "Enter your email..." respectively, a different pair of strings from what actually renders.
This is stated here as an observation, not an explanation. It's not clear from the panel alone whether this is sample content sitting on top of the real placeholder or something else, and nothing confirmed here settles that. Check your own instance's canvas rendering before assuming the Placeholder property text is what a visitor will actually see.
What Do Success Message and Dismiss (ms) Actually Do?
Success Message is the text shown after a visitor successfully updates their profile. Its default is "Profile updated," and it's a plain text property, so you can rewrite it to match your product's voice.
Dismiss (ms) is the property that makes Profile Form's success feedback temporary. Its default is 3000, and its helper text spells out the job plainly: "Auto-dismiss success message after this many milliseconds." It's an adjustable numeric field with its own stepper, confirmed working at 1000 (one second) and at 10000 (ten seconds), so it takes a real range of values, not just the default. Set it lower for a quicker fade, higher to keep the confirmation on screen longer. At 3000, the message clears itself three seconds after it appears.
This is a real, distinguishing feature. Neither the OTP Form nor the Magic Link Form, covered in the OTP Verification post, has a Dismiss (ms) property. Magic Link Form has a Success Title and Success Message, but nothing that controls how long that message stays up, and OTP Form has no Success Message property at all. Profile Form is the only one of the three with a timed, configurable auto-dismiss for its success state.
What Do the Six Style Sub-Panels Contain?
Profile Form's six style objects open into the same structure already published for OTP Form and Magic Link Form's shared style panels, and the values match on the checked instance. Every value below is editable, change any font, color, padding, or radius to fit your own design, the numbers here are just what's confirmed as the starting point:
Label Style
- Show Labels: a Show/Hide toggle, confirmed set to Show on this instance
- Label Font: Inter
- Label Color: 888888
Input Style
- Font: Inter
- Text Color: 999999
- Placeholder: 999999
- Background: BBBBBB
- Padding: 12
- Border: Solid
- Radius: 10
- Shadow: reads "Mixed," with an "Add..." row beneath it
Focus Style
- Border: 9EE86F
- Shadow: reads "Mixed," with an "Add..." row
- Scale: 1
Button Style
- Font: Inter
- Text Color: 000000
- Background: 9EE86F
- Hover Background: 8BD85E
- Radius: 10
- Padding: 14
- Shadow: reads "Mixed," with an "Add..." row
Error Style
- Color: DC2626
- Font: Inter
Success Style
- Text Color: 166534
- Background: 22C55E
- Font: Inter
If you've already styled OTP Form or Magic Link Form, Profile Form's style objects need no separate design pass, the same six colors and values carry over cleanly. None of this is fixed, every style object is a normal editable field, so match it to your own brand whenever it makes sense to.
How Does Profile Form Pair With Avatar and Identity Label?
Profile Form rarely sits alone on an account page. The typical layout puts an Avatar instance and an Identity Label instance near the top, showing the signed-in user's photo and name, with Profile Form below or beside them as the editable block.
Avatar's confirmed properties (View Only, Hide Logged Out, Placeholder BG, Avatar Style) and Identity Label's confirmed properties (Field, Prefix, Suffix, Fallback, Hide Logged Out, Text Style) are both covered in full in the Avatar and Identity post. That post is the source for those two components, this one doesn't restate their details.
One difference worth flagging: both Avatar and Identity Label ship their own Hide Logged Out toggle. Profile Form does not, it's one of the components already confirmed to have no built-in Hide toggle for login state, covered in the post on self-hiding components. To make Profile Form disappear for a signed-out visitor the way Avatar and Identity Label can with their own toggles, the general-purpose approach is Code Overrides. Opacity, Visible, and Rotate at the top of the panel are Framer's own standard properties, not Auth Plugin properties, and Visible does not react to login state.
Profile Form's own colors and copy, and the wider account page around it, are also where branding customization tends to live. The branding and profiles post covers that broader territory.
Common Mistakes
- Assuming the Placeholder property text is what appears on a fresh instance. Check the canvas. "John Doe" and "
john@example.com" show up there even though the Name Placeholder and Email Placeholder properties read differently. - Looking for a Redirect Path property. Profile Form's confirmed panel has no Redirect Path field.
- Assuming Dismiss (ms) at 0 removes the message instantly and cleanly. The confirmed default is 3000; behavior at 0 isn't documented here, so test it on your own instance before relying on it.
- Forgetting Profile Form has no Hide Logged Out toggle. Unlike Avatar and Identity Label, hiding it for guests takes Code Overrides.
FAQ
What does Dismiss (ms) control on Profile Form?
How long, in milliseconds, the Success Message stays visible before it auto-dismisses. The default is 3000.
Do OTP Form or Magic Link Form have a Dismiss (ms) property?
No. Profile Form is the only one of the three with an auto-dismiss timer for its success message.
Why does the canvas show "John Doe" and "john@example.com" instead of my placeholder text?
That's the observed behavior on a freshly inserted instance. The Name Placeholder and Email Placeholder properties are set to different text, "Enter your name..." and "Enter your email...". Check your own instance's canvas before assuming the Placeholder text is what shows by default.
Does Profile Form support custom fields beyond name and email?
The confirmed panel doesn't show a Custom Fields property, so that's not something this post can confirm one way or the other.
Can I hide Profile Form for signed-out visitors?
Not with a built-in toggle. Use Code Overrides, the same approach used for other components without a Hide Logged Out property.
What style objects does Profile Form have?
Six: Label Style, Input Style, Focus Style, Button Style, Error Style, and Success Style. They match the same structure already published for OTP Form and Magic Link Form.
The Short Version
Profile Form's real panel has Button Label, Name Placeholder, Email Placeholder, Success Message, Dismiss (ms), and six style objects, with a collapsed Code Overrides section at the bottom. Dismiss (ms) is genuine and distinguishing: it's the only auto-dismiss timer among Profile Form, OTP Form, and Magic Link Form. The canvas on a fresh instance shows "John Doe" and "john@example.com" rather than the Placeholder text, worth checking before you design around it. Profile Form has no built-in Hide toggle for login state, unlike its usual neighbors Avatar and Identity Label, so hiding it by login state means reaching for Code Overrides.
