[Blogger] 連絡フォームを個別のページで作成する方法

以前、連絡フォームガジェットのデザイン編集方法を解説しました。

しかし、ブログによってはガジェットではなく個別ページで連絡フォームを作成したい場合もあるかと思います。

当ブログではガジェットを採用していますが、別ブログのバラを咲かせることが好きでは個別ページを採用しています。

本記事では、この連絡フォームを個別ページで作成する方法を解説します！

連絡フォームガジェットを追加する

連絡フォームガジェットを表示させ、それをCSSで非表示にするという手順を踏まなくてはいけません。

正常に動作させるために必要な手順になります。

先ずは、連絡フォームガジェットを表示させます。

既に表示させている場合は次項に進んで下さい。

左のメインメニューから【レイアウト】を選択し、サイドバーなどの【ガジェットを追加】を選択します。

そこから【連絡フォーム】を選択し、連絡フォームガジェットを表示させます。

次項で非表示にするので、位置はどこでも大丈夫です。

CSSの追加で連絡フォームガジェットを非表示にする

CSSの追加で、連絡フォームガジェットを見た目上非表示にします。

CSSの追加方法

左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。

【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。

追加CSSコード

以下のCSSを入力してください。

/*連絡フォームガジェット消去*/

div#ContactForm1 {

display: none !important;

}

これで、見た目上は非表示になります。

個別ページの作成

連絡フォーム用の個別ページを作成します。

個別ページの作成方法が分からない場合、以下の記事でご確認ください。

個別ページ（固定ページ）の作成方法

個別ページの作成方法の他、ページのURL変更方法やページの設置方法についても解説しています。

連絡フォームの個別ページ作成方法

個別ページで任意のタイトルを入力し、必要に応じて説明文を入れてください。

それからタイトル下のメニュー左の【HTMLビュー】を選択します。

【HTMLビュー】の状態で、次のコードを貼り付けます。

HTMLコードとCSSコードの２つを貼り付ける形です。

HTMLコード

連絡フォームの大元になるコードです。

<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>  

この下に、次のCSSコードを貼り付けてください。

CSSコード

連絡フォームのデザインになります。

連絡フォームガジェットのデザイン編集方法のやり方で既にデザインを変更している場合は、改めてデザインを指定する必要はありません。

必要に応じて以下のどちらかのコードを貼り付けてください。

デザイン指定ありのCSSコード

コメントアウトで説明を加えているので、それを参考に色などを変更して使ってください。

<style>
.mf-label{
font-size:16px; /*タイトル文字サイズ*/
  font-weight:bold;  /*タイトル文字太*/
margin:1.5rem 0 0 0; /*タイトル文字位置*/
  display:block;
}
.contact-form-widget{
max-width:100%; /*入力欄幅*/
}
.contact-form-email,
.contact-form-email-message,
.contact-form-name {
min-width:100%; /*入力欄幅*/
border: 1px solid #ced4da; /*入力欄枠*/
border-radius: 2px; /*入力欄丸角*/
font-size:15px; /*入力文字サイズ*/
}
.contact-form-email-message {
min-height: 150px; /*メッセージ欄高さ*/
}
.contact-form-button-submit {
border-radius : 20px; /*送信ボタン丸角*/
line-height: .2; /*送信ボタン文字位置*/
padding: 1.5em 3em; /*送信ボタン大きさ*/
border: none; /*送信ボタン枠色*/
background:#F4C7C3; /*送信ボタン色*/
font-size: 13px; /*送信ボタン文字大きさ*/
}
.contact-form-button-submit:hover {
border: none; /*送信ボタン枠色*/
transform: scale(1.1); /*送信ボタンホバー拡大*/
background:#E67C73; /*送信ボタンホバー色*/
}
.cbluebutton{
margin-top:1.5rem; /*送信ボタン位置*/
margin-bottom:1.5rem; /*送信ボタン位置*/
}
</style>

上記は別ブログで実際に使用しているものになります。

実際のページはコチラ　➡　バラを咲かせることが好き【お問い合わせフォーム】

デザイン指定なしのCSSコード

配置の微調整だけ指定します。

<style>
.mf-label{
font-size:16px; /*タイトル文字サイズ*/
  font-weight:bold;  /*タイトル文字太*/
margin:1.5rem 0 0 0; /*タイトル文字位置*/
  display:block;
}
.cbluebutton{
margin-top:1.5rem; /*送信ボタン位置*/
margin-bottom:1.5rem; /*送信ボタン位置*/
}
</style>

最後に確認してみよう！

最後に自分でメールをしてみて、正常に動作するかのテストを行いましょう。

これで、連絡フォームの個別ページ完成です！

参考ブログ様

1983NOTE【Bloggerのお問い合わせフォームをページに設置する方法】

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