How to Disable a Form Field to Prevent User Input

Overview

Would you like to disable a form field to prevent any user input? A disabled, or read-only field can be useful if you’d like your users to see the field value but need to prevent that value from being changed. In this tutorial, we’ll show you how to disable a form field to prevent any user input.

This could also helpful when you’d like this value to be included in the {all_fields} Smart Tag for a notification email or within a CSV export, as HTML field content wouldn’t be visible in these.

Setup

In the snippet below, we’ll show you how to make a form field read-only.

1) Adding the JavaScript

Add this code to your site.

/**
 * Disable form fields to make read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 *
 */
function wpf_dev_disable_field() {
	?>
	<script type="text/javascript">

		jQuery(function($) {
			$(".wpf-disable-field input").attr("readonly", true);
		});

	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

After adding this code to your site, you’ll need to identify which fields you’d like to disable in the next step.

2) Adding the CSS Class

First, identify which form field you’d like to disable and then open the form builder and click on the field in the preview panel to open its Field Options.

Under Advanced Options, you’ll need to add wpf-disable-field to the CSS Classes field.

If using more than one CSS class for a field, just be sure to put a space between each class name.

Identify which fields to disable

3) Adding the default value

Next, you’ll need to add a Default Value for your field, which can also be done in this Advanced Options section.

This can be regular text or a Smart Tag to pull specific data. If you’d like, you can also check out our tutorial on creating a custom Smart Tag.

Add the default value to your field

Your users will now see the field but won’t be able to edit it.

The code above is meant only for standard input fields (Single Line Text, Email, etc).

The best way to prevent input in other fields, such as Dropdown, Checkboxes, or Multiple Choice would be to only provide a single option to the user.

And that’s all you need to set up your form fields to be read-only. Would you like to change the sublabels on the Name field? Our article on How to Change Sublabels for the Name Field will walk you through the steps on how to accomplish this.