Ricerche recenti

Nessuna ricerca recente

Capture contact-form user input from parent window with JavaScript

Con risposta
image avatar

Gretrix

Data ultimo post: 30 lug 2021

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 commento

      image avatar

      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:

      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! 

      0

      Il post è chiuso ai commenti.

      Non hai trovato quello che cerchi?

      Nuovo post