Answered

onSubmit function for multiple typeform on one page

  • 20 December 2021
  • 2 replies
  • 64 views

0

 

I am embedding 2 typeform on my webpage. When I submit 1st typefrom onSubmit function get executed, but onSubmit function of 2nd typeform get called automatically even I submitted the 1st typeform.

<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div>
<div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div>

<script src="https://embed.typeform.com/embed.js" type="text/javascript"</script>
window.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("my-embedded-typeform1");
var el2 = document.getElementById("my-embedded-typeform2");
window.typeformEmbed.makeWidget(el1, "https://admin.typeform.com/to/cVa5IG", {
hideFooter: true,
onSubmit: () => { alert('Typeform 1 submitted') }
});
window.typeformEmbed.makeWidget(el2, "https://admin.typeform.com/to/cVa5IG", {
hideFooter: true,
onSubmit: () => { alert('Typeform 2 submitted') }
});
});
icon

Best answer by mathio 20 December 2021, 09:53

View original

2 replies

Userlevel 7
Badge +5

Hello @wellinston37247 

you have a JavaScript error in your code:

Uncaught ReferenceError: el1 is not defined

Also the <script> tag is missing bracket >.

 

Also, you are using old version of embed library. While this library is still available, we no longer provide support for it. I suggest you use latest embed library - version 1.

Here is your code rewritten for new library:

<div id="my-embedded-typeform1" style="width: 100%; height: 300px;"></div>
<div id="my-embedded-typeform2" style="width: 100%; height: 300px;"></div>

<script src="//embed.typeform.com/next/embed.js" type="text/javascript"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("my-embedded-typeform1");
var el2 = document.getElementById("my-embedded-typeform2");

window.tf.createWidget('cVa5IG', {
container: el,
hideFooter: true,
onSubmit: () => { alert('Typeform 1 submitted') }
});


window.tf.createWidget('cVa5IG', {
container: el2,
hideFooter: true,
onSubmit: () => { alert('Typeform 2 submitted') }
});
});
</script>

I tested the code above and it works as expected.

Userlevel 7
Badge +5

Hi @wellinston37247 Were you able to use @mathio ‘s suggestion to fix the issue? :grinning:

Reply