I have a Typeform embedded into my page inside an iframe. From my JS I would like to know that user has finished the typeform (i.e. clicked Submit). The typeform JS does not seem to provide any events one can listen to. Currently I figured out only following solution -- to call periodically following test to detect that the outro page is being displayed:

document.getElementById('my-typeform-iframe').getElementsByClassName('outro').length > 0

Is there some nicer approach?

I have a Typeform embedded into my page inside an iframe. From my JS I would like to know that user has finished the typeform (i.e. clicked Submit). The typeform JS does not seem to provide any events one can listen to. Currently I figured out only following solution -- to call periodically following test to detect that the outro page is being displayed:

document.getElementById('my-typeform-iframe').getElementsByClassName('outro').length > 0

Is there some nicer approach?

• javascript
• forms
• typeform

3 Answers 3

ok, so it I was wrong in my assumptions above - it turns out the typeform iframe emits an event when user submits the form. the event is named form-submit and one can process it e.g. this way:

    window.addEventListener('message', function(event){
      if(event.data == 'form-submit')
        // your business logic here
    }, false);

Typeform now has a 'onSubmit' callback feature for that.

<script src="https://embed.typeform.com/embed.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", function() {
    var el = document.getElementById("my-embedded-typeform");
    window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
    onSubmit: function() {
      alert("submited!");
    }
  });
});

Here's the documentation

Apparently there's no easy way to retrieve the answers. As mentioned by @matthew, a response_id is passed to the callback (I guess), and you can query the API with that but you need to implement a retry loop because responses are not immediately available.

Thanks to peter answer, I checked the event they provided and get few good results. here is my findings:

  window.addEventListener('message', function(event){
  if(event.data.type == 'form-submit')
    // your business logic here
}, false);

The event data have a couple of types which is:

• form-theme
• TARP
• form-ready
• form-height-changed
• form-screen-changed
• A JSON event with no type that have the form answers
• A JSON event with the form submit information
• form-submit
• embed-auto-close-popup