編集

Blogger『Contempo』に連絡フォームページをつける

｜2022/05/03

連絡フォームページをつける

連絡フォームを見直した。Googleフォームを利用して記事毎にリンクを張りつけていたが、ヘッダーメニューに組み込む事にした。

『blogger ガジェットの連絡フォームをページで表示する』を参考にさせていただきました。

*ガジェットの追加


『レイアウト』→『ガジェットを追加』→『連絡フォーム』を選んで追加。

サイドバー（上）とサイドバー（下）に分かれてますが、どちらに入れてもいいです。
私は下の方に入れました。下記で検索のために使うので、タイトルの変更はしない方が無難。この後、HTMLを編集すると場所の移動が出来なくなってしまうのでここで、邪魔にならないと思える位置に置いておく。

**ガジェット固定

※HTML編集の前にテーマ→バックアップは忘れずに。

テーマ→HTMLの編集→『連絡フォーム』で検索。

<b:widget id='ContactForm1' locked='false' title='連絡フォーム' type='ContactForm' visible='true'>

この部分の赤字を『locked='true'』へ変更。

連絡フォームの下の<b:includable id='main'>の下にある

  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
            <b:includable id='content'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>

この部分を削除。長いですね。私もどこまで消せばいいのか迷ったのです。たぶん、この部分であっていると思いたい。元記事内とは違うので、自信はない。

***新しいページを作る

『ページ』→『新しいページ』から、ページ編集の画面へ
左端の『作成ビュー』を『HTMLビュー』にして、下記を張りつけ。

<div class="widget contact-form" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<!--FORM-->
<form name="contact-form">
<!--NAME-->
<p style="margin-bottom: 3px;"><br /></p><p style="margin-bottom: 3px;">＊お名前：</p>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="お名前を入力してください。" size="30" type="text" value="" />
<!--EMAIL-->
<p style="margin-bottom: 3px; margin-top: 10px;">
＊メールアドレス <span style="color: red;"> (*必須)</span>：</p>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="メールアドレスを入力してください。" size="30" type="text" value="" />
<!--MESSAGE-->
<p style="margin-bottom: 3px; margin-top: 12px;">
＊メッセージ <span style="color: red;"> (*必須)</span>：</p>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="メッセージを入力してください。" rows="10" value=""></textarea>
<!--BUTTON-->
<input class="contact-form-button contact-form-button-submit contact-form-reset-button" type="reset" value="消去" /> <input class="contact-form-button contact-form-button-submit contact-form-send-button" id="ContactForm1_contact-form-submit" type="button" value="送信" />

<!--VALIDATION-->
<div style="max-width: 250px; text-align: center; 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>
</div>
</div>
</div>

ページタイトルに英字を入れるとそのリンクになるので、最初は英字タイトルを入れてリンクを作ってます。公開後に日本語タイトルに変えてもリンクはそのまま使えます。indexもその方法で作ったのです。

****連絡フォームのデザイン編集


テーマ→カスタマイズ→詳細設定→CSSを追加。
もしくはテーマ→HTMLの編集→『　]]></b:skin>　』の前に置く。

/* 連絡フォーム---------------------- */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
/*border-radius: 5px;*/
}

.contact-form-name,
.contact-form-email,
.contact-form-email-message {
max-width: 100%;
margin-bottom: 10px;
margin-left: 5px;
}

.contact-form-name,
.contact-form-email {
width: 50%;
}

.contact-form-email-message {
width: 100%;
}

.contact-form-button-submit {
background-color: rgb(248, 229, 140);
background-image: -moz-linear-gradient(center top , rgb(77, 144, 254), rgb(71, 135, 237));
border-color: rgb(230, 180, 34);
color: rgb(51, 51, 51);
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

.contact-form-button:hover {
text-decoration: none;
}

青色文字は送信ボタンの背景色です。紫文字は送信ボタンなどの枠線の色です。
どちらも私は黄色系に変えてます。


連絡フォームのガジェットは残しておくのです。