How to disable submission for embedded forms

Hi @MusementTeam Happy Friday Jr.! We don’t have this feature natively, so you would need to create your own code. @mathio might have some suggestions for you. 

There is an example by @picsoung about hiding an embedded typeform (via cookie) after it was submitted: https://glitch.com/~tf-embed-cookies Hope this helps.

Hi @mathio thanks a lot for the hint, I assume we should rework a bit what done by @picsoung as we want display the form until the user didn’t submit it or even better having once again after a timeframe.

What do you think?

There is this part that sets the cookie in onSubmit callback. It sets the cookie for 265 days, then the form can be displayed again:

      onSubmit: (event) => { //setup the cookie when form is submitted
        console.log(event.response_id)
        setCookie("displayed_typeform", true, 365);
      },

The part you want to modify is this one:

if (displayed){
  wrapperElement.innerHTML="<h2>Typeform already displayed once.</h2>"
} else if(!displayed && displayed === "") {
  setCookie("displayed_typeform", true, 365);  // REMOVE THIS LINE
  showEmbed();
}

You want to remove the line indicated above. That way you will only set the cookie on submit and your embedded typeform will display on each page visit until it was submitted.

Thanks a lot @mathio ! We’ll try that way as soon as possible!

@mathio @Liz YES! YES! YES! Thank you! 

Hi @mathio. Well, sort of. Here is what is happening: 

When Code A is used, the embed appears properly proportioned to the page but the cookie function to hide after submit does NOT work. 

When Code B is used, the embed appears as a very small in the upper left hand corner and the cookie function to hide after submit DOES work. 

The only difference is in the first set of instructions (bolded below): 

<div class="target-dom-node" data-tf-widget="gcw9uZCy" data-tf-opacity="100" style="width:100%;height:725px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

So I am not sure what to do. When I test with Code A, the cookie does not appear to get cached; when I use Code B, it does. 

Thoughts? 

***

Code A 

<div class="target-dom-node" data-tf-widget="gcw9uZCy" data-tf-opacity="100" style="width:100%;height:725px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

<script>
const wrapperElement = document.querySelector('.target-dom-node') // NOTE: `.target-dom-node` is the target DOM element from your website or web app

var displayed = getCookie("displayed_typeform"); //
if (displayed){
  wrapperElement.innerHTML="<h2>You have already completed this survey.Thank you for your participation.</h2>"
} else if(!displayed && displayed === "") {

  showEmbed();
}

function showEmbed(){ // call this function to display the embed typeform
  window.tf.createWidget('gcw9uZCy', 
    {
      hideHeaders: true,
container:wrapperElement,
      hideFooter: true,
onSubmit: (event) => { //setup the cookie when form is submitted
        console.log(event.response_id)
        setCookie("displayed_typeform", true, 365);
    },
},
  )
}

// Cookie manipulation
// From https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) { 
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
</script>

Code B

<div class="target-dom-node" data-tf-widget="gcw9uZCy" data-tf-opacity="100" style="width:100%;height:725px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

<script>
const wrapperElement = document.querySelector('.target-dom-node') // NOTE: `.target-dom-node` is the target DOM element from your website or web app

var displayed = getCookie("displayed_typeform"); //
if (displayed){
  wrapperElement.innerHTML="<h2>You have already completed this survey.Thank you for your participation.</h2>"
} else if(!displayed && displayed === "") {

  showEmbed();
}

function showEmbed(){ // call this function to display the embed typeform
  window.tf.createWidget('gcw9uZCy', 
    {
      hideHeaders: true,
container:wrapperElement,
      hideFooter: true,
onSubmit: (event) => { //setup the cookie when form is submitted
        console.log(event.response_id)
        setCookie("displayed_typeform", true, 365);
    },
},
  )
}

// Cookie manipulation
// From https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) { 
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
</script>

@mathio Also note, I tested by adding and subtracting each instruction in various combinations; if either instruction appears, it breaks. 

I am sorry but both your codes A and B are the same.

I am tried the example in the Glitch linked above and it works. I think @picsoung might have done some updates recently.

However you are mixing 2 approaches - you are embedding via HTML API (data-tf-widget="gcw9uZCy") and also via JS API (window.tf.createWidget). Your target DIV element should look like this, without any data-tf- attributes:

<div class="target-dom-node" style="width:100%;height:725px;"></div>

To fix the iframe size and style, you need to link to CSS manually when you are using JS API:

<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />

After those 2 changes 2 your code it works: https://glitch.com/edit/#!/sandy-nine-kilogram?path=index.html%3A1%3A0

Please note you need to reload the page after typeform is submitted in order to hide it. This is intentional. If you want to hide it right away you can add your logic to onSubmit callback to hide or remove the div.target-dom-node.

      onSubmit: (event) => { //setup the cookie when form is submitted
        console.log(event.response_id)
        setCookie("displayed_typeform", true, 365);
      },

if (displayed){
  wrapperElement.innerHTML="<h2>Typeform already displayed once.</h2>"
} else if(!displayed && displayed === "") {
  setCookie("displayed_typeform", true, 365);  // REMOVE THIS LINE
  showEmbed();
}

So I was wondering if there was a way to pop this into shopify so that there’s no text displayed either. Rather than on submit, it just closes the typeform and won’t display again? Is that possible?

Also, where should I pop this code? 😅

Hello @carlygrace 

If you do not want to display the form at all, you can remove the wrapper element. Replace the line that starts with  wrapperElement.innerHTML with code like this:

wrapperElement.remove()

This will completely remove the wrapper HTML element and your form will not be displayed nor any other content in its place.

You will need to add the JavaScript code to your Shopify page. I have no experience with that platform, but you can find some help in Shopify Community.

Thank you! 

Hi there!

I implemented the Cookie-Checker via iFrame embedded like descripted above.

I have one question about customization - i would like to change the trigger event from onSubmit to onStart (or equal) - the user should only OPEN the Typeform ones, regardless of whether he submitted the form or not.

i have to change this part

onSubmit: (event) => { //setup the cookie when form is submitted
        console.log(event.response_id)
        setCookie("displayed_typeform", true, 365);
      },

to something other - right? May I ask the Community for some help please? 

The Cookie should be set when the typeform is loaded.

Thanks in advance!

onSubmit: (event) => { //setup the cookie when form is submitted
        console.log(event.response_id)
        setCookie("displayed_typeform", true, 365);
      },

sorry was not able to delete - the solution is “onStarted” event instead - if something is trying the same ;)