2017年1月1日日曜日

Bloggerでメールフォームを個別ページに作成する方法 | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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

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

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

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

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


自分のブログIDを探す。


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

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

  xxxxx部分が自分のブログ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を編集すれば、見た目もきれいになると思います。

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


  • このエントリーをはてなブックマークに追加
  • list


ブログランキング・にほんブログ村へ

0 件のコメント:

コメントを投稿

Ads by A8.net