Bloggerの連絡フォームをHTMLの編集なしでページに設置する方法【script編】

Bloggerではブログ運営で必須の「お問い合わせフォーム」をガジェットから簡単に追加できます。

今までサイドバーやフッターに設置していたお問い合わせフォームをscriptでページに設置する方法のメモです。

この方法は、面倒なHTMLの編集をすることなく、わずか3工程で設置できます。


この投稿は「Create Separate Contact Page in Blogger」を参考に作成しています。

この記事内では、連絡フォーム=お問い合わせフォームです。

連絡フォームをページに設置する方法

1. ガジェットを追加

レイアウトのsidebar-section(テンプレートにより異なる)の「ガジェットを追加」から、その他のガジェットをクリックし「連絡フォーム」を選択します。

3行程目が完了したら追加した「連絡フォーム」を削除して下さい。

1度でも追加したことがある人は2へ進んで下さい。
※この1工程目の必要性は要検証。
必ず一度はサイドバーに追加しないといけないのか、一度でもどこかに追加したらそれでいいのか。
そもそも追加すること自体必要ないのか。
最後に削除しているため、2工程目からスタートしても問題ないかもしれません。
当環境では既に追加したことがあったため2工程目からスタートし、問題なく動作しました。

2. 新しいページの追加


ページの「新しいページ」をクリックし、ページ設定のオプションを編集します。

設定は、構成モードを「HTMLコードを表示」、改行を「<br>タグを使用」にチェックを入れます。

元からあるページにそのまま追加することもできます。

3. scriptの追加

新しく作成したページに、下記のコードを貼り付けます。

モードは「作成」ではなく「HTML」にしてください。「HTML」に貼り付けた後「作成」にするとコードが自動で書き換えられるので注意してください。

<script>
var blogId = '自分のブログIDを入力';
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>

<form name='contact-form'>
<div>お名前:</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>メールアドレス*必須:</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>お問い合わせ内容 *必須:</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='送信する' onclick="sendEmailMsg()"/>

<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>

</form>

「自分のブログIDを入力」の部分にblogID(数字のみ)を入力します。
blogIDは、Bloggerブログ内でブラウザのURLを見ればどこでも確認できます。


blogIDとpostIDを間違えないように注意してください。

上のコードをページ本文に貼り付けるとこのようになります。

黄色い部分には「送信中」や「送信しました」などのメッセージが表示されます。表示する文言は自由に変更できます。

また、「お名前」「メールアドレス」「お問い合わせ内容」部分も自由に変更できます。

あとはいつものように「公開」したら完了です。
※サイドバーに追加した「連絡フォーム」を削除して下さい。
※必ず動作確認をして下さい。

連絡フォームのカスタマイズ

以下のカスタマイズをすると、このようになります。

当ブログのお問い合わせページです。

1. 黄色い背景を消す

「送信中」などが表示される黄色い背景を「送信する」ボタンを押すまで表示しないようにします。

上記コードの
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>

<div style='text-align: center; max-width: 450px; 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>
pからdivに書き換えます。

2. お問い合わせ内容の行数を増やす

「お問い合わせ内容」の行数を増やしたり、減らしたりする場合は、上記コード「rows='5'」の数字を変更する。入力した数字がそのまま行数になります。上記画像の行数は10です。

数字を増やしても増やさなくても入力できる文字数に違いはありません。

3. 必須の文字を赤に変更

文字の色を変更するときは、このように書き換えます。
<div>メールアドレス<span style="color: red;">*必須</span></div>

4. 文字のフォントやサイズを変える

ここでは次の内容を変更しています。
  • 入力フォームの横幅
  • 入力フォームと文言の位置調整
  • 「送信する」ボタンのフォント
下記は、テンプレートの「HTMLの編集」から追加してください。
.contact-form-name, .contact-form-email {
max-width: 300px;
width: 100%;
margin-top: 3px;
margin-bottom: 10px;
}

.contact-form-email-message {
max-width: 480px;
width: 100%;
}

.contact-form-button {
font-family:"游ゴシック","Yu Gothic","meiryo","メイリオ",Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
}

「お名前」と「メールアドレス」の幅を300px、「お問い合わせ内容」の幅を480pxに設定しています。

「送信する」ボタンのフォントを游ゴシックにし、文字の太さを普通にし、文字サイズを少し大きくしています。

テンプレートをVaster2に変えてからは、コメント欄で代用してしていましたが、無事「お問い合わせフォーム」を設置することができました。
スポンサーリンク
関連記事
スポンサーリンク