Making a Field Read-Only

• Introduction
• Native (Code) Solution
• Targeting a Paragraph Text field
• Targeting other fields using a text input
• Targeting checkboxes fields
• Targeting radio button fields
• Third Party Plugin Solution

Introduction

Sometimes, making a field read-only can be helpful, allowing you to utilize that field for a dynamic display of various messages. If you want to change a field to read-only, you must use JavaScript. The following filter and function will help you accomplish this.

Native (Code) Solution

First, you must add a custom class to your field’s Custom CSS Class setting to easily target it. We will use a class named gf_readonly to target the field correctly, but you can use a different class if you prefer.

We will use JavaScript to apply the readonly attribute to the targeted field type.

Targeting a Paragraph Text field

document.addEventListener('gform/postRender', (event) => {
	const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
	const textareas = Array.from(gform.utils.getNodes('.gf_readonly textarea', false, form, true));

	textareas.forEach(textarea => {
		textarea.readOnly = true;
	});
});

Targeting other fields using a text input

This will work for other field types where the HTML input is set to text, such as a Date Picker field.

document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const inputs = Array.from(gform.utils.getNodes('.gf_readonly input', false, form, true));

    inputs.forEach(input => {
        input.readOnly = true;
    });
});

Targeting checkboxes fields

document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const checkboxes = Array.from(gform.utils.getNodes('.gf_readonly input[type=checkbox]', false, form, true));

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', (event) => event.preventDefault());
    });
});

Targeting radio button fields

document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const radioButtons = Array.from(gform.utils.getNodes('.gf_readonly input[type=radio]', false, form, true));

    radioButtons.forEach(radio => {
        radio.addEventListener('click', (event) => event.preventDefault());
    });
});

Third Party Plugin Solution

If you don’t want to implement this using code, remember that third-party plug-ins have often solved common problems for you.

For read-only functionality, check out this well-known third-party plug-in by the Gravity Wiz team: GP Read Only.

​Disclaimer: Third-party services, plugins, or code snippets that are referenced by our Support documentation or in Support Team communications are provided as suggestions only. We do not evaluate, test or officially support third-party solutions. You are wholly responsible for determining if any suggestion given is sufficient to meet the functional, security, legal, ongoing cost and support needs of your project.

Feedback, feature and integration requests, and other functionality ideas can be submitted on our Gravity Forms, Gravity Flow, or Gravity SMTP product roadmap pages.