Support » Plugin: Ultimate Member - User Profile & Membership Plugin » Mandatory field asterisk

  • Resolved petebm

    (@petebm)


    Hi

    Quick question, with, I hope, a quick answer –

    I cannot find the setting to get UM to show an asterisk by mandatory fields on a regsitration form; I’m sure it must be somewhere . . . someone please tell me where!

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Christian Clark

    (@christianmclark92)

    Hi,

    You can use Custom CSS for this, right?

    Add a class that displays the asterisk for required fields. You can use it as a background image by referencing libraries such as font awesome?, or you can just upload your own asterisk to your web server, and reference from a custom css file.

    I’m not sure if what you’re asking for is naturally included within the plugin.

    Hi @christianmclark92

    Many thanks for taking the time to reply. Unfortunately my Custom CSS skills don’t extend as far as things like ‘Add a class that displays the asterisk for required fields’; I was assuming that the option was built-in because of the topic https://wordpress.org/support/topic/if-option-show-asterisk-for-is-activated-mandatory-fields-are-not-translat/ – I realise that was a couple of years ago, but wouldn’t have thought such a sensible option would have been removed. I’m assuming I just can’t find it.

    Thanks again

    Christian Clark

    (@christianmclark92)

    Hi,

    So, the required functionality is working, but it is retroactively displayed. It will only trigger if the user attempts to register without filling out the required field properly. https://pasteboard.co/IikbHnO.png

    This should be sufficient, but if you’re set on getting an asterisk appear before hand, so that user doesn’t have to encounter a “oh you didn’t do this right” moment while filling out the form, then you can use custom CSS to define the background of the labels.

    The way this works.

    Step 1: Make your title & label for the input field, for this instance, mine is called “Username”. The meta key for this input is set as “user_login”.

    Step 2: I’ve also set this field as a “Required Field”.

    Seen here: https://pasteboard.co/Iikb39B.png

    Step 3: Because the asterisk isn’t being displayed initially, you can use CSS to call the name of meta key, and define a background image for it, (that image being your asterisk), and then use positioning to move it above the Title name for the input field.

    —–

    Read this article: https://www.w3schools.com/cssref/pr_background-position.asp
    Watch this video: https://www.youtube.com/watch?v=eI1ZLafA_Xk
    (How to Background Postition)

    If your meta key is “user_login”, Your code will look something like:

    .um-field.um-field-user_login.um-field-text.um-field-type_text {
    background-image: url(‘www.mywebsite.com/wp-content/uploads/2019/asterisk.png’)
    background-repeat: no-repeat;
    background-position: 10px 5px;
    }

    ——-

    To be more blunt, you’re uploading a small png version of your asterisk to your wordpress website, then you’re writing into your global CSS file that if a class exists with a specific meta_key, then apply that asterisk.png to it as a background image.

    Thank you, @christianmclark92, for a very detailed and helpful reply. I shan’t have time to work through it properly until this evening (UK), but I’ll certainly give it a go.

    Meantime, can anyone from UM confirm that the option to display an asterisk has been removed? That “oh you didn’t do this right” moment is certainly something to be avoided, I would have thought.

    Hi again @christianmclark92

    Pasting your code into my Custom CSS has thrown up a couple of errors, which I’m sure are v minor, but which I’d better ask you to clarify. To avoid my confusing things further by trying to describe them, they’re at https://imgur.com/a/ssGbFYr.

    The only changes I’ve made have been to the um field name, and of course the url for the asterisk.

    Thanks again

    Plugin Support Ultimate Member Support

    (@ultimatemembersupport)

    Hi @petebm,

    Please go to the Ultimate member -> Settings -> Misc and check “Show an asterisk for required fields” checkbox.

    Regards.

    Oh good grief @ultimatemembersupport.

    I do apologise for wasting everyone’s time – how on earth could I have missed that? The very first setting!

    It does remind me of another support request I put in a few weeks back (https://wordpress.org/support/topic/change-icon-for-help-text-in-form/), though, as the asterisks, being grey, don’t show up very well against a background colour.

    Is there any way to change the colour of either/both of those icons? Via Custom CSS, possibly?

    Thanks for the answer to my original question, though.

    • This reply was modified 5 months, 1 week ago by  petebm.
    Plugin Support Ultimate Member Support

    (@ultimatemembersupport)

    Hi @petebm,

    You can use this CSS:

    .um-req{
       color: #f00 !important;
    }

    Regards.

    petebm

    (@petebm)

    Thank you @ultimatemembersupport, that’s perfect for the asterisks.

    I’ve repeated the same idea for .um-icon-help-circled, and that has improved the visibility of those help text icons.

    Many thanks – I’ll update the other thread in case anyone’s interested.

    PS – since I’m on a roll here, perhaps you could have a look at https://wordpress.org/support/topic/relation-between-conditional-logic-rules/ . . .

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.