Hide a Google Form in a WordPress page until a box is ticked

If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

This is an example of an embedded Google Form that is revealed only on ticking a box

If you agree to this, tick the box and a form appears : 

This is how it is done:

First get your ’embed code’  from your Google Form  ( Form – Send – <> Embed HTML )

Then create some html for the tick box and wrap the Form code in a div, set to display:none e.g.

If you agree to this, tick the box and a form appears : <input id="formtick" type="checkbox" />
<div id="formframe" style="display: none;">
  <iframe width="640" height="541" src="https://docs.google.com/forms/d/e/1FAIpQLSfhI4SNKQ6I3MBcpWazZLjAb1HNzHx2echw3v-L8EX9azncDQ/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>

And then write some jQuery to toggle the display of #formframe on ticking the checkbox, I’m using Genesis so easy to add javascript into the footer, otherwise you may need to find a javascript snippet plugin e.g. https://wordpress.org/plugins/custom-css-js/

<script>
(function( $ ) {
$('#formtick').on('change',function(e) {
    if ($(this).prop('checked')) {
        $('#formframe').css('display', 'block');
    } else {
        $('#formframe').css('display', 'none');
    };
});
})( jQuery );
</script>