Bloggerで連絡フォームを個別ページのみに設置する

Bloggerの連絡フォーム

Bloggerではウィジェットとして連絡フォームが用意されています。問い合わせ用の個別ページにのみに連絡フォームを設置したい場合は、Bloggerの独自タグを使って通常ページのときは表示させなくするといった方法がありますが、テンプレートをいじるのは少し手間がかかります。

そこで私はこちらのサイトで紹介されていた、個別ページのHTML編集画面に貼り付けるだけで連絡フォームとして機能するスクリプトを使用していました。
しかし、2018年7月頃にBloggerのコメントのメール通知に関する仕様が変更になったようで、今まで連絡フォームウィジェットの代替として使っていたスクリプトが使えなくなってしまいました。

代わりとなるコードを探したところ、現在でも連絡フォームウィジェットの代替として機能する、もうひとつのスクリプトがありました！それはこちらのサイトで紹介されています。

WikiShare

https://www.wikishare.in/2018/11/blogger-contact-form-widget-not-working.html

Blogger Contact Form widget not working, not responding? One tested solution here...

A blog about education, lifestyle, technology, etc. It tries to share rich and targeted information, reviews, opinions and solutions on daily stuffs.

以下は、このコードを参考に、CSSで問い合わせフォームの体裁を整えたサンプルコードです。以下のコードの数箇所をご自分のブログ用に書き換えるだけで、個別ページの問い合わせフォームとして機能するはずです。

個別ページの連絡フォーム用のサンプルコード

以下のコードをBloggerのページ作成画面 (HTML編集画面) に貼り付けると以下のような連絡フォームが作成できます。CSSなどは適宜変更ください。

以下のコード内でブログの識別番号と書かれている４箇所はご自身のブログIDに、ブログのサブドメインと書かれている１箇所はご自身のブログのサブドメイン (例 http://cottpic.blogspot.com というアドレスならば cottpic の部分) に書き換えてください (独自ドメインで運営されている方は、独自ドメイン適用前のblogspotのサブドメインを入力してください)。

ブログIDの確認方法

1. 連絡フォームを設置したいブログのBloggerの管理画面を開きます。
2. ブラウザのアドレスバーに表示されているIDを確認します (例 https://www.blogger.com/blogger.g?blogID=1234567890123456789#allposts というアドレスならば 1234567890123456789 部分がそのブログのIDです)。

<div class="widget ContactForm" id="ContactForm22" style="display:block;">  
 <div class="contact-form-widget">  
 <div class="form"><form name="contact-form">

<span class="mf-label">お名前</span> 
 <div class="contactf-name">
 <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" type="text" value="" />  
 </div>
 
<span class="mf-label">メールアドレス</span>  
 <div class="contactf-email">  
 <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail&quot;;}" onfocus="if (this.value == &quot;E-mail&quot;) {this.value = &quot;&quot;;}" type="text" value="" />  
 </div>

<span class="mf-label">お問い合わせ内容</span>
<div class="contactf-message">  
 <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="Message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Message&quot;;}" onfocus="if (this.value == &quot;Message&quot;) {this.value = &quot;&quot;;}" value=""></textarea></div>

 <div class="cbluebutton">  
 <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />  
 </div>  
 <div style="clear: both;"></div>  
 <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>  
 </form>  
 </div>  
 </div>  
 </div>  
 <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>   
 <script type="text/javascript">  
 //<![CDATA[  
 if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null)  
  { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'ブログの識別番号';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dブログの識別番号','//ブログのサブドメイン.blogspot.com/','ブログの識別番号');  
 _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '送信しています...', 'contactFormMessageSentMsg': 'メッセージを送信しました', 'contactFormMessageNotSentMsg': 'メッセージを送信できませんでした', 'contactFormInvalidEmailMsg': 'メールアドレスを正しく入力してください', 'contactFormEmptyMessageMsg': 'メッセージを入力してください', 'title': 'Contact Form', 'blogId': 'ブログの識別番号', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));  
 //]]>  
 </script>  


<style>
#ContactForm22 input,#ContactForm22 textarea{border:none !important;}
#ContactForm22 .contactf-email,#ContactForm22 .contact-form-email-message,#ContactForm22 .contactf-name{border:none !important;border: 1px solid #ced4da !important;border-radius: .25rem;}

#ContactForm22 .contact-form-email-message{min-height:13rem; font-size:15px !important; padding:12px; box-shadow: none !important;}
#ContactForm22 .contact-form-widget{max-width:100% !important; width:100% !important;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:100% !important;min-width:99.999% !important;}
#ContactForm22 .cbluebutton{margin-top:1rem;margin-bottom:1rem;}
#ContactForm22 input{padding-right:12px;padding-left:12px;}
#ContactForm22 textarea,#ContactForm22 input{margin:0 !important;}
.mf-label{font-size:16px; font-weight:600; margin:1rem 0 0 0;display:block;}
.contact-form-cross{display:none;}
</style>

メッセージを受信するメールアドレスの設定

連絡フォームからのメッセージを受信するメールアドレスの設定は、GoogleプラスとBloggerを紐付けていない場合はhttps://www.blogger.com/edit-profile.gのユーザー情報という項目にあるメールアドレス (読者があなたへの連絡に使用するメールアドレス。) の部分から行えます。

November 11, 2018