はてなブログに Google Form を iframe で埋め込む

2017.06.12 CSS, javascript, はてなプラグイン, はてなブログ

当サイトの「お問い合わせフォーム」の実装方法です。

次の記事も参考にしてください。

仕様は次の記事を参考にしてください。

はてなブログにお問い合わせフォーム実装

Google Form の作り方は次の記事をご覧ください。

はてなブログにお問い合わせフォーム Google Forms

HTMLコード
Javascript
Javascript Minify 版
CSS
呼び出し

01HTMLコード

カスタマイズ > フッタ に次のコードを書き込みます。

<div id="ifm-wrapper" style="display: none;">
<img class="loading" src="ローディング画像URL" />
</div>

ローディング画像は、のようなGIF画像です。ネット上にジェネレーターがいっぱい公開されていますので、背景色を CSS で指定する背景色と同一にして作成します。

02Javascript

次の Javascript を同じように フッタ に入れます。

<script>
/* 指定位置にスムーススクロール
   他に同様のものを入れていればいらない */
function smoothScroll(targetY) {
    var startY = window.pageYOffset;
    var f = ( targetY > startY ) ? true : false; // 'down' = true : 'up' = false
    setTimeout(function(){
        if( f && (startY <= targetY)){
            startY = startY + (targetY - startY) / 20 + 1;
            window.scrollTo(0, startY);
            setTimeout(arguments.callee, 10);
        } else if ( !f && startY >= targetY){
            startY = startY - (startY - targetY) / 20 - 1;
            window.scrollTo(0, startY);
            setTimeout(arguments.callee, 10);
        }else{
            window.scrollTo(0, targetY);
        }
    }, 10);
}


/* フォーム表示関数 */
function showGForm(){
    var w = window.innerWidth,
        h = window.innerHeight,
        elmAnchor = document.createElement('a'),
        elmIframe = document.createElement('iframe'),
        wrapper = document.getElementById('ifm-wrapper');


    // div#ifm-wrapperをデバイスの高さで表示する
    wrapper.style.height = h + 'px';
    wrapper.style.display = 'block';


    // div#ifm-wrapperの座標を求めスムーススクロール
    var y = wrapper.getBoundingClientRect().top + window.pageYOffset;
    smoothScroll(y);


    elmAnchor.setAttribute('href', 'javascript:hideGForm();');
    elmAnchor.classList.add('hide-gform');
    wrapper.appendChild(elmAnchor);
    
    elmIframe.setAttribute('src', 'フォームのURL'); // Google Form の iframe の src から取り出す
    elmIframe.setAttribute('width', w);
    elmIframe.setAttribute('height', h);
    elmIframe.setAttribute('frameborder', '0');
    elmIframe.setAttribute('marginheight', '0');
    elmIframe.setAttribute('marginwidth', '0');
    elmIframe.id = 'gform';
    
    wrapper.appendChild(elmIframe);


    // iframe 読み込み完了を待ち、body に class を加える
    var gform = document.getElementById('gform');
    gform.onload = function(){
        document.body.classList.add('gform');
    };
}


/* クロースボタンから呼ばれる関数 */
function hideGForm() {
    document.body.classList.remove('gform');
    // iframe を1秒で FO しているので、1秒後に iframe とクロースボタンを消去する
    var wrapper = document.getElementById('ifm-wrapper');
    setTimeout(function(){
        while (wrapper.children.length > 1) wrapper.removeChild(wrapper.lastChild);
        wrapper.style.height = 0;
        wrapper.style.display = 'none';
    }, 1000);
}

03Javascript Minify 版

javascript の圧縮版です。

次のファイルの「フォームのURL」部分を自分のフォームの URL と差し替えてください。

<script>
function smoothScroll(e){var t=window.pageYOffset,o=e>t;setTimeout(function(){o&&e>=t?(t=t+(e-t)/20+1,window.scrollTo(0,t),setTimeout(arguments.callee,10)):!o&&t>=e?(t=t-(t-e)/20-1,window.scrollTo(0,t),setTimeout(arguments.callee,10)):window.scrollTo(0,e)},10)}function showGForm(){var e=window.innerWidth,t=window.innerHeight,o=document.createElement("a"),i=document.createElement("iframe"),n=document.getElementById("ifm-wrapper");n.style.height=t+"px",n.style.display="block";var r=n.getBoundingClientRect().top+window.pageYOffset;smoothScroll(r),o.setAttribute("href","javascript:hideGForm();"),o.classList.add("hide-gform"),n.appendChild(o),i.setAttribute("src","フォームのURL"),i.setAttribute("width",e),i.setAttribute("height",t),i.setAttribute("frameborder","0"),i.setAttribute("marginheight","0"),i.setAttribute("marginwidth","0"),i.id="gform",n.appendChild(i);var d=document.getElementById("gform");d.onload=function(){document.body.classList.add("gform")}}function hideGForm(){document.body.classList.remove("gform");var e=document.getElementById("ifm-wrapper");setTimeout(function(){for(;e.children.length>1;)e.removeChild(e.lastChild);e.style.height=0,e.style.display="none"},1e3)}
</script>

04CSS

カスタマイズ > デザインCSS に次の CSS を入れます。

#ifm-wrapper {
  position: relative;
  z-index: 0;
  /* ローディング画像の背景と合わせる */
  background: #182022; }
  #ifm-wrapper iframe {
    opacity: 0;
    transition: all 1s; }
  #ifm-wrapper .hide-gform {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    text-align: right;
    color: #fff;
    text-decoration: none;
    transition: all 1s;
    opacity: 0;
    z-index: 1; }
    #ifm-wrapper .hide-gform::before {
      content: "\f025";
      font-family: blogicon;
      font-size: 5rem;
      color: #fff; }


.loading {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: calc(100vh / 3);
  z-index: -1; }


.gform #ifm-wrapper iframe {
  height: 100%;
  opacity: 1; }
.gform #ifm-wrapper .hide-gform {
  opacity: 1; }


@media only screen and (min-width: 992px) {
  #ifm-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-right: 0; }
    #ifm-wrapper .hide-gform {
      text-align: center;
      left: 700px;
      right: 0;
      top: 80px; }


  body.gform {
    overflow: hidden; } }

05呼び出し

<a class="hatena" href="javascript:void(0);" onclick="showGForm();return false;"><i class="blogicon-mail lg"></i>お問い合わせフォーム</a>

などとフォーム表示関数を呼び出します。

以上です。