Elementor: Disabling a Form Field

April 5, 2022

Let’s say you have a form field where you have dynamic data being brought in and you don’t want users to edit that data. You could always make that a hidden field within the Elementor Form widget. However, if you want it to be shown to the user, you can add some JavaScript code to disable that form field. Below is the code for disabling a form field in Elementor:


<script>
document.getElementById("FIELD_ID").disabled = true;
</script>

Please note, that you will have to copy over the field ID into the JS code from your Elementor Form. Also, put “form-field-” before the actual ID. For example, if the ID of your field was “product-item“, then you would put “form-field-product-item” for the FIELD_ID in the JS code.

Other Helpful Articles

WooCommerce: Add a Custom Notice Below the Order Review on the Checkout Page

If you need to add a custom notice below the order review on the checkout page of your WooCommerce site, add the following code to your functions.php file. Be sure to change the styling and text: /* Add Notice Below Order Review on Checkout Page */ add_action( ‘woocommerce_checkout_order_review’, ‘custom_order_notice_checkout’, 15

June 30, 2021

Smart Web Creative - Knowledge Base Article - How To Flush DNS Cache Locally

How To Flush DNS Cache Locally

Troubleshooting website issues can be challenging, especially when you’re unsure where to begin. One common issue is a corrupt local DNS cache, which can prevent your computer from reaching specific websites or servers. In this guide, Smart Web Creative will show you how to clear or flush DNS cache locally

August 5, 2024

Elementor: Disabling a Form Field

Let’s say you have a form field where you have dynamic data being brought in and you don’t want users to edit that data. You could always make that a hidden field within the Elementor Form widget. However, if you want it to be shown to the user, you can

April 5, 2022