Home Admin

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/g5gevj2m.js/"></script>

Disable a Form Field to Prevent User Input

This snippet will render any Single Line Text or Paragraph Text field as read-only which will disable any user input.

After adding this snippet, simply add the CSS class of wpf-disable-field to any field. You can see where to add this CSS class on this screenshot: https://a.supportally.com/i/pocXYe

WPForms Team PRO

<10

Code Preview

Comments

php


	`<?php`
	`/**`
	`* Make standard 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/`
	`*`
	`* For support, please visit: https://www.facebook.com/groups/wpformsvip`
	`*/`

	`function wpf_dev_disable_field() {`
	`?>`
	`<script type="text/javascript">`

	`jQuery(function($) {`

	`$( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({`
	`readonly: "readonly",`
	`tabindex: "-1"`
	`});`

	`});`

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

/**
 * Make standard 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/
 * 
 * For support, please visit: https://www.facebook.com/groups/wpformsvip
 */
 
function wpf_dev_disable_field() {
    ?>
    <script type="text/javascript">
 
    jQuery(function($) {
 
        $( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({
             readonly: "readonly",
             tabindex: "-1"
        });
         
    });
 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

Other Snippets by Author