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. 

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?

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

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>

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.

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.