IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / はてなブログに Google Form を iframe で埋め込む

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

2017/06/12 CSS, javascript, はてなプラグイン, はてなブログ

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

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

  • iPhone で iframe を fixed にする場合の問題
  • iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない

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

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

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

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

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

HTMLコード

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

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

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

Javascript

次の 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);
}

Javascript 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>

CSS

カスタマイズ > デザイン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; } }

呼び出し

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

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

以上です。

はてなブログにお問い合わせフォーム実装
はてなブログ機能追加/記事下に「関連記事」を表示します
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com