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.

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.

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:

[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 — the form editor basics and standard customization options

• Creating email templates