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.

by 38 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 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.'
}
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 30+ essential add-ons for Gravity Forms with support you can count on.

Comments

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

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

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

    • 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. 🙂

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

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

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

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

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

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

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

    • 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

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