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.
|
1 2 3 4 |
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/
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> (function( $ ) { $('#formtick').on('change',function(e) { if ($(this).prop('checked')) { $('#formframe').css('display', 'block'); } else { $('#formframe').css('display', 'none'); }; }); })( jQuery ); </script> |
