Please Note: We are no longer using forums to facilitate standard support. 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 4 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 4 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 4 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 4 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 4 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 3 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 3 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 3 years ago on Monday May 21, 2012 | Permalink

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

Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only