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

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Janet Barclay
    Member

    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 13 years ago on Wednesday May 25, 2011 | Permalink

  2. Carl Hancock
    Administrator

    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 13 years ago on Wednesday May 25, 2011 | Permalink

  3. Joff
    Member

    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>
    Copy
    Posted 13 years ago on Tuesday February 7, 2012 | Permalink

  4. David Smith
    Member

    Thanks for sharing Joff. :)

    Posted 13 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>
    Copy
    Posted 12 years ago on Tuesday December 4, 2012 | Permalink

  6. David Peralty

    Thanks cjmox. I am sure someone will.

    Posted 12 years ago on Tuesday December 4, 2012 | Permalink

  7. DrDavid
    Member

    You missed a line... Without it, checkbox fields don't work. Here's the correct code.

    [js]
<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>
    Copy
    Posted 12 years ago on Saturday March 2, 2013 | Permalink

  8. Chris Hajer
    Key Master

    Thanks for the update DrDave.

    Posted 12 years ago on Tuesday March 5, 2013 | Permalink

  9. DrDavid
    Member

    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);
    Copy

    But, it doesn't work..

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

    Posted 12 years ago on Monday March 18, 2013 | Permalink

  10. DrDavid
    Member

    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();
          });
    Copy
    Posted 12 years ago on Tuesday March 19, 2013 | Permalink

  11. Chris Hajer
    Key Master

    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 12 years ago on Tuesday March 19, 2013 | Permalink

  12. DrDavid
    Member

    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();
          });
    Copy

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

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

    Posted 12 years ago on Tuesday March 19, 2013 | Permalink

  13. Chris Hajer
    Key Master

    Thanks for the updated code. http://pastebin.com/CfFeP4Ux

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

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