HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
Bloggerで簡単に目次をつける方法
Bloggerでお問い合わせフォームのページを作る方法
新ブログはこちらから

【6/28更新しました】Bloggerでお問い合わせフォームのページを作る方法

2019/10/26

カスタマイズ


【重要なお知らせ】2020/6/28更新

只今、Bloggerの「連絡フォーム」に不具合が発生しているようです。
独自ドメイン以外では、メッセージが正しく送信されないことを確認致しました。
独自ドメイン以外の方は、こちらのお問い合わせフォームではなく、Googleフォーム等に変更されることをお勧めいたします。

↓こちらのブログで詳しく紹介されています。


Bloggerでは、「連絡フォーム」のガジェットを使って、サイドバーなどにお問い合わせ(連絡)フォームを置くことができます。

↓こんな感じです。
サイドバーに連絡フォームガジェットを置いた場合
サイドバーにお問い合わせフォームを設置した場合

しかし、常にお問い合わせ(連絡)フォームが見えているのは、なんだかちょっと変な気がします。。。

そこで、サイドバーに置いていたお問い合わせ(連絡)フォームを、ページに設置することにしました。

ここでいうページとは、日付に関係なく設置できる固定ページのことです。

ブログの記事とは別に、お問い合わせフォームやプライバシーポリシーなどをページに設置すると便利です。

こちらを参考にさせていただきました。



新しいページを作成する

Bloggerの管理画面から、「ページ」→「新しいページを作成」をクリックします。

「ページ」→「新しいページを作成」をクリックします
「ページ」→「新しいページを作成」をクリックします。
ページタイトルに「お問い合わせフォーム」と入力。
(「連絡フォーム」でも「お問い合わせ」でも「contact」でもOKです。)

左上の「HTML」をクリックして、HTML編集モードに切り替えます。

ここにコードを貼りつけ
必ずHTMLモードにしてください。
HTML編集モードにしたら、次のコードをコピーして、貼り付けます。
<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="送信" />
  </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'] = '自分のブログIDを入力';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d自分のブログIDを入力','//ブログのサブドメインを入力.blogspot.com/','自分のブログIDを入力');    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '送信しています...', 'contactFormMessageSentMsg': 'メッセージを送信しました', 'contactFormMessageNotSentMsg': 'メッセージを送信できませんでした', 'contactFormInvalidEmailMsg': 'メールアドレスを正しく入力してください', 'contactFormEmptyMessageMsg': 'メッセージを入力してください', 'title': 'Contact Form', 'blogId': '自分のブログIDを入力, '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>

*赤字の「自分のブログIDを入力」の所(4か所)は、必ず自分のブログIDに変えてください
ブログIDはBloggerの編集画面の上の方を見ると、アドレスバーに書いてあります。


ブログID

「blogID=」の後の数字がブログIDです。(数字のみ)

*青字の「ブログのサブドメインを入力」の所は、ご自分のブログのサブドメイン(「moca-simple.blogspot.com」の青字部分)を入力してください。
(独自ドメインを取得している場合も、取得前のアドレス「~.blogspot.com」のサブドメインを入力します。)

入力が終わったら、右上の「公開」をクリック。これで、お問い合わせフォームのページできました。

お問い合わせ


自分で入力・送信して、ちゃんと機能するかどうか確認してみてくださいね。

ページにアクセスできるようにする


今作成したページをブログのナビゲーションバーに追加して、お問い合わせフォームにすぐアクセスできるようにします。
Bloggerの管理画面から、レイアウト→「ページ」ガジェットを編集します。

Bloggeの管理画面
「編集」をクリックします。
「お問い合わせフォーム」の項目ができているので、クリックでチェックを入れて下の方にある「保存」をクリックします。

「お問い合わせフォーム」にチェックを入れて保存します
「お問い合わせフォーム」にチェックを入れて、保存します。

これで、ナビゲーションバーにお問い合わせフォームが追加されました。ブログを確認してみます。

お問い合わせフォーム

これで、お問い合わせフォームのページをつくる作業は完了です。

おつかれさまでした*


こちらもおすすめ♪


 →ホームへ戻る