Highlight a word in a label of a checkbox

Hi @1stsol,

Thanks for reaching out!

I understand you’d like to highlight specific words within your checkbox labels, such as making “Newsletter” appear in a different color. While directly adding HTML like <span> tags within the form editor won’t work for security reasons, a custom code snippet could achieve this for you.

You could try using the following code snippet:

add_action('wpforms_wp_footer', function() {
    ?>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const highlightConfig = {
            'wpforms-19-field_4_1': ['Newsletter', 'This'],
            'wpforms-19-field_4_2': ['Choice']
        };

        function highlightWords(text, words) {
            let newText = text;
            words.forEach(word => {
                const regex = new RegExp((${word}), 'g');
                newText = newText.replace(regex, '<span style="background-color: yellow; font-weight: bold;">$1</span>');
            });
            return newText;
        }

        for (const labelId in highlightConfig) {
            const checkboxLabel = document.querySelector(label[for="${labelId}"]);
            if (checkboxLabel) {
                const text = checkboxLabel.textContent;
                const newText = highlightWords(text, highlightConfig[labelId]);
                checkboxLabel.innerHTML = newText;
            }
        }
    });
    </script>
    <?php

}, 30);

Please adjust the highlightConfig object:

• Form ID: Replace "19" with your form’s ID.
• Field ID: Replace "4" with the ID of your checkbox field.
• Choice ID: Replace "1" with the ID of the specific checkbox choice within the field. If you have multiple words to highlight within one label simply add them to the array associated with the label ID. For example 'wpforms-19-field_4_1': ['Newsletter', 'This']

You can find a helpful guide on locating your Form and Field IDs here.

Here’s a screenshot of the result on my local site.

For additional words in other Checkboxes fields, you can copy 'wpforms-19-field_4_2': ['Choice'] and paste below with the adjustments above.

This snippet will highlight the specified words with a yellow background and bold font. You can customize the style attribute within the <span> tag to change the highlighting to your liking.

In case it helps, here’s our tutorial with the most common ways to add custom code like this. For the most beginner-friendly option in that tutorial, I’d recommend using the WPCode plugin.

If you have any additional questions or need further assistance, please don’t hesitate to let me know.

Thanks!

• This reply was modified 1 year, 2 months ago by Ralden Souza.