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

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

やっと当サイトにお問い合わせフォームを実装できました。

ここに至る前記事2つです。

モバイル、タブレットの仕様

前記事にありますように、iPhone での iframe の挙動に苦労しました。

結局、次の仕様にしました。

カスタマイズ > フッタ に <div id="ifm-wrapper"></div> を書いておき、javascript で iframe を挿入する方法を取りました。

ボトムのリンクをクリックします。

最初にデバイスの height を取得しスペースを確保し、ローディングイメージを出します。

iframe 内の Google Form 読み込み完了で iframe をフェードインさせます。フォームが右にはみ出しているのは、前記事1にあるように reCAPTCH のせいです。iPhone でも 6 であればはみ出さないはずです。

フォーム送信後、クローズアイコンをクリックしますと iframe を削除します。

デスクトップの仕様

デスクトップでは、position:fixed を使っています。

フォーム表示中は、body に overflow:hidden を指定し、背景のコンテンツがスクロールしないようにしています。

もともとリンクでいいんじゃないのという程度のものですが、それでも完成するとうれしいものです。

次回、汎用性のあるものを公開したいと思います。