BoldDesk allows administrators to customize the Contact Form section of a Web Widget using Custom JavaScript (JS). This customization can be used to rename the visible labels and, optionally, the placeholders of the default Contact Form fields.

This article applies only to the default Contact Form fields:

• Name
• Email
• Phone Number
• Subject
• Description / Message

Prerequisite

The agent’s role includes the Manage settings permission.

Script to Rename Contact Form Fields

Use the following JavaScript to rename the visible labels and placeholders of the default Contact Form fields in a BoldDesk Web Widget.

(function () {
  const FIELD_RENAMES = {
    // Add entries here
  };

  function setLabelText(fieldWrapper, newText) {
    if (!fieldWrapper || !newText) return false;

    const labelNode =
      fieldWrapper.querySelector(".custom-field-label") ||
      fieldWrapper.querySelector("label") ||
      fieldWrapper.querySelector(".field-label") ||
      fieldWrapper.querySelector(".label") ||
      fieldWrapper.querySelector(".title");

    if (!labelNode) return false;

    labelNode.textContent = newText;
    return true;
  }

  function setPlaceholder(fieldWrapper, placeholderText) {
    if (!fieldWrapper || !placeholderText) return false;

    const input =
      fieldWrapper.querySelector("input") ||
      fieldWrapper.querySelector("textarea");

    if (!input) return false;

    input.setAttribute("placeholder", placeholderText);
    return true;
  }

  function applyFieldRenames() {
    const container = document.querySelector("#widget-form-fields-container");
    if (!container) return false;

    let foundAny = false;

    Object.entries(FIELD_RENAMES).forEach(([selector, config]) => {
      const fieldWrapper = container.querySelector(selector);
      if (!fieldWrapper) return;

      foundAny = true;
      setLabelText(fieldWrapper, config.label);
      setPlaceholder(fieldWrapper, config.placeholder);
    });

    return foundAny;
  }

  // Retry lightly for a short period instead of observing the whole page
  let attempts = 0;
  const maxAttempts = 30; // ~6 seconds total
  const interval = setInterval(() => {
    attempts++;

    const done = applyFieldRenames();

    if (done || attempts >= maxAttempts) {
      clearInterval(interval);
    }
  }, 200);
})();

Add the Custom JavaScript to a Web Widget

To apply the script:

1. Go to Admin.

2. Under Channels, select Web Widgets & AI Agent.

3. Open the widget you want to customize and select Edit.

4. Scroll to the Advanced Customization section.

5. In the Custom JS box, paste the base script.
   

   
   
   

6. Inside the FIELD_RENAMES object, add the field reference along with the new label and placeholder values.

   

7. Select Update to save the widget configuration.

Contact Form Field References

Use the following field references when configuring the FIELD_RENAMES object:

Template: Rename a Contact Form field

Replace <CONTACT_FIELD_CLASS_FROM_INSPECT> with the field reference you find using Inspect.

".product-header.<CONTACT_FIELD_CLASS_FROM_INSPECT>": {
  label: "Your New Label",
  placeholder: "Your new placeholder"
}

Example: Rename the Phone Number field

".product-header.phone-number-field": {
  label: "Mobile Number",
  placeholder: "Enter your phone number"
}

Rename Multiple Contact Form Fields at Once

You can rename multiple Contact Form fields in the same widget by adding multiple entries inside the same FIELD_RENAMES object.

Example

".product-header.name-field": {
    label: "Full Name",
    placeholder: "Enter your full name"
  },
  ".product-header.emailid-field": {
    label: "Work Email",
    placeholder: "[email protected]"
  },
  ".product-header.phone-number-field": {
    label: "Mobile Number",
    placeholder: "Enter your phone number"
  },
  ".product-header.subject-field": {
    label: "Request Subject",
    placeholder: "Summarize your request"
  },
  ".product-header.description-field": {
    label: "Message",
    placeholder: "Describe your issue"
  }

Before Customization

The Contact Form fields appear with their default labels in the widget.

After Customization

The widget shows the updated field labels and placeholders based on your script.

Frequently Asked Questions

1. Does this JavaScript customization rename the original contact fields in BoldDesk?
   No. The JavaScript added in Web Widget → Advanced Customization → Custom JS only updates the visible labels and placeholders in the Contact Form of the Web Widget. It does not rename the actual fields.

2. Which Contact Form fields can I rename in the Web Widget?
   You can rename only the default Contact Form fields:

   • Name
   • Email
   • Phone Number
   • Subject
   • Description / Message

3. Can I rename multiple Contact Form fields in the same widget?
   Yes. You can rename multiple fields by adding multiple entries inside the FIELD_RENAMES object in the Custom JS.

4. Do I need to paste the full JavaScript code every time I make a change?
   No. You only need to:

   • paste the base script once, and
   • then update the FIELD_RENAMES object when you want to add or change field labels or placeholders.