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

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

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



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

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

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

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


f:id:ausnichts:20170609224802j:plain

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


f:id:ausnichts:20170609224815j:plain

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


f:id:ausnichts:20170609224830j:plain

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


f:id:ausnichts:20170609225233j:plain

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


デスクトップの仕様

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


f:id:ausnichts:20170609220802j:plain

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


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

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