-->

blogger template parts spreadsheet viewform

blogger
メールフォームだけのために一部CGIというのも面白くない。色んな意味で。
googleの関連アプリでフォームだけ公開し、回答があれば、
スプレッドシートに追加してくれる機能があるらしい。
また通知設定をすることで、
回答があったときメールに通知が来るようになどとできる。

スプレッドシートを用いてフォームを作り、Bloggerのパーツ部分を作る。
[参照コード]に<data:post.id/>を関連付けた、
フォームに設置したアイテムの順番[entry_0]始まり。
hidden要素がないのが物足りない。上か下かどっちが誤って入力しないだろうか。

viewformの内容

https://docs.google.com/spreadsheet/viewform
?formkey=[公開キー]
&entry_6=[参照コード]

このようなCSSでページ左右に表示されるものを表現。

.post .post-contact-form div{float:left;width:49%;}
.post .post-contact-form .contact-tel span,
.post .post-contact-form .contact-form a
{display:block;width:50%;margin:0px;
text-align:center;color:#fff;font-weight:bold}
.post .post-contact-form .contact-tel span{margin-right:auto;background:#8b6}
.post .post-contact-form .contact-form a{margin-left:auto;background:#fa4}

詳細内容の表示状態によりフォームリンクの表示も制御。

<b:includable id='post-contact-form' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='post-contact-form'>
<div class='contact-tel'>
<span>電話でのお問合せ<br />0120-xxx-xxx</span>
</div>
<div class='contact-form'>
<a expr:href='"[viewformの内容]="+data:post.id' target='_blank'>
メールでのお問合せ<br />専用フォーム</a>
</div>
</div>
<hr />
</b:if>
</b:includable>

アクセスしやすいようページの上下に挿入して完成。
<b:include name='post-contact-form' data='post' />

参考文献
Going My Way: Google Docs の Spreadsheet で手軽にフォームを作成する方法
top