Read-only fields are those which get submitted along with the form and stored as an entry but aren’t editable by users. There is no inbuilt option to mark fields as read-only in WPForms but it can be easily done using Booster for WPForms.

There are a lot of scenarios in which they are helpful. Consider you want to show some data to the user using WPForms smart tags ( like user’s full name) but don’t want it to be modified by users. To achieve this you can add a text field with ‘user full name ‘ smart tag as ‘default’ value and mark the field as read-only.

In this article, I will show you two methods to convert a field to readonly. The first method uses free Booster for WPForms plugin and is very easy to follow. The second method involves adding code into your site which can be a bit difficult for some users.

Steps to Set a field to Read-only using Booster for WPForms

  • Install and activate Booster for WPForms from WordPress plugin repository.

    Download "Booster for WpForms"

    Download “Booster for WpForms”

  • Now go to Forms -> Settings. Here you will get the ‘Booster’ tab in the top menu bar. Click on it to see all the features of Booster for WPForms.

    Enable Read Only

    Enable read-only setting

  • Enable the ‘Read Only fields’ checkbox.
  • Now open the form editor and go to Advanced field options of the field which you want to set as read-only.
  • Enable the ‘Read Only’ option and then save the form.

    Enable Read Only for Form Fields

    Enable read-only for form fields

  • That’s it. You form field will now be read-only in frontend. You can set as many fields to read-only as you want.

An alternate way to set field read-only using code

You can also convert a field to read only using the below code. It should be added into the functions.php file of your theme.

Now open the form editor and go to advanced settings of field. Here add the ‘wpmonks-readonly’ under CSS classes.

Add class in WpForms

Add class in form field.

From now on whenever you have to disable user input in a field then you can do it by adding ‘wpmonks-readonly’ class.

Note: If you have multiple classes under ‘CSS classes’ then make sure you add space between them else they won’t work.

If you need any assistance with this tutorial then leave a comment below and I will get back to you.