Adding a red star next to required fields (continued and solved)

General HivePress
1

I agree with @webex regarding this thread : How to remove the word “optional” next to required fields, and put an asterisk after a required field

So here is a quick fix ( jQuery snippet ) :

jQuery(document).ready(function($) {
    $('.hp-form__field input[required]').each(function() {
        // Find the label associated with the required input
        var label = $(this).closest('.hp-form__field').find('.hp-field__label span');

        // Check if the star is already added to avoid duplicates
        if (!label.text().includes('*')) {
			//add css class : .req{color:red;font-weight:bold;font-size:1.2em}
            label.append(' <span class="req">*</span>');
        }
    });
});

CSS :

/*remove (optional)*/
.hp-field__label small {font-size: 0;}
.hp-field__label small:after {content:''; font-size: small;}
/*style for required field asterisk*/
.req{
	color:red;font-weight:bold;font-size:1.2em;
}

Results :

before :

image
image246×269 2.67 KB

after :

image
image225×293 1.64 KB

Hope this helps !

1 Like
2

Where do I post the jQuery snippet?

3

@cotasson, thank you for this snippet and CSS!

I tried pasting the jQuery into functions.php but get an error:

syntax error, unexpected token “$”, expecting variable

4

Ideally jQuery needs to be in *.js file (it’s javascript), not a *.php, hence not functions.php

Mind you, you could output js from php, I leave this as an excercise to you.

Cheers.

5

Got it, thanks @cotasson. I’m still a noob so I appreciate your reply. How are you calling the *.js file from the form page?

6

This should help you :

I don’t know if you are using a code snippet plugin, as suggested by Hivepress team.
I am using WPCode, and it allows you to add/edit both php and js code.

image
image1156×432 18.5 KB

Cheers !

PS : I noticed the code I shared is not foolproof.
Be warned. Sometimes, the red star is not displayed.

7

Thank you, much appreciated!