| /** | |
| * 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 32+ essential add-ons for Gravity Forms with support you can count on.
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! 😃