Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

  • Gravity Perks
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    • Documentation
    • Support
    • Account

Changing Your Gravity Forms Field IDs

The easiest way to change your field IDs.

Last updated May 12, 2020 | Written by David Smith 54 Comments

Watch VideoShow CodeDownload Code
/**
* Gravity Wiz // Gravity Forms // Change Field ID via Browser Console
*
* Provides a simple function for changing the ID of a Gravity Forms field via the browser console from the Form Editor page.
*
* @version 1.0
* @author David Smith <david@gravitywiz.com>
* @license GPL-2.0+
* @link http://gravitywiz.com/changing-your-gravity-forms-field-ids/
* @video http://www.screencast.com/t/STm1eLZEsR9q
* @copyright 2015 Gravity Wiz
*
* Instructions:
*
* 1. Open the desired form in the Form Editor.
*
* 2. Open your Browser Console
*
* Chrome: https://developer.chrome.com/devtools/docs/console
* Firefox: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
* IE: https://msdn.microsoft.com/en-us/library/gg589530(v=vs.85).aspx
*
* 3. Copy and paste this snippet into the console. Now the gwChangeFieldId() function is available for use on this page.
*
* 4. Provide the current field ID and the new field ID to the gwChangeFieldId() function.
*
* Example: Current Field ID is 4, New Field ID is 12
*
* gwChangeFieldId( 4, 12 );
*
* 5. Click the "Update Form" button to save your changes.
*
*/
gwChangeFieldId = function( currentId, newId ) {
for( var i = 0; i < form.fields.length; i++ ) {
if( form.fields[i].id == currentId ) {
form.fields[i].id = newId;
jQuery( '#field_' + currentId ).attr( 'id', 'field_' + newId );
if( form.fields[i].inputs ) {
for( var j = 0; j < form.fields[i].inputs.length; j++ ) {
form.fields[i].inputs[j].id = form.fields[i].inputs[j].id.replace( currentId + '.', newId + '.' );
}
}
return 'Success!';
}
}
return 'Failed.'
}
view raw gw-gravity-forms-change-field-id.js hosted with ❤ by GitHub

Getting Started

  1. Open the desired form in the Form Editor.
  2. Open your Browser Console

    • Chrome: https://developer.chrome.com/devtools/docs/console
    • Firefox: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console
    • IE: https://msdn.microsoft.com/en-us/library/gg589530(v=vs.85).aspx
  3. Copy and paste this snippet into the console. Now the gwChangeFieldId() function is available for use on this page.

  4. Provide the current field ID and the new field ID to the gwChangeFieldId() function. Here is an example where current field ID is 4 and the new field is 12

    gwChangeFieldId( 4, 12 );

  5. Click the “Update Form” button to save your changes.

Parameters

  • currentFieldId (int) (required)

    The current field ID of the field for which you would like to change the ID.

  • newFieldId (int) (required)

    The new field ID to which you would like to set the current field.

Any questions?

We’re always happy to answer questions. How does solution works for you? Why did you need to change your field IDs? Let us know in the comments below!

Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 32+ essential add-ons for Gravity Forms with support you can count on.

  • View All Perks
  • Buy Gravity Perks

Filed Under: Snippets javascript

Comments

  1. Retrokevin says

    November 17, 2020 at 5:33 pm

    Just wanted to say thanks for this!

    Reply
  2. Paul Biron says

    October 19, 2020 at 12:28 pm

    If the new field ID is larger than form.nextFieldId then you should also update form.nextFieldId to one greater than the new field ID, or else you might have problems when fields are later added to the form.

    Reply
  3. Scott Carter says

    July 30, 2020 at 4:24 pm

    This is some fantastic. Thanks for this!

    Reply
  4. Arvind says

    July 6, 2020 at 6:56 am

    Wow. Cool. A huge time saver when creating bulk gravity forms. Helps a lot when you have to create similar forms many times over in different contexts Gravity forms plugin with gravity perks plugins is now a must have for any wordpress based software now. No other plugin comes even close. thanks.

    Reply
    • Ryan Donovan says

      July 6, 2020 at 10:01 am

      Hey Arvind, Thank you so much for the kind words. We hope you continue to enjoy all our awesome snippets and perks. 😃

  5. Jesus Vasquez says

    June 6, 2020 at 2:21 am

    Thanks. This is helpful.

    I had no idea you could use the browser’s console as a “terminal”

    Reply
  6. Crystal Ku says

    May 12, 2020 at 2:23 am

    Hi there,

    The video is not working.

    Reply
    • Ryan Donovan says

      May 12, 2020 at 9:53 am

      Hello Crystal, Thank you for that informtion. I have updated the page so the video should be working correctly now. Have a great day! 😃

« Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • How To (64)
  • News (21)
  • Plugins (14)
  • Releases (7)
  • Resource (3)
  • Snippets (58)
  • Tutorials (57)
  • Updates (104)

Recent Posts

  • How to Send a Follow-Up and Pre-Fill Information
  • How to Update Posts with Gravity Forms
  • Gravity Wiz Weekly #104
  • The Complete Guide to Using Gravity Forms With Zapier
  • Gravity Wiz Weekly #103

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2021 · Powered by WordPress · Gravity Wiz LLC

  • Support
  • Affiliates
  • About
  • Sitemap
  • Gravity Perks
    â–¼
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    â–¼
    • Documentation
    • Support
    • Account