Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

Changing Your Gravity Forms Field IDs

The easiest way to change your field IDs.

Last updated | Written by 44 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

  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 31+ essential add-ons for Gravity Forms with support you can count on.

Comments

  2. Andre Nell says

    I am curious if there is a way to pass in an array with fields to be changed. This is what I tried.

    I created a php file with the following code:

    http://snippi.com/s/y79rwcp

    I then opened the form editor, and opened the Firefox Console.

    I then passed in an array of field ids to change (pasted this in the console):

    http://snippi.com/s/pzpj4qk

    I then pasted your function in the console.

    Finally, I pasted the following function call in the console:

    http://snippi.com/s/b4n1r6z

    So far, not successful.

    Reply

    • Avi Spiegel says

      Just FYI, the array works but you have to be careful because it doesn’t have the built in success/fail of the GW function. So this array could possibly end up deleting your fields. What happens is this, you change Field ID 30 and there’s already a #30 in your form, this function will now delete the original and duplicate it into the original 30, leaving you with two #30. I know I’m probably not explaining it right but just be careful of something like the following:

      my items = [ [1,30], [30,17] ]; in this example you have two fields, one with ID1 and another with ID30. What you may be expecting is that you change ID1 into ID30 and ID30 into ID17 but since it processes in order you end up with two ID17 that are duplicates of one another and the original ID1 is deleted.

  3. Ben says

    Hay

    This sounds great, I’ve set up a massive amount of conditional pricing, I’ve realized I’ve set up a checkbox list that should have been radial! Can I delete the check boxes and create a radial field, make the choices identical in the same order and then set the field Id to the original number of the checkbox? Do you think it will work or will all my conditional pricing break? It’s taken ages to implement!

    Thanks

    Ben

    Reply

  6. Richard says

    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.

    Reply

  7. Jason says

    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!

    Reply

    • David Smith says

      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. ?

  8. ronen says

    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

    Reply

  9. Robert says

    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

    Reply

  11. Jo says

    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.

    Reply

    • David Smith says

      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.

  15. Jiri says

    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!

    Reply

  16. Bryan Assata says

    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?

    Reply

  17. AJ says

    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.

    Reply

    • AJ says

      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:

      1. Right Click on the Field and Select Inspect this Element. Then Change the Field Id of the li list.

      – 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

  18. Rod Salm says

    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.

    Reply

Leave a 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.