Capture contact-form user input from parent window with JavaScript | Community
Skip to main content

Capture contact-form user input from parent window with JavaScript

  • July 30, 2021
  • 1 reply
  • 0 views
G

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!

    This topic has been closed for replies.

    1 reply

    A
    • Austin22
    • August 10, 2021

    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:

    if (event.action === "Contact Form Submitted")


    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! 

    Terms & ConditionsCookie settingsAccessibility statement