How to Add Notes Below Subject and Description in the Customer Portal

You can improve the ticket submission experience in BoldDesk by displaying helpful notes below the Subject and Description fields. This is achieved using custom JavaScript and CSS in the Customer Portal settings, guiding users to provide clearer and more detailed information.

Script for Adding Notes Below Subject and Description in the Customer Portal

Use the following script to Add Notes Below Subject and Description in the Customer Portal:

// Subject note
const subNote = document.createElement('span');
subNote.textContent = 'Please provide a clear title.';
subNote.className = 'note-style';
document.querySelector('#subject_wrapper').after(subNote);

// Description note
const desNote = document.createElement('span');
desNote.textContent = 'Please provide detailed information.';
desNote.className = 'note-style';
document.querySelector('#descriptions').after(desNote);

Pasting the Custom JS Code

To apply this script, paste it in the Custom JS section of your portal customization settings. Learn more on Customizing the BoldDesk Customer Portal.

Before Customization

After Adding Notes Below Subject and Description in the Customer Portal

Script for Styling Notes Below Subject and Description in the Customer Portal

Apply styling for better visibility using the CSS code below:

.note-style {
    display: block;
    margin-top: 6px !important;
    color: #344054;
    font-size: 14px;
    font-weight: 500;
    line-height: 80px;
}

Before Styling Customization

After Styling Customization

Outcome

Displays helpful instructions below input fields
Improves ticket clarity and completeness
Reduces follow-up queries from agents

Troubleshooting

The notes do not appear below the Subject and Description fields in the Customer Portal
Confirm that the JavaScript code is added in the Custom JS section of the Customer Portal customization settings. Also verify that the field selectors used in the script, such as #subject_wrapper and #descriptions, match the current Customer Portal form elements. If the field IDs are different, the script will not find the fields and the notes will not be displayed.
The notes appear, but they are not styled correctly
Confirm that the CSS code is added in the Custom CSS section of the Customer Portal customization settings. Also verify that the class name used in the JavaScript matches the class name used in the CSS. In this example, both scripts must use note-style.
The notes appear in the wrong position on the ticket form
Review the JavaScript placement logic. The script uses .after() to display the note after the selected field wrapper. If the note appears too far from the field or in an unexpected location, confirm that the selector points to the correct Subject or Description field container.
The notes disappear after refreshing or updating the portal page
Confirm that the custom JavaScript and CSS changes were saved correctly in the Customer Portal settings. If the Customer Portal uses dynamic loading, test the customization after refreshing the page and opening a new ticket form again. If needed, adjust the script so it runs only after the ticket form fields are loaded.

Frequently Asked Questions

Can I add custom notes below the Subject and Description fields in the Customer Portal ticket form?
Yes. You can add notes below the Subject and Description fields by using custom JavaScript in the Customer Portal customization settings. The script can insert note text below the selected fields to guide users when they create tickets.
Can I change the text shown below the Subject and Description fields?
Yes. You can update the text in the JavaScript by changing the textContent values. For example, you can replace Please provide a clear title. with a more specific instruction based on your ticket submission requirements.
Can I change the appearance of the notes below the Subject and Description fields?
Yes. You can style the notes using custom CSS. The CSS can control the note color, font size, font weight, spacing, and display behavior. Make sure the CSS class name matches the class assigned in the JavaScript.
Will these notes affect ticket submission or required field validation?
No. The notes are only helper text displayed on the Customer Portal ticket form. They do not change the Subject or Description field validation, required field behavior, or ticket submission process.

Was this article useful?

Dislike

Comments (0)