2015年4月29日

お問い合わせページを作る。ガジェットではなく、ページに設置する。

スポンサードリンク

 お問合せ先があるかないかで、
サイトの評価が変わると思います。

質問やお願い、業務依頼、クレームなど。
メールで尋ねたい時に便利なのが、メールフォームです。

メールフォームをページに埋め込み


 ちょっとコツがいるので、
ひとつひとつ丁寧に処理します。


 まずはじめに
ContactForm

ガジェットを入れるのですが、
後で非表示にします。


特殊なやり方ですね。
でもちゃんと出来ました。


こちら

砕け散る粛正 miyacozi.comさん

のサイトを参考にしました。



 でははじめます。

まず、レイアウトの中から、

連絡フォーム を追加します。



 追加したら、
今度はテンプレートの編集画面へ。

ContactForm1 を探します。
そして展開し、確認します。


ContactFormコードの中から、

<b:if cond='data:title != &quot;&quot;'>

<b:include name='quickedit'/>


までを、削除します。

そしてテンプレートを一旦保存しましょう。


 ブログをチェックすると、
連絡フォームが非表示になっています。

でも、管理画面のレイアウトには表示されていますね。



 ここからは簡単です。

新しいページを作成します。

タイトルはContactFormなどにします。

お問合せページを作成していきます。


 実際私も使っています。
ページのHTMLに以下を追加しました。



<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>お名前</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' placeholder='お名前を入力してください。' value=''/>
<p>E-mail [必須]</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' placeholder='メールアドレスを入力してください。'  value=''/>
<p>メッセージ [必須]</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='10' placeholder='メッセージを入力してください。' ></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='送信'/>
<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>
</form>
</div>
</div>
</div>

こちらをページのHTMLに貼付けました。

お名前を入力してください。
等の文章は変えてOKです。

あまり長い文章にならないようにしましょう。

お問い合わせページのCSSのを設定する


 さらに。

CSSも自由に変えられます。
好きな色などに変更できます。

一旦、テンプレート編集へ戻ります。


CSS入力位置はこちらを参考にして下さい。

BloggerテンプレートのCSS入力位置はどこ?HTMLコードは?初心者向け解説。



/* Contact Form Container */
.contact-form-widget {
width: 400px;
max-width: 90%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

です。
色や幅は変えてOK。

Submit buttonとは、
送信 をクリックするボタンのことです。


送信のボタンも好きな色にどうぞ。


お問合せページはユーザーの為にも必要


 少なくともトップページには、このお問合せフォームにいくリンクを
貼っておくといいですね。

出来ればどのページからもアクセス出来ると良いです。

なので、
ページタブに入れて使うのがおすすめ。


 もし、メールフォームをガジェットに追加したままだと、
常にフォームが表示されたまま。

これだとちょっと邪魔ですね。
見た目の問題だけです。



 今回の方法なら簡単に設置できますし、
見栄えも良いし、便利になりました。

是非チャレンジしてみましょう。



 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク