Bloggerでお問い合わせページ(メールフォーム)を作る方法


 連絡フォームガジェットを個別ページに表示する方法と、CSSカスタマイズ、お問い合わせの雛形を掲載しています。コピペでOKです。

メールフォームは専用ページを設けるべき


 Bloggerには「連絡フォームガジェット」というメールフォーム機能があります。

 しかしサイドバー向けのデザインという前代未聞の仕様。使い勝手がすごく悪いです。文字は打ちづらいし、気づく人はいないし……多くのユーザーが不満を持っています。

 そもそも、メールフォームというのは専用のページにあって然るべきです。大きいと文字が打ちやすくなりますし、利用規約を書きたいですしね。

Create Separate Contact Page in Blogger - Blogger Widgets

「外部サービスを使うしかないのかな……」

 と思っていたところ、上記の記事を見つけました。海外サイトなので英語表記ですが、Google翻訳を使ってなんとか読んでいくと、「Javascriptを使えば、固定ページに連絡フォームガジェットを置けるよ」とのこと。

 さっそく設置!


 うーん、クソダサい。

 そもそも表記が崩れていますし、英語だし、何より小さすぎるという問題を解決できていません。

 これでは意味がない。ということで、今回は上記リンク先を参考にしつつ、お問い合わせページに相応しいメールフォームを作ってみました。

導入手順


 連絡フォームガジェットを削除(大事!)した後、自身のブログIDをメモしておきましょう。

 管理画面のURL「blogID=」から始まる数字がブログIDです。


<script>
var blogId = 'ブログID';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='送信中...';
var contactFormMessageSentMsg = 'メッセージを送信しました。';
var contactFormMessageNotSentMsg = 'メッセージを送信できませんでした。';
var contactFormEmptyMessageMsg ='内容がありません。';
var contactFormInvalidEmailMsg = 'メールアドレスが正しくありません。'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<br />
<center>
<form name="contact-form">
<br />
<br />
<table>
<tbody>
<tr>
<td>お名前 : </td>
</tr>
<tr>
<td><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="60" type="text" value="" /></td>
</tr>
<tr><td>メールアドレス : <em><span style="color: red;">(必須)</span></em></td>
</tr>
<tr>
<td><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="60" type="text" value="" /></td>
</tr>
<tr>
<td colspan="2">内容 : <span style="color: red;"><em>(必須)</em>
</span><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="2"><br />
<center>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="送信" /></center>
</td>
</tr>
</tbody></table>
<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</center>


 固定ページをHTMLモードにして、上記のコードを挿入してください。「ブログID」のところを、さきほどメモした数字に置き換えるのも忘れずに。

 パーマリンク設定も忘れないようにしましょう。固定ページではパーマリンク設定の項目がないので、タイトルに「contact」や「mailform」とだけ打ち込んで、一旦公開。そうするとタイトルがそのままリンクに適応されます。その後で、「お問い合わせ」や「メールフォーム」などの、ちゃんとしたタイトルにしましょう。

 これだけで完成。固定ページに連絡フォームガジェットを貼り付けられます。念のために、動作の確認をしておきましょう。

 しかし、見た目が悪すぎて使う気になれません。CSSで格好良くしましょう。

CSSでお問い合わせページに相応しいデザインにしよう



/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100%;
max-height: 100%;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 40%;
max-width: 40%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

How To Add a Contact Form on a Blogger Blog

 リンク先のCSSをカスタマイズして作りました。

 HTMLの編集にて、]]></b:skin>を検索。その上に、上記CSSを挿入しましょう。


 このような見た目だったら、お問い合わせしたくなりますね。

お問い合わせページの雛形



<h2>
メールフォーム</h2>
<br />
 メッセージは確認次第、対応させていただきます。<br />
<br />
 お問い合わせはTwitterでも受け付けています。その他の用件や、お問い合わせしたのに返信が来なかった場合などにも、ご利用ください。<br />
<br />
<fieldset>
<legend> <b><span style="color: blue;"><b>メールを送る前に</b></span></b></legend>
<br />
<div style="line-height: 1.4;">
 このページでは、以下の内容を承っております。<br />
<br />
<ul type="disc">
<li>仕事、活動などの依頼</li>
<li>当サイトのコンテンツに関する質問、連絡</li>
<li>当サイト内での問題報告</li>
</ul>
<br />
<span style="color: red;">※メッセージ内容は、当ブログ内で公開する可能性がございます。詳しくはプライバシーポリシーをご一読ください。</span><br />
<br /></div>
</fieldset>

 最低限ですが、雛形としてご利用ください。


 当ブログのキャプチャですが、大体こんな見た目になります。個別ページとしては文字数が少なすぎる(231文字)ので、各自利用規約を足す必要があります。

良いお問い合わせページを作るには


 お問い合わせページを設置する理由はふたつあります。

・サイト内の問題報告
・お仕事の依頼

 後者はよほど有名にならないと来ないと思いますが、人生何があるか分かりませんからね。専門的な活動をされている方なら是非、仕事依頼に関する規約は用意しておきましょう。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

あわせて読みたい

連絡フォームガジェットを個別ページに表示する方法と、CSSカスタマイズ、お問い合わせの雛形を掲載しています。コピペでOKです。

コメントを投稿

[disqus][facebook]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.