最近搜索
没有最近搜索
Capture contact-form user input from parent window with JavaScript
已回答
已于 2021年7月30日 发布
I have the Zendesk iframe widget on my WordPress site. I need to somehow capture the user input in the parent window. I know we cannot use querySelector() for this because the form is in an iframe. But, is there a method in the zE library that can deliver this functionality?
Ultimately, I would like to console.log the name and email user input on submit. So, I will also need an event listener on the submit button. Ideally I would be able to do something like the following:
zE('webWidget:on', ‘submit’, function() {
console.log(zE.contact_form.input0.value);
});
Is there an alternative solution to capturing the form data in the parent frame?
Thanks in advance!
0
1
1 条评论
Austin Killey
Really really good questions here, Gretrix:
For the event listener itself, absolutely possible: This would be the perfect opportunity to set up an on userEvent callback when the form is submitted. Using the example Javascript in this other workflow walkthrough as a jumping point, your JS callback would look for a condition like this instead:
For retrieving and storing the visitor's form data though, that's going to be the tricky part. You called it: CORS and iframe usage will prevent interacting with the widget from your site's JS code, but: Since these contact forms are being submitted to your Zendesk account as tickets, we could get crafty by having your own site or back-end service of yours retrieve the submitted form data via API.
These API requests would most likely need to be requested via server-side, as you might run into more CORS errors when doing so via client-side. With basic API authentication being used to authorize the requests, your back-end service or site could pull that newly created Zendesk ticket data from a GET request payload and store it where needed.
If you're not familiar with our API, our quick start walkthrough here also discusses the use of our API via Javascript, worth a look!
0
帖子评论已关闭。