By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Pass information from button widget to contact form in popup.

F

fporta

New Member
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

sms-design

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

 
N

Nadlanco

New Member
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
 
N

Nadlanco

New Member
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

Wormosaugh

New Member
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
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top