This guide explains how to display informative notes next to the Name and Email fields on your Customer Portal ticket creation form. These notes can provide customers with additional context about why their information is being collected, how it will be used, or any other details you want to communicate, helping create a more transparent and trustworthy experience.

By adding a simple CSS snippet, you can provide this additional context without modifying any backend functionality. This lightweight customization enhances usability, reinforces user confidence, and supports privacy and compliance best practices.

Use Cases

• Clarify how customer personal data will be used.
• Increase transparency and user trust on the Customer Portal form.
• Add lightweight UI guidance without changing server-side logic.
• Support privacy messaging and compliance-oriented UX.

Script for Adding Descriptive Text Beside Name and Email Fields

Paste the CSS code below. This code will apply for both authenticated and non-authenticated users in the customer portal.

#create-tickets-custom-form .product-header.cf_name label::after {
content: "This will be used only to contact you";

color: #344054;
   font-size: 13px;
   font-weight: 500;
   font-style: italic;
   margin-left: 4px;
}
#create-tickets-custom-form .product-header.cf_email label::after {
content: "This will be used only to contact you via email";

color: #344054;
   font-size: 13px;
   font-weight: 500;
   font-style: italic;
   margin-left: 4px;
}

Pasting the Custom JS Code

To apply this script, paste it in the Custom JS section of your portal customization settings. Explore How to Customize the BoldDesk Customer Portal.

Before Customization

After Customization

Permission

Permission to Manage settings in the Admin module.

Troubleshooting

The descriptive text does not appear

• Confirm the CSS was saved successfully in the Customer Portal customization area.
• Clear browser cache and reload the Customer Portal page.
• Confirm the DOM selectors match the current portal markup:
  • #create-tickets-custom-form
  • .product-header.cf_name
  • .product-header.cf_email

The message appears but styling looks wrong on mobile

• Test the Customer Portal form at common mobile breakpoints.
• If needed, reduce the font-size value (example: 12px) for better fit.

Frequently Asked Questions

1. Can I change the message text?
   Yes. Modify the content value in the CSS:

    ```css
    content: " (Your custom message here)";
    ```
   

2. Can I apply this to other fields?
   Yes. Add additional field label selectors:

    ```css
    .create-ticket-fields #phone_label::after
    ```
   

3. Why is the message not appearing?

   • Ensure the field IDs (#username_label, #useremail_label) match your actual DOM
   • Clear browser cache
   • Confirm CSS was saved successfully

4. Will this affect mobile view?
   No major issues, but test responsiveness. You may adjust font size if needed:

    ```css
    font-size: 12px;
    ```   
   

5. Is this compliant with data protection laws?
   Yes. It improves transparency and aligns with GDPR principles by informing users how their data is used.

Related Articles

1. How to Customize the BoldDesk Customer Portal
2. How to Enhance Live Chat Widget with Custom CSS and JavaScript