Make Prefilled WPForms Input Field Read Only

This is one of those tricks that I figured out and forgot to make a blog post about only to be reminded by WPForms making it obsolete.

Not much use now that WPForms have added a “Read-Only” option to fields but here it is anyway.

A simple function combined with some CSS to make a field fillable only using something like pre-fill.

Simply add this to your child theme’s “functions.php” file:

/**
 * Adds shortcode (David Stockdale).
 */
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );
/**
 * Makes WPForm fields read-only.
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder.
 */
function wpf_dev_disable_field() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        // Target input, textarea, and select elements with the specified class
        $( '.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select ' ).attr({
             readonly: "readonly",
             tabindex: "-1"
        });
		$( '.wpf-disable-field, .fa-chevron-down' ).on('click', function(event) {
			event.preventDefault();
			event.stopPropagation();
		});
    });
    </script>
    <?php
}

Then add this Custom CSS which was required because the dropdown just had to be different:

/**
 * Prevents clicking on dropdown
 * Chevron Down Symbol and Date 
 * Picker Field when disabled.
 */
.wpf-disable-field .fa-chevron-down, .wpf-disable-field .wpforms-datepicker{
	pointer-events: none;
}
/**
 * Hides Chevron Down when disabled.
 */
.wpf-disable-field .fa-chevron-down {
	display:none;
}

And finally add the CSS Class “wpf-disable-field” to any field in order to make it read-only.