| /** | |
| * 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 https://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 29+ essential add-ons for Gravity Forms with support you can count on.
Do we need to change ID to another number or can we give it a custom name? I tried to watch the video, but it does not appear to be working. I’m trying to give field IDs a custom name. Any help appreciated.
The field ID can only be a number. Gravity Forms does not support non-numeric field IDs.
This is an excellent little snippet. Still can’t believe after all this time GF hasn’t given us the ability to provide custom ID and Name attributes.
Any chance you have a solution for changing the FORM ID rather than the field ID? Same annoyance. I’ll pay you ;)
Thank you David!
Hi Jason, easiest solution would be to log into the database and modify it there (gf_form, gf_form_meta, gf_form_view). We don’t have a snippet for this one. If you’re looking to hire someone to create a more polished solution, codeable.io is a great resource. 🙂
I can’t even begin to express how inconvenient it is not NOT be able to assign fields custom IDs.
I did now. Thanks, It works !
Hi, When I paste the gwChangeFieldId( 4, 12 ) into the console and press enter I get this: Uncaught ReferenceError: gwChangeFieldId is not defined at :1:1 and after I save the form noting happens. Thanks, Ronen
Did you copy and paste the function definition into your console first?
Hi, so I am not sure how to do this.. I paste the code in the console, but where do I have to change the field id? gwChangeFieldId(), Where is this exactly? I can see at the beginning: gwChangeFieldId = function( currentId, newId ) {
Do I need to replace the numbers in currentId and newId in all code?
Please help
Solved! Thank you works perfect
Just a note, if you are using the repeater plugin, you have to get your field out of the repeater before this will work.
Noted. Thanks for sharing, TJ.
Not sure if I’m doing something wrong or not but I added this to the console and it told me it worked but upon saving, nothing changed. I’m wondering if an update this year changed this from working.
Hm, hard to say, Jo. I confirmed that this is still working on my end. If you need help with this and would like hands-on support, pick up a copy of Gravity Perks which includes complimentary support for our snippets.
Nice! Was looking for an easy way to do this rather than create a field array to rgar from. Bing bang boom – 2 seconds, done!
That’s what we like to hear, Joe!
Works like a charm. Thanks :)
Glad to help. :)
Hi David,
I wanted to let you know that I used your code to add a feature to one of my plugins called Mighty Gravity Forms: https://wordpress.org/plugins/bluecube-mighty-gravity-forms/
I hope you are ok with this. If not, definitely let me know.
Regards
All good. Thanks for sharing. :)
Hi, if I put the snippet in console and then call the function then i get following error:
gwChangeFieldId( 60, 100 ); ReferenceError: form is not defined [Learn More]
What do I do wrong? Browser Firefox 49.0.1
Thanks for any help!
Only thing I can think is that in your console, you’re not working with the “top” level document. Here’s what that looks like in Chrome (screenshot).
I am getting an “Uncaught ReferenceError: gwChangeFieldID is not defined. I had posted last week, but don’t see my original post. You had wanted me to export my form and send it…..where can I send that to?
I’m thinking you might not have copied the full snippet on step #3.
Hi,
Thanks for this snippet. I’m running to a problem when changing an address field id. The id does get changed, however, it doesn’t let you open the field box to show the advanced settings.
Could you send me an export of the form you’re trying to change the Address field ID on?
Thanks David. Unfortunately, I’m unable to export the form because there is excessive customization. However, I was able to get it to work by changing the values manually.
The error message I was getting from the console log was: Uncaught TypeError: form.fields[i].inputs[j].id.replace is not a function(…)
When I created a brand new form, and tried to change to field id on an address field, the code worked perfectly. So, there might have been something wrong with my particular form.
The way I changed the values manually was basically following the format of the code:
– example to 2. Then Open the console and type in “console.log(form);” to get the form array values. 3. Find the Fields Objects. and find the field that I wanted to change and change the id. 3. Then go to the Inputs Objects under the same Field Object. And Change the ID of the Input values. The ID of the Input values where changed from 1.1, 1.2, 1.3, etc. to 4.1,4.2,4.3 etc.
Lastly, close the console and update the form. And It should work.
I appreciate you trying to help though. If I run to anymore trouble, I’ll keep in contact.
Thanks Again
Awesome! Glad you were able to find a solution. Thanks for sharing. :)
Hi there,
This works, but do you know of a way to reset all the fields of a form? Basically to start over? Any new field I add is setting the ID’s in the 77000’s which is causing problems on the back end entries and output to pdf.
Yes, question: it says “Copy and paste this snippet into the console.” but there’s not snippet that I can find.
Hi Rod, at the top of the article is a “show snippet” button (it’s purple). If you click that, it will reveal the snippet).