How to Remove Asterisks from Required Form Fields

  • 20 November 2015
  • 9 replies
  • 232 views
Joshua_Steele

I recently needed to remove the asterisks from all required form fields. My form design was such that all fields are required, and I needed to use the asterisk character to point to a terms and conditions footnote.

Here’s the JavaScript I added to my page to remove the asterisks from all required field labels. Script placement is “Head” and jQuery is loaded. Enjoy:

&nbsp;<br /> jQuery(document).ready(function() {<br />&nbsp; &nbsp; jQuery('form .lp-pom-form-field label').text(function(i, text) {<br />&nbsp; &nbsp; &nbsp; if ('*' == text.slice(-1)) return text.slice(0, -2);<br />&nbsp; &nbsp; &nbsp; return text;<br />&nbsp; &nbsp; });<br />&nbsp; });<br />

One could easily modify this script to target only certain fields, by selecting on field IDs instead of the class. Any improvements?

If this script helps you out drop a Like or a Comment   🙂

9 replies

J

Awesome tip, Joshua! Would love to see what other cool modifications you’re making to your pages/fields as well. 🙂

E

[http://www.tokobungabandung.co.id/](<a href=)">Great Information , it’s will be solved my problem

F

Hi!

I realize this is an old thread but I didn’t manage to find anything newer on the subject.

How would I go about to alter the code to have some other marker appear instead of an asterisk?
What I want to do is to change the asterisk in to text, like “Required” for example.

I make landing pages in Japanese, and Japanese people are in general more used to seeing the word “Required” rather than an asterisk in forms. (The word in Japanese is only two characters long, so it doesn’t look too clogged up neither.)

I would be very happy if anyone can help!

/Fridrik

Joshua_Steele

Fridrik, I haven’t test this but you could modify the return value in the code above:

return text.slice(0, -2)+' (required)';

F

Thank you very much Joshua.

Unfortunately I can’t get it to work.
And to test, I tried the unmodified code as well, just to see if the asterisks would disappear, but they didn’t.
So I’m inclined to believe that I’m doing something else wrong.

I have the script in the header, and with jquery loaded. I also added the script tags.
Have any idea what I might be doing wrong?

EDIT: Just to clarify, at the moment there is just nothing going on at all. No error messages, or code showing showing up on the page, etc. And no change at all to the form.

/Fridrik

J

@Fridrik_Juliusson are you checking the published page? Try clearing your cache and reloading the page.

Joshua_Steele

Sorry, all I can think of is the “new forums” seem to have added garbage like

&nbsp;<br />

to the code from the old forum posts. It does need to be well-formed JavaScript! Sorry if that’s not helpful, I just don’t have an occasion to test anything for you

F

Thank you both.

Justin,
Yes. I tried completely reloading the page but it didn’t help.

Joshua,
I assumed that all the spaces and line breaks were not an intentional part of the code, and at first I cleaned it up before trying it. When it didn’t work I actually tried the code “as is” as well, just in case I was removing something that was actually needed without realizing it. Either way it didn’t seem to work for me.

For now I convinced our client that the asterisks probably won’t result in any significant drop in conversions. So I’ll will just go with the form as it is. But thank you both very much for your help!

I suppose I’ll go and drop it as a suggestion somewhere for wanted features 🙂

Have a nice day,
Fridrik

BrunaGarcia
Userlevel 3

Hey peeps!

I was able to tweak a little bit @Joshua_Steele’s code and try it out in one of my pages and it seems to have worked now.

You can check it out here: https://try.cooldomain.ml/testform/

Here is a step by step on how to apply:
1- Make sure you are applying the jQuery library to your page. You can find the jQuery CDN here- I’d recommend using the minified version. It should be placed on the head of your page and before any other script that contains jQuery.
2- Copy the code below:

<script>
    $(document).ready(function () {
        $('form .lp-pom-form-field label').text(function (i, text) {
            if ('*' == text.slice(-1)) return text.slice(0, -2);
            return text;
        });
    });
</script>

3- Place the script above on the head of your page as well.

Publish your page and Be HaPpY! 😀

Reply


Terms & ConditionsCookie settings