How to create a disabled form field

It took me a while to find an answer to this, so I thought I’d share it here for anyone else having the same problem.

I wanted to create a disabled form field with Contact Form 7, because it will be pre-filled with the user’s name if logged in (to the website, not WordPress). The pre-fill functionality is achieved by adding a filter hook function to my theme’s functions.php file.

Anyway, to disable the field, I first tried the solution proposed here. That looked right, but the form would no longer submit. It turns out that a disabled field will not return as validated, in fact it will not return any value, and won’t be sent with the form anyway.

The solution is to use the readonly property instead, which is probably what you wanted to achieve in the first place ??

This is the steps I’ve taken to create a readonly field that will be sent with the form data:

1. Add a custom class (i.e. “class:readonly”) to the field when creating it in Contact Form 7 admin.
2. Set the actual attribute using JavaScript, preferably in a script loaded with wp_enqueue_script() on the page that contains the field. The previously set class will be used to fetch the fields that should have the readonly attribute:

   jQuery(document).ready(function ($) {
   	$('.wpcf7-form .readonly').prop('readonly', true);
   });</li>

Note that jQuery has to be loaded, most easily by having it as a dependency when calling wp_enqueue_script()

Hope that helps anyone!

https://www.ads-software.com/extend/plugins/contact-form-7/