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

How To Close A Mobile Popup Menu in Elementor for a One-Page Site

If you’re making a one-page / landing page site and want to have the mobile popup menu close after clicking on a link, copy the following code: <!– Close Popup once anything within popup is clicked. –> <script> jQuery(function($){ $(document).on(‘click’,’.elementor-location-popup a’, function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }); }); </script> Now, paste

Read More »

Online Generator for Writing a Privacy Policy

Many websites need a privacy policy page. WordPress actually has a pre-built privacy policy page that users can edit. However, editing what they give you can be a little overwhelming. Furthermore, depending on your business, it may be better to use a lawyer to write up a more detailed privacy

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