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 :
Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... read more ....
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>
Leave a Reply