> For the complete documentation index, see [llms.txt](https://help.getmobly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.getmobly.com/help-center/host/renaming-form-field-labels.md).

# Renaming form field labels

Sometimes you need to rename a field on a Host registration form beyond what the form editor allows — for example, changing **Email** to **Business Email** to prompt guests to use their work address.

Host's form editor doesn't offer direct label editing for the standard fields today, but you can rename any field label using **Custom CSS** in the form's advanced settings.

{% hint style="warning" %}
**Advanced workaround, not a designed feature.** Host may add native label editing later, at which point this CSS approach becomes unnecessary and might conflict. If you use this today, plan to spot-check any renamed labels after Host updates.
{% endhint %}

## When to use this

* Rename a standard field for clarity — Email → Business Email, Company → Employer, First Name → Given Name
* Adjust label wording to match an event's tone or your brand voice
* Tweak wording per-event without changing the underlying form field

## Steps

1. Open the form you want to change.
2. Click the **settings** icon in the top right of the form editor.
3. Expand **Advanced**.
4. Paste your CSS snippet into the **Custom CSS** field.
5. Save, then open the form's public preview to confirm the new label rendered.

## Snippet

Copy this and swap in the field selector (both places) and the new label:

```css
[data-prop="properties.email"] .el-form-item__label span.truncate {
  font-size: 0;
}

[data-prop="properties.email"] .el-form-item__label span.truncate:after {
  content: "Business Email";
  font-size: 14px;
  font-weight: inherit;
  line-height: 1.4;
}
```

Change **`properties.email`** to the field you want to rename, and change **`"Business Email"`** to your new label text.

## Common field selectors

The Email field uses `data-prop="properties.email"`. Other standard fields follow the same `properties.<name>` pattern:

* `properties.firstName` — First Name
* `properties.lastName` — Last Name
* `properties.companyName` — Company
* `properties.phone` — Phone

If a selector doesn't seem to work, open your form's public preview, right-click the field's label, choose **Inspect**, and look for the parent element with the actual `data-prop="properties.SOMETHING"` value. Use that value in the snippet.

## What to know

* **Per form.** The Custom CSS field is form-specific. If you have multiple registration forms (like a WAVE form and a WAVE + CAB form), paste the snippet into each one.
* **Input labels only.** This snippet renames standard input field labels (Email, Name, Company, etc.). Other UI text — buttons, dropdown options, help text — needs different selectors.
* **Element Plus classes.** The CSS targets Host's underlying UI library. If Host updates that library, the class names could change and the snippet would need updating.
* **Accessibility trade-off.** Screen readers handle CSS `::after` content inconsistently. Most sighted users see the new label cleanly; assistive-tech users may still hear the original. If accessibility for your registration form matters, weigh this before shipping.

## Related articles

* [Preparing the event page](/help-center/host/preparing-the-event-page.md) — the form editor basics and standard customization options
* [Creating email templates](/help-center/host/creating-email-templates.md)