When one of your app’s users signs in, the profile screen is where they see their name, avatar, and account details — and where they update whatever information you’re collecting from them. In MAM Suite that screen comes together from a Gravity Forms form plus a handful of global app settings, so you can shape the whole thing without touching a line of code.

Here’s what this guide covers: choosing the user profile form, setting up avatar capture, and styling the buttons your users will tap. Each step points to one setting in Mobile App Manager → App Settings.

Goal

A profile screen that:

• Displays the signed-in user’s name, avatar, and email.
• Lets the user edit their profile details through a form you control.
• Provides a photo placeholder and a Take Photo button so users can set an avatar.
• Matches your app’s brand colors.

Prerequisites

• MAM Suite installed with MAM Main activated.
• Gravity Forms installed and active, so the form pickers have forms to list and the app can render them. The three form-picker settings below are registered by MAM Main’s Gravity Forms module — internally MAM checks for the mam_for_gravity_forms_forms_manager class (which ships as part of MAM Main) before registering them.
• At least one Gravity Forms form created to use as the user profile form. If you have not built one yet, create it in Forms first, then return here.
• Two hosted image URLs if you want a custom avatar placeholder and a custom Take Photo button icon. The app accepts a URL, not an upload, for these two settings.
• Admin access to Mobile App Manager → App Settings.

Steps

1. Choose the user profile form

Start in App Settings: open the User Profile tab and find User Profile Form (setting key mam_main_user_profile_form). It’s a form-list picker — pick the Gravity Forms form that collects and edits your users’ profile details.

This one setting decides what the editable part of the profile screen looks like. Whatever fields you put on that form — name, email, maybe address or phone — are exactly the fields your users will see and fill in. And because it’s an ordinary Gravity Forms form, you’re designing the layout, labels, and validation over in Gravity Forms itself; MAM just renders it natively inside the app.

The profile form works for any app, store or not — just include the fields you actually collect. If your app is a store, the optional address/phone fields feed the standard WooCommerce billing_* user meta, so the same form doubles as the customer’s saved address.

2. (Optional) Set the nav-header profile form

Some apps add a profile entry point to the navigation header, not just the left menu. If yours does, open the Home Screen tab and set Form for User Profile in Nav Header (home_user_profile_form) — another form-list picker.

Most apps just point this at the same form you chose in Step 1, so the profile looks the same no matter how a user gets there. Only pick something different here if the header version needs to collect its own set of fields.

3. (Optional) Use the profile form as the “must complete first” form

Want to require a complete profile before someone can use the app at all? Set Form to display when opening the app? (initial_form_to_display) on the Gravity Forms tab to the same form.

Once it’s set as the initial form, MAM takes over the checking: it looks at whether every required field on that form already has a value for the signed-in user. Any required field still empty, and the app shows the form right at launch; once everything’s filled in, it stops showing up. You just point MAM at the form — deciding when to display it is MAM’s job.

4. Set the avatar placeholder

Open the Gravity Forms tab and find Avatar placeholder URL (avatar_placeholder). Paste in the URL of the image you want shown before a user sets their own profile photo — this is the default face or icon every new user sees until they upload one.

Once a user does set an avatar, MAM switches to serving their stored image (from the _user_avatar user meta) instead of your placeholder. So the placeholder only ever fills the gap for users with no photo yet — pick something neutral and on-brand.

5. Set up avatar capture (Take Photo button)

On that same Gravity Forms tab, set User Profile Take Photo Button URL (user_profile_take_photo) — the icon that becomes the Take Photo button on the profile screen, the control a user taps to capture or choose a new avatar.

Look for a small, clear icon (a camera glyph works well) that reads clearly against your profile background. Once a user takes a photo, that new avatar replaces the Step 4 placeholder from then on.

6. Style the profile buttons and links

The colors for these buttons and links actually live over in the Login screen’s settings (the Login Settings group, configured on the Login button/screen rather than a top-level App Settings tab):

Even though these keys carry the user_profile_ prefix, they actually style the Login / Sign Up screen’s buttons and links, not the in-app profile editor itself. Set the background and text colors as a pair so labels stay legible, and pick a link color with enough contrast against your login background or background image.

7. Save and preview

Now check it in action. Save your settings, reload the app (or trigger a JSON refresh), and sign in as a test user. Confirm that:

• The profile screen shows the user’s name and email, with the placeholder avatar for a brand-new account.
• The editable form matches the Gravity Forms form you selected, and edits save back to the user.
• The Take Photo button appears with your icon and lets you set an avatar that then replaces the placeholder.
• The login screen’s buttons and links use your chosen colors.

How the profile data is assembled

Some context on how this all fits together: when MAM builds the app’s payload — the bundle of data your app downloads from your site — for a signed-in user, it attaches their profile data automatically: avatar, first and last name (from billing_first_name / billing_last_name), display name, and email as a tagline. None of that needs configuring on your end; the settings above control the form, images, and styling layered on top of it. If a developer wants to add extra profile fields beyond the form, the mam_add_fields_to_user_profile filter covers that — see the hook reference.

Related

• App setting: User Profile Form (mam_main_user_profile_form)
• App setting: Form for User Profile in Nav Header (home_user_profile_form)
• App setting: Avatar placeholder URL (avatar_placeholder)
• App setting: User Profile Take Photo Button URL (user_profile_take_photo)
• App settings: Button / Links colors (user_profile_button_background_color, user_profile_button_text_color, user_profile_links_text_color)

What’s next

• Build or refine the Gravity Forms form behind the profile so it collects exactly the fields you need.
• If you want the profile completed before app use, finish wiring up the Form to display when opening the app? setting from Step 3.
• To add custom profile fields beyond the form, see the mam_add_fields_to_user_profile filter reference.