| /** | |
| * 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.' | |
| } |
Getting Started
- Open the desired form in the Form Editor.
Open your Browser Console
Copy and paste this snippet into the console. Now the
gwChangeFieldId()function is available for use on this page.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 12gwChangeFieldId( 4, 12 );
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 33+ essential add-ons for Gravity Forms with support you can count on.
Having some trouble getting this to work…it looks from the video like maybe the form editor has changed? When I paste the snippet into console and then enter the parameters, I get the message “ReferenceError: form is not defined”
Hi Charles,
I just tested the snippet again, and it works as expected. Can you confirm if you’re running the code on the Form Editor page?
Best,
This is a great help!! Thx for posting this!
Not working for me neither :S
It says: VM4599:1 Uncaught ReferenceError: gwChangeFieldId is not defined at :1:1
Hi Javier,
I just tested this on my end with GF 2.5.1 and it works as expected. Please note that you will have to first copy, paste and run the snippet in the browser console, before calling the function with the ID parameters. In case you’re still having issues with it, you can pick up a Gravity Perks license and get in touch with us via our Support form, so we can dig into this further.
Best,
Just wanted to say thanks for this!
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.
This is some fantastic. Thanks for this!
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.
Hey Arvind, Thank you so much for the kind words. We hope you continue to enjoy all our awesome snippets and perks. 😃
Thanks. This is helpful.
I had no idea you could use the browser’s console as a “terminal”
Hi there,
The video is not working.
Hello Crystal, Thank you for that informtion. I have updated the page so the video should be working correctly now. Have a great day! 😃