メールフォームの設置が終わったので、メールフォームの中身をカスタマイズします。
カスタムすると次の設定を変更できるようになります。
・お問合わせフォームのタイトル変更
・お問合わせフォーム内の注意書きの変更
・必須入力項目の設定
・本文入力欄の大きさ変更
・お問合わせフォームの色変更
・自動返信メールの設定
・メールフォーム送信後の戻り先URLの変更
メールフォーム設置が終わると表示される［メールフォーム完了］画面にインストール先などの情報が表示されますが、その下に設定ソースURLも表示されています。
［サーバコントロールパネル］左側の【運用に便利なツール】ボックス内「クイックインストール」をクリックして、「インストール済み一覧」文字をクリックしても同じ内容の画面が表示されます。
赤く囲ってある「init.cgi」、「postmail.html」の２つが、設定に関するソースへのリンクです。
作業前にまず、現状のメールフォーム状態を確認します。
「設置URL」リンク文字をクリックすると、メールフォーム画面が表示されます。
カスタマイズするために、下段にある「~/www/・・・/postmail.html」のリンクをクリックします。
［さくらインターネット・ファイルマネージャー］ウインドーが表示されます。
このウインドー内のHTMLを編集する事で各種設定をして行きます。
お問合わせフォームタイトルと注意書きの変更
HTML内で、下記の場所を探してください。
<body>
<blockquote>
<strong class="ttl">お問い合わせフォーム</strong>
<ol>
<li>当サイトに関する質問や感想などをお受けしています。</li>
<li>以下のフォームより、必要事項を入力のうえ送信してください。</li>
</ol>「お問い合わせフォーム」という文字を、好きな文字列に変更すると、メールフォームの一番上にあるタイトルが変更できます。
「当サイトに関する質問や感想などをお受けしています。」という部分の文章を変更するとフォーム上部の注意書きを変更できます。
必要であれば行数を増やしても、削っても構いません。
必須入力項目の設定
どれが必須入力項目なのかを解りやすくするために「*」マークを付けます。
今回は、お名前とメールアドレスを必須入力項目にします。
下記の２つが別々に記載されているので、探して書き換えます。
<th>お名前</th>
↓
<th>お名前<font color="#ff0000"> *</font></th>
<th>メールアドレス</th> ↓
<th>お名前<font color="#ff0000"> *</font></th>
必須入力設定を解りやすくするために「*」マークを付けましたが、必須項目とするかどうかは別に設定があります。
デフォルトは「お名前」「メールアドレス」「問い合わせ種別」の３つが必須入力となっています。
<input type="hidden" name="need" value="name email 問合せ種別" />上記の「問合せ種別」という文字だけをカットすれば、必須入力から外せます。
問合わせ種別の変更
問い合わせ種別の内容を変更したい場合は、下記を探してください。
<th>問合せ種別</th>
<td>
<input type="radio" name="問合せ種別" value="ご質問" />ご質問<br />
<input type="radio" name="問合せ種別" value="ご相談" />ご相談<br />
<input type="radio" name="問合せ種別" value="ご感想" />ご感想<br />
<input type="radio" name="問合せ種別" value="ご依頼" />ご依頼<br />
<input type="radio" name="問合せ種別" value="その他" />その他
</td>必要ない行は、削除して構いません。
「ご質問」などの文字を変更したい場合は、「ご質問」文字部を２カ所書き換えてください。
「value="ご質問" />ご質問<br />」→「value="尋ねる" />尋ねる<br />」本文の記入ボックスの大きさ変更
問い合わせ内容を記入するボックスが、少し狭く感じるのでサイズを変更します。
<td><textarea name="メッセージ" rows="7" cols="48"></textarea></td>この部分の「rows="7"」が縦の長さです。
30とか50など、好きな数値にしてください。
「cols="48"」が、横幅です。
こちらも数値を変更すれば横幅を好きな大きさに出来ます。
横幅を大きくし過ぎると、スマホなどで見た時に見づらくなるので程々に。
メールフォームの色を変える
全体の色を変更します。
下記を探してください。
<!--
body { font-size:80%; background:#fff; color:#000; }
table.form { border:1px solid #7777bb; border-collapse:collapse; margin-top:1em; }
table.form th,td { text-align:left; border:1px solid #7777bb; padding:8px; font-weight:normal; }
table.form th { background:#cccce6; }
table.form td { background:#f0f0f0; }
strong.ttl { text-align:left; border-left:solid 4px #cc0000; display:block; padding:2px 5px; margin-top:2em; }
-->「table.form th { background:#cccce6; }」
この「#cccce6」という色コードを変えると、お名前やメールアドレスという文字の背景色が変わります。
「table.form td { background:#f0f0f0; }」
この「#f0f0f0」は記入欄の背景色です。
色は「カラーコード」で検索すれば、色見本とコードが書かれているサイトが多くあります。
好きな色に変更してください。
メールフォーム送信者への自動返信メール
デフォルトではメールフォームから送信した方へ、自動で送信確認メールが送られる設定になっています。
「お問合わせ有難うございました、うんたらかんたら・・」という内容のメールが送られます。
自動で送信確認メールがあると送り手で送信確認できるので便利ですが、いたずらメールや迷惑メールにわざわざメールアドレスを教えてやることもないので、私は自動返信しない設定にしています。
この記事の冒頭でご紹介した、【設置URL】が記載されている「インストール済み一覧情報」画面を表示します。
この設定は、HTMLではなく「~/www/・・・・init.cgi」というリンクをクリックして変更します。
cgiを編集できるウインドーが開きますので、下記が記載された場所を探します。
「基本設定」という文字の下の方にあります。
# 送信者へのメール返信
# 0=no 1=yes
$cf{auto_res} = 1;「$cf{auto_res} = 1;」→「$cf{auto_res} = 0;」に変更します。
【保存】ボタンを押します。
メールフォーム送信後の戻り先の指定
メールフォーム設置時に、戻り先のURL設定をされている方は、ここでの指定は必要ありません。
メールフォーム送信者への自動送信と同じく、「インストール済み一覧」文字をクリックしてインストールされたメールフォームの「~/www/・・・・init.cgi」という文字をクリックして、下記記載を探します。
# 送信後の戻り先【URLパス】
$cf{back} = '/';「$cf{back} = '/';」のままだと上手くブログに戻ってくれないので、「/」の部分をブログのトップページのURLなどに変更します。
「$cf{back} = 'http//hoge.com';」のように戻したいページのブログURLを記載してください。
【保存】ボタンを押します。
どこまでカスタマイズするか
カスタマイズは、これくらいで十分だと思います。
詳しく知りたい方は、ちょっと小難しいですがメールフォーム自体の解説や使い方などが以下のページにあります。
HTMLとCGIを改造すれば、かなり見た目を変更する事も可能です。
新しい質問欄を作ったり、問い合わせ種別のラジオボタンをコピーすれば、オリジナルのメールフォームが作れます。
私はメールフォームとして機能すれば良いと思っているので、殆どカスタマイズしていません。
メールフォームのページに、ブログトップページに戻るボタンが無かったので付けるくらいはしています。
さくらのメールフォームがどんなものか見てみたい方は、当サイトのグローバルメニューにある【お問合わせ】をクリックしてください。
メールフォームに記入しないと【送信する】ボタンを押しても送信されませんので、お気軽にご確認してください。
メールフォームの暗号化
当ブログは、お問合わせフォームのSSL化はしていません。
SSLは、「Secure Socket Layer」の略で、情報を暗号化して送受信できる仕組みです。
暗号化したデータを解除して、読める状態にするのに電子証明書が必要になります。
会員サイトなどではサーバーとブラウザ間で暗号化するので有効ですが、メールフォームの場合メーラーが絡んできます。
メールフォームをSSL化しても、メーラーとの通信は暗号化されませんのでセキュリティ的な穴が塞がりません。
ネットのショッピングモールが、必ずログインさせて買い物をさせるのは、利便性もありますがこういった理由もあります。
本当に信頼性を上げるには有料で電子証明書を作らねばなりません。
費用対効果が低いくせに、非常に面倒で手間が掛かります。
個人で電子証明書を作る事も可能ですが、身内でのデータやり取りでどうしても暗号化を掛けたい場合に限ります。
不特定多数の方に個人的な証明書を付けても信用してもらえる訳も無く、逆に怪しく思われてしまいます。
企業であればSSL化が安心材料の１つになるので、有料でも電子証明書対応すべきと思いますが、個人では必要無いでしょう。
SSL化による電子証明などは、セキュリティ関係のディープな知識が無いと理解するのは難しいと思います。
知識として「個人ブログでは、暗号化する程の重要データやり取りはしないのでSSLは必要なし！」と覚えておけば良いと思います。
以上、メールフォームのカスタマイズでした！
スポンサーリンク
