Using the JavaScript API for Read-Only Fields

Would you like to control read-only fields in WPForms using JavaScript?
WPForms provides a set of JavaScript methods that let you lock, unlock, and toggle form fields directly on the frontend. These functions are helpful if you’d like to add custom logic, such as disabling fields after submission or making certain fields read-only based on user actions.

Adding Your Custom JavaScript

To use these methods, you’ll need to add a custom JavaScript snippet to your site. If you’re not sure how to add custom code, please see our guide on adding custom JavaScript for WPForms.

Make sure your code runs after WPForms has loaded by wrapping it inside the wpformsReady event.

Available Methods

The following methods are available inside the wpforms.field object.

`wpforms.field.lock( formId, fieldId )`

Locks a specific field so users can see it but not edit it.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.lock(123, 5);
});

`wpforms.field.unlock( formId, fieldId )`

Removes the read-only state from a specific field.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.unlock(123, 5);
});

`wpforms.field.toggle( formId, fieldId, state )`

Toggles the read-only state of a field.

true — lock the field
false — unlock the field
‘auto’ (default) — switch automatically depending on the current state

// With explicit state
wpforms.field.toggle(123, 5, true);

// With default behavior ('auto')
wpforms.field.toggle(123, 5);

`wpforms.field.isLocked( formId, fieldId )`

Checks if a field is currently locked. Returns a boolean.

jQuery(document).on('wpformsReady', function() {
    if ( wpforms.field.isLocked(123, 5) ) {
        console.log('Field is locked');
    }
});

`wpforms.field.lockAll( formId )`

Locks all fields in a form.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.lockAll(123);
});

`wpforms.field.unlockAll( formId )`

Unlocks all fields in a form.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.unlockAll(123);
});

`wpforms.field.readOnlyClass`

Returns the CSS class name applied when a field is read-only.

console.log( wpforms.field.readOnlyClass );
// 'wpforms-field-readonly'

Notes

Replace 123 with your form ID and 5 with the field ID you’d like to target.
Always use the wpformsReady event to ensure the methods are available.
These methods work only on the frontend — they don’t affect the form builder or saved entries.