TutorialModify the Field Type in Gravity Forms by swapping Field ID’s

Tutorials » Rocketgenius, Inc. » Modify the Field Type in Gravity Forms by swapping Field ID’s

Evolving requirements for your form might require you to change the field type from a text input to a dropdown menu for predefined options, or using a date picker instead of a text field for dates. If you need to modify a field type in Gravity Forms, often you want to retain the field id because of conditional logic or you want to retain the values of existing entries. Changing the field type is definitely possible, but there are some things to consider first.

Are the field type properties compatible?

A reliable and safe method to modify the field type of a Gravity Forms field is to add a new field to your form with the desired field type, configure it correctly, and then swap the field IDs using the script below. This ensures that the new field doesn’t carry over any residual properties from the previous field type when you change it.

If you want to retain all the original properties you can follow this tutorial: Change field type in an existing Gravity Form, but this might lead to unexpected behaviour because the stored field properties might not go well together with the new field type. The method described in this tutorial requires a bit more work, but is less risky.

Are the existing values compatible with the new field type?

When changing a field type for a form with existing entries, it’s vital to ensure that the new type can interpret the stored values. If you are in doubt about how to change the field type, test it first in a copy of your original form.

To modify the field type by changing field ID’s, follow these steps:

1. Open your browser’s developer console while editing your Gravity Form. You can do this by pressing ‘Ctrl + Shift + i’ or right mouse button + ‘inspect’. This works in both FireFox an Chrome.

2. Paste the script below into the console and press enter.

function swapFieldIds(fieldId1, fieldId2) {
	// Ensure the form object is available
	if (typeof window.form !== 'undefined') {
		let field1, field2;

		// Locate the fields by their IDs
		window.form.fields.forEach(function (field) {
			if (field.id === fieldId1) {
				field1 = field;
			}
			if (field.id === fieldId2) {
				field2 = field;
			}
		});

		// Swap the field IDs if both fields are found
		if (field1 && field2) {
			const tempId = field1.id;
			field1.id = field2.id;
			field2.id = tempId;

			console.log(
				`Successfully swapped Field IDs: ${fieldId1} and ${fieldId2}`
			);
			console.log(
				'Save your form, and reload the page to see the changes'
			);
		} else {
			console.error('One or both field IDs not found.');
		}
	} else {
		console.error('Form object not found.');
	}
}

3. Now input the following command in the console window, replace X and Y with the actual IDs of the fields you want to swap.

swapFieldIds(X, Y);

4. Save your form.

5. Reload the page to make the changes visible after you change Gravity Forms field type.

This is how it looks in your console window:

Our Premium Add-ons for Gravity Forms

Advanced Merge Tags
This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.

List Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.

JWT Prefill
Create JSON Webtokens to populate fields in your Gravity Form. With a secure key you can validate the data you don’t want to be tampered with.

Advanced Number Field
Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.

Field to Entries
Create entries based on Checkboxes & Multi Select choices & List Field rows.

List Dropdown
Add a Dropdown Select with choices to a column or multiple columns in a Gravity Forms List Field.

Update Multiple Entries
Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.

List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.

Read more tutorials about Rocketgenius, Inc.

Rocketgenius builds advanced software solutions. Rocketgenius is the team behind Gravity Forms. Visit GravityForms.com

Change field type in an existing Gravity Form

Do you want to change the type of an existing field in an existing Gravity Forms? This handy little snippet does the trick.

Gravity Forms Inception - Building a Form with a Form

With Gravity Forms in combination with some Add-ons, you can create a form to create another form. This can be particularly handy when you have a solid structure for a form, but the only difference is the questions you ask.

iDEAL payments with Gravity Forms Stripe Add-On

Do you want to support iDEAL payments in Gravity Forms when using Stripe as a payment provider in stead of Mollie?

Clean uploaded filenames

Do you want to clean special characters, accented characters or glyphs like € and £ or whitespace characters from uploaded filenames?