Bloggerでメールフォームを個別ページに作成する方法

あけましておめでとうございます。
本年もよろしくお願いいたします。

２０１７年最初の投稿は、メールフォームを個別ページに作成する方法です。

ウィジェットに、連絡フォームがありますがなんか使い勝手が悪いと感じたので、あちこち検索して作成してみました。

参考にしたページは以下の通りです。

自分のブログIDを探す。

　　探す方法は、Blogger管理ページのURL

　　　https://www.blogger.com/blogger.g?blogID=ｘｘｘｘｘ

　　ｘｘｘｘｘ部分が自分のブログIDとなります。

新しいページの追加

管理ページサイドバーのページにアクセスし、新しいページボタンを押す。
作成はHTMLモードで行います。
以下のソースを張り付けました。

　　　<!--　フォーム画面の広さを決める　-->
　　　<style type="text/css">
　　　.contact-form-name, .contact-form-email {
　　　　　　max-width: ???px; //???は自分のページの大きさに合うように設定
　　　　　　width: 100%;
　　　　　　margin-top: 3px;
　　　　　　margin-bottom: 10px;
　　　}
　　　.contact-form-email-message {
　　　　　　max-width: ???px;　//???は自分のページに合うように設定
　　　　　　width: 100%;
　　　}
　　　</style>
　　　<!--　メール送信用スクリプト　-->
　　　<script>
　　　var blogId = 'xxxxx';　//xxxxxは自分のブログ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>

動作確認

設置したページからメール送信テストを自分のアドレスで行う。
成功したら、下記メッセージが受信されます。
　　　
　　　

　　From: Blogger お問い合わせフォーム <no-reply@blogger.com>
　　Reply-To: お名前 <（メールアドレス）>
　　To: （メールアドレス）
　　Subject: [（ブログ名）] 新しいメッセージを受信しました。

　　（メッセージ）

　　よろしくお願いいたします。
　　（お名前） | （メールアドレス）

　　注: このメールは https://（サブドメイン）.blogspot.jp のお問い合わせ
　　フォームガジェットから送信されました。
　　　

　うまくCSSを編集すれば、見た目もきれいになると思います。

　以上、参考になれば幸いです。