Disable Copy Paste on WordPress Forms

Sometimes, it is necessary to disable the copy-paste options for form fields. However, using an additional plugin for this simple task is not worth it when a simple code snippet can do the job. We will not only stop copy-paste but also disable right-click to prevent pasting clipboard content using that method.

I will start by working with Formidable Forms and then provide you with a code snippet that can be utilized for Gravity Forms, Ninja Forms, or any other form on your website. The code snippet is designed to function across all forms by simply adjusting the CSS selector (ID/Class).

Read moreGravity Forms disables number formatting for the calculated results

Formidable Forms utilize the form ID to enclose the form. In case of multiple forms, each form will have a unique form ID like #frm_form_1_container, with the number changing according to the form ID generated from the dashboard. To prevent copying and pasting, you can easily implement the code below.

jQuery(document).ready(function ($) {
  $("#frm_form_1_container input, #frm_form_1_container textarea").on(
    "copy paste",
    function (e) {
      e.preventDefault();
    }
  );
});

However, you may observe that it is still possible to right-click and paste content from the clipboard. Therefore, it is necessary to prevent this action to provide complete protection against copying and pasting.

Read moreNinja Forms add placeholder to the Date/Time field

We will now implement the preventDefault() function for the contextmenu event to disable the ability to right-click and paste content from the clipboard into the input field. Below is the full code for this implementation. If you want to apply changes to all forms simultaneously, you can use the frm_forms CSS class instead of frm_form_1_container. This way, you won’t need to trigger the code for each form manually.

jQuery(document).ready(function ($) {
  $("#frm_form_1_container input, #frm_form_1_container textarea").on(
    "copy paste",
    function (e) {
      e.preventDefault();
    }
  );

  $("#frm_form_1_container input, #frm_form_1_container textarea").on(
    "contextmenu",
    function (e) {
      e.preventDefault();
    }
  );
});

Gravity Forms also provide a unique ID for each form, enabling you to target specific forms. If you want to apply changes to all forms simultaneously, you can use the gform_wrapper CSS class instead of gform_1. This way, you won’t need to trigger the code for each form manually.

jQuery(document).ready(function ($) {
  $("#gform_1 input, #gform_1 textarea").on("copy paste", function (e) {
    e.preventDefault();
  });

  $("#gform_1 input, #gform_1 textarea").on("contextmenu", function (e) {
    e.preventDefault();
  });
});

Just like Gravity Forms and Formidable Forms, Ninja Forms also allows a unique CSS ID nf-form-1-cont that can be used to trigger the code. Alternatively, you can replace the nf-form-1-cont ID with the nf-form-cont class to apply this code to all forms at once.

jQuery(document).ready(function ($) {
  $("#nf-form-1-cont input, #nf-form-1-cont textarea").on(
    "copy paste",
    function (e) {
      e.preventDefault();
    }
  );

  $("#nf-form-1-cont input, #nf-form-1-cont textarea").on(
    "contextmenu",
    function (e) {
      e.preventDefault();
    }
  );
});

All your form fields are now protected from content being copied and pasted. If you encounter any difficulties with implementing the code, please leave a comment below so I can assist you in resolving the issue. You can insert this custom JavaScript code into your child theme’s JavaScript file, or utilize the “Simple Custom CSS and JS” plugin available in the WordPress plugins repository.

Final preview: