Pass information from button widget to contact form in popup.

[fporta]

I'm new to Elementor Pro, and I'm trying to use the button widget within my website to open a contact form in a popup and auto populate certain fields in the form. As a test, I have a button and contact form popup set up and working, but I've not been able to figure out how to set the button to pass information to the form. Can anyone make some suggestions how to accomplish this? Is there some way to do this with shortcode? Any help will be greatly appreciated!

 

[sms-design]

You need an onclick event added to your button eg: "?send me info about this subject"

Dynamic Request Parameter (Pro) | Elementor

Learn everything about Dynamic Request Parameter (Pro) in this article from Elementor's Knowledge Base. Get Elementor tips & more.

docs.elementor.com

 

[Nadlanco]

Hey,

I'm having the same difficulty finding a solution for it.

We are aware of the request parameters option with the direct links. the problem comes when we are using the button to call elementor with dynamic field. Once the pop-up is selected, there is no option nor place to add the additional parameter.

Does anyone knows about a way around it or a solution or it? (The pop up is on the same page and not being redirected to a new URL)

Thanks in advance

 

[Nadlanco]

Ok to those whos interested in a solution I found a way around to be able to pass values to pop up fields - my solution is custom made for my purposes, but you can work on it and fit it to your needs:


The solution:
1. Open the link options of the button after your popup is selected.
2. Decide which parameters you want to pass, in my case I used a custom parameter named "country" to pass the custom value of the country within it.
so the custom parameter in my case was country|myValue (country|spain)
3. Add the country field in the pop up:
a. Give the field your custom ID in the advanced section - in my case it was customCountry.
b. Set the 'Default Value' as a Request Parameter, set it to Get Option, and add your custom parameter name - In my case it was country.
4. add this custom script to your specific page you have these custom buttons on (I know I could have added more validations for the eventListener, but this is something I created fast and it does the work - It might break other things though, so try to keep it only on the relevant page if you are not planning to change it)

I used Google Tag Manager to implement this script, so I have the ability to control on which pages it will run. you can probably find other solutions too. (this is also why the script is using var instead of let and normal function instead of arrow function)

<script>
window.addEventListener("click", function(e) {
var z = e;
document.getElementById("form-field-customCountry").value = z.path[2].attributes.country.value;
});
</script>

Let me know if you have any questions about it.

 

[Wormosaugh]

Ok to those whos interested in a solution I found a way around to be able to pass values to pop up fields - my solution is custom made for my purposes, but you can work on it and fit it to your needs:


The solution:
1. Open the link options of the button after your popup is selected.
2. Decide which parameters you want to pass, in my case I used a custom parameter named "country" to pass the custom value of the country within it.
so the custom parameter in my case was country|myValue (country|spain)
3. Add the country field in the pop up:
a. Give the field your custom ID in the advanced section - in my case it was customCountry.
b. Set the 'Default Value' as a Request Parameter, set it to Get Option, and add your custom parameter name - In my case it was country.
4. add this custom script to your specific page you have these custom buttons on (I know I could have added more validations for the eventListener, but this is something I created fast and it does the work - It might break other things though, so try to keep it only on the relevant page if you are not planning to change it)

I used Google Tag Manager to implement this script, so I have the ability to control on which pages it will run. you can probably find other solutions too. (this is also why the script is using var instead of let and normal function instead of arrow function)

<script>
window.addEventListener("click", function(e) {
var z = e;
document.getElementById("form-field-customCountry").value = z.path[2].attributes.country.value;
});
</script>

Let me know if you have any questions about it.

Hi there @Nadlanco

Could you elaborate a little more on your steps, I found them a little confusing - namely the IDs you choose and where.

I have a similar use case, depending on which button a user clicks (a Request Demo CTA and a Contact CTA),a select dropdown should be auto-set to "I want a demo" (when clicked from demo CTAs) while the inverse is true for any others.

I tried applying your fix and method, but couldn't make it work. Thanks for writing it out initially, though would hope if you could elaborate a little more

 

[johannroche]

Ok to those whos interested in a solution I found a way around to be able to pass values to pop up fields - my solution is custom made for my purposes, but you can work on it and fit it to your needs:


The solution:
1. Open the link options of the button after your popup is selected.
2. Decide which parameters you want to pass, in my case I used a custom parameter named "country" to pass the custom value of the country within it.
so the custom parameter in my case was country|myValue (country|spain)
3. Add the country field in the pop up:
a. Give the field your custom ID in the advanced section - in my case it was customCountry.
b. Set the 'Default Value' as a Request Parameter, set it to Get Option, and add your custom parameter name - In my case it was country.
4. add this custom script to your specific page you have these custom buttons on (I know I could have added more validations for the eventListener, but this is something I created fast and it does the work - It might break other things though, so try to keep it only on the relevant page if you are not planning to change it)

I used Google Tag Manager to implement this script, so I have the ability to control on which pages it will run. you can probably find other solutions too. (this is also why the script is using var instead of let and normal function instead of arrow function)

<script>
window.addEventListener("click", function(e) {
var z = e;
document.getElementById("form-field-customCountry").value = z.path[2].attributes.country.value;
});
</script>

Let me know if you have any questions about it.

Works perfectly. Thanks mate