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.

Change position of sub-labels on advanced fields

  1. On this form, we would like the sub-labels to appear above the boxes rather than below. How can I make this change?

    http://www.careerprocanada.org/cpc-application-for-approval/

    Posted 6 years ago on Wednesday May 25, 2011 | Permalink
  2. This is not a built in option.

    You can use this jQuery method and it would apply to all the description fields without having to specify each one individually.

    http://www.gravityhelp.com/forums/topic/request-setting-to-place-field-descriptions-above-fields#post-12697

    Posted 6 years ago on Wednesday May 25, 2011 | Permalink
  3. Hi Carl,

    The jQuery snippet on that page wasn't quite right (at least it didn't work for me!). I've modified it slightly as follows, this isn't a fully tested method however.

    <script type="text/javascript">
          jQuery(document).ready(function() {
    
              jQuery('.ginput_container label').each(function(i,e){
                  fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
                  jQuery(e).siblings('.ginput_container input').before(fielddesc); //moves sub label above input fields
                  jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
                  jQuery(e).remove();
              });
    
          });
      </script>
    Posted 6 years ago on Tuesday February 7, 2012 | Permalink
  4. Thanks for sharing Joff. :)

    Posted 6 years ago on Thursday February 9, 2012 | Permalink
  5. cjmox
    Member

    I edited this a little for my form, since the code above was making my radio labels wonky. This code is the same as above except it selects text inputs specifically while making an exception for radio buttons. Hope someone finds it useful!

    <script type="text/javascript">
          jQuery(document).ready(function() {
    
              jQuery('.ginput_container label').each(function(i,e){
                  fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
                  jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
                  jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
                  jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
                  jQuery(e).remove();
              });
    
          });
      </script>
    Posted 5 years ago on Tuesday December 4, 2012 | Permalink
  6. David Peralty
    Administrator

    Thanks cjmox. I am sure someone will.

    Posted 5 years ago on Tuesday December 4, 2012 | Permalink
  7. You missed a line... Without it, checkbox fields don't work. Here's the correct code.

    <script type="text/javascript">
          jQuery(document).ready(function() {
    
              jQuery('.ginput_container label').each(function(i,e){
                  fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
                  jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
                  jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
                  jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
                  jQuery(e).siblings('.ginput_container .gfield_checkbox input').after(fielddesc); //keep label above checkboxes
                  jQuery(e).remove();
              });
    
          });
      	</script>
    Posted 5 years ago on Saturday March 2, 2013 | Permalink
  8. Thanks for the update DrDave.

    Posted 5 years ago on Tuesday March 5, 2013 | Permalink
  9. Actually, this isn't right either.. It doesn't move the email field descriptions...

    Unfortuantely, I'm sick, and my coding ability is about 0 today.

    I tried adding this:

    jQuery(e).siblings('.ginput_container input:email').before(fielddesc);

    But, it doesn't work..

    Anyone who's not sick care to fix my mistake? Then, it should actually work correctly :)

    Posted 5 years ago on Monday March 18, 2013 | Permalink
  10. Solution:

    jQuery('.ginput_container label').each(function(i,e){
                  fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
                  jQuery(e).siblings('.ginput_container input[type=email]').before(fielddesc);
                  jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
                  jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
                  jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
                  jQuery(e).siblings('.ginput_container .gfield_checkbox input').after(fielddesc);
                  jQuery(e).remove();
              });
    Posted 5 years ago on Tuesday March 19, 2013 | Permalink
  11. I posted something similar earlier this evening, here:
    http://www.gravityhelp.com/forums/topic/address-labels-below-fields#post-176132

    Is this working for you now?

    Posted 5 years ago on Tuesday March 19, 2013 | Permalink
  12. Chris, your pastebin is the old version...

    jQuery('.ginput_container label').each(function(i,e){
                  fielddesc = jQuery('<div>').append(jQuery(e).clone()).remove().html();
                  jQuery(e).siblings('.ginput_container input[type=email]').before(fielddesc);
                  jQuery(e).siblings('.ginput_container input:text').before(fielddesc); //moves sub label above input fields
                  jQuery(e).siblings('.ginput_container select').before(fielddesc); //moves sub label above select fields (e.g. country drop-down)
                  jQuery(e).siblings('.ginput_container .gfield_radio input').after(fielddesc); //keep label above radio buttons
                  jQuery(e).siblings('.ginput_container .gfield_checkbox input').after(fielddesc);
                  jQuery(e).remove();
              });

    This one above works ^^^^ the one you have on the pastebin doesn't do emails properly...

    (and, pastebin: http://pastebin.com/wbrrLBkx )

    Posted 5 years ago on Tuesday March 19, 2013 | Permalink
  13. Thanks for the updated code. http://pastebin.com/CfFeP4Ux

    Posted 5 years ago on Thursday March 21, 2013 | Permalink
  14. Richard Vav
    Administrator

    Here's an update by Ross McKay:

    The code there acts upon all fields, then undoes its actions for radio buttons and checkboxes. Better to just not act on those. Here's a snippet that only adds the script to pages with a Gravity Forms form, and doesn't act on radio buttons or checkboxes.

    http://pastebin.com/WCuDc0Eh

    Posted 4 years ago on Monday August 12, 2013 | 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