• Home
  • Cloud
    • General
    • SaaS
    • BPaaS
    • PaaS
    • IaaS
    • Other Internet Hosted Applications
      • WordPress
        • WooThemes Canvas
          • WooThemes Canvas CSS
  • About me
  • Why Badly Wired?
  • Contact

Badly Wired

Connecting WordPress via APIs, Plugins and other stuff - a technical notebook

You are here: Home / Cloud / Other Internet Hosted Applications / Wordpress / Hide a Google Form in a WordPress page until a box is ticked

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

26th January 2019 by Alan Leave a Comment

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

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>
[Next] Find out where to host WordPress [Read the full article…]

Filed Under: Wordpress  

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Applications
  • Cloud
    • General
    • Google Cloud
    • IaaS
    • Other Internet Hosted Applications
      • Wordpress
        • WooThemes Canvas
        • WooThemes Canvas CSS
    • SaaS
  • Code snippets
  • Discounts
  • Genesis
  • Google Apps for Works
  • Linux
  • News
  • SEO
  • Server setup
  • Services
  • Tech Tips
  • Uncategorised
  • Useful Images
  • Useful Stuff
  • WordPress Hosting
  • WordPress Plugins

Tags

background jobs beadcrumbs bind brandings Cache canvas Centos chrome css fail2ban Find firefox Flash fraud genesis gocardless godaddy Google google maps hackers internet explorer javascript KashFlow Linus linux Magento mapquest maps microsoft mysql news nohup php plugin plugins queens diamond jubilee replace SED SEO skype Varnish Virtualmin Webmin woothemes Wordpress

 

Affiliate and Privacy Notices

This site is free to use, but hopes to cover some costs through affiliate income, some products and links are affiliates and may earn the site advertising income.

Some affiliates use Cookies to track if you purchase from them, this allows them to apportion revenue to us you will need to refer to their specific privacy notices as to how you are tracked.

This site is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.co.uk.

  • Privacy Policy

Copyright © 2021 · Badly Wired