Elementor: How To Grab a URL Parameter for an Elementor Form in a Popup

Smart Web Creative - How To Grab a URL Parameter for an Elementor Form in a Popup

Trying to find out how to grab a URL parameter for an Elementor form in a popup? You can use the Javascript code below within an HTML widget that is on your Elementor popup:

<script type="text/javascript">
    jQuery(function($){
        //When Clicking Input Fields
        $(document).on('click','input', function(event){

            //Grab Current URL 
            var urlstr = window.location.href;
            var url = new URL(urlstr);
            //Cut URL and Get Parameter
            var hash = urlstr.split("URL_PARAMETER=");
            //Target Elementor Form Field by ID and Fill with value
            document.getElementById("form-field-field_XXXXXXX").value = hash[1];

        });

        //When Clicking Submit Button
        $(document).on('click','button', function(event){

            //Grab Current URL 
            var urlstr = window.location.href;
            //Cut URL and Get Parameter
            var url = new URL(urlstr);
            var hash = urlstr.split("URL_PARAMETER=");
            //Target Elementor Form Field by ID and Fill with value
            document.getElementById("form-field-field_XXXXXXX").value = hash[1];

        });
    });
</script>

Essentially what the Javascript code above does is it grabs the specified URL parameter and pastes that parameter into a chosen form field. This is done twice, once when input is clicked on and another when clicking on the submit button. There are a couple of things you will want to change within this code to fit your needs. Change URL_PARAMETER= to what URL parameter you want to grab. The next part is to change form-field-field_XXXXXXX to what is displayed on the front end of your code. You will have to inspect the field you want to target and look for its ID. Within the Elementor form, Elementor will always put form-field- in front of what you may call your field. For example, if we called our form field dealer_email, then Elementor will give the field an ID of form-field-dealer_email.

This method can come in quite handy if you are trying to send the form to a dynamic email address. As a result, it will make your website more powerful. Now you know how to grab a URL parameter for an Elementor form in a popup.

Other Helpful Articles

Disable Product Pages in WooCommerce

Add the following code to your functions.php file to disable users from accessing product pages within WooCommerce: /* Remove Links to Access Product Pages */ remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 ); remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 ); /* Prevent Users from Accessing Product Pages by Displaying the 404 Page */ function prevent_access_to_product_page(){

Read More »

Tips For Setting Up An E-Commerce Store

Need some tips for setting up an e-Commerce store? Having an online shop, such as an e-Commerce store, can be both exciting and overwhelming. However, if you market it right, you can make a good income off of it. When web design companies build e-Commerce sites for their clients, there’s

Read More »

What Do You Need Done?:

(Please check all that apply)

Tell Us About You

Almost Done!

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info