PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Any way to change the required field asterisk to something else?

  1. I'd like to change the asterisk(*) that denotes a required field to just the text (required) is there anyway that i can do this?

    Posted 13 years ago on Thursday October 7, 2010 | Permalink
  2. This isn't possible as a built in feature. It is doable as a customization. You would have to use jQuery to replace the contents of the span that contains the asterisk to whatever you wanted it to be using jQuery scripting.

    Posted 13 years ago on Thursday October 7, 2010 | Permalink
  3. You could add something like this to your page template.. assuming you are already loading jQuery in your theme of course..

    <script type="text/javascript">
    	jQuery(document).ready(function() {
    		$(".gform_wrapper .gfield_required").html("* required field");
    	});
    </script>

    which gives you something like this..

    screenshot

    OR you could do something with just CSS - replace the default asterisk with some type of inline icon.. here's a CSS sample.

    .gform_wrapper .gfield_required {
        width:16px;
        height:16px;
        display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
        *display: inline;
        text-indent:-9000px;
        background-image:url(../images/myrequiredimage.png);
        background-repeat:no-repeat
    }
    Posted 13 years ago on Thursday October 7, 2010 | Permalink
  4. tanksalot
    Member

    What would be the change necessary to have the color in the first suggestion jQuery inherit from the page's CSS? I'd prefer the text "(required)" too. But the red doesn't work on my page background.

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  5. Just a simple CSS change to manipulate the color. There's a CSS sample on the documentation page.

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Required_Field_Indicator_.28Asterisk.29

    Look for the section titled "Required Field Indicator (Asterisk)"

    Posted 13 years ago on Thursday April 21, 2011 | Permalink
  6. Joe T
    Member

    Where does the asterisk currently live and why can we not just change it (even if in the db) to whatever we want the required field indicator to be?

    Usability studies have clearly shown that the single red asterisk is quite often overllooked, creating a less than optimal user experince. We need a way other than loading images and independent scripts to control this simple text. Is it really not possible outside of scripts and images?

    Posted 12 years ago on Wednesday November 16, 2011 | Permalink
  7. @Joe T It's not stored in the database. It's in the core Gravity Forms code. Currently there is no settings option to change or configure this. Because of that the only way to do this is via a simple customization as explained by Kevin above.

    Gravity Forms is extremely feature rich, but it will never provide 100% of the functionality that every individual user wants because expectations and needs vary greatly. In those situations it's extremely customizable and can be made to do what you want through the use of customizations.

    Posted 12 years ago on Wednesday November 16, 2011 | Permalink
  8. You could do this using CSS. Will only work on CSS3 capable browsers:

    .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required:after{
    	content: " (required)";
    }
    Posted 11 years ago on Monday May 21, 2012 | Permalink

This topic has been resolved and has been closed to new replies.