お問い合せフォーム作成

お問い合せフォーム作成の準備

最低限必要なファイル

  • contact.html
  • thanks.html
  • mailform/の中のファイル全て

mailformのシステムファイルで修正が必要なもの

send.cgi
#!/usr/bin/perl --


use Jcode;

########################################################################
##一般的な設定##########################################################
########################################################################

#00.テスト時の誤送信を制御 / 0にしないとメールが飛びません
$conf{'debug'} = 0;

#03.スパムブロック([URL]や[LINK]が含まれた送信をブロック) 1:ON / 0:OFF
$conf{'spam_block'} = 0;

#04.sendmailのパス(サーバ会社へお問い合わせ下さい)
$conf{'sendmail'} = '/usr/sbin/sendmail';

#06.設置者のアドレス(カンマ区切り)
$conf{'mailto'} = 'XXX@XXX';

#07.送信完了時にリダイレクトするサンクスページ
$conf{'thanks'} = 'http://XXXX/thanks.html';

#08.設置者に届くメールの件名
$conf{'subject'} = 'お問い合せがありました【株式会社XXX】';

#09.送信者に届くメールの件名
$conf{'res_subject'} = 'お問い合せありがとうございます【株式会社XXX】';

#10.送信者に届くメールの本文
$conf{'res_body'} = <<'__res_body_eof__';
この度はお問い合せ頂き誠にありがとうございます。
改めて担当者よりご連絡をさせていただきます。

─ご送信内容の確認─────────────────

──────────────────────────

このメールに心当たりの無い場合は、お手数ですが
下記連絡先までお問い合わせください。

この度はお問い合わせ重ねてお礼申し上げます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
株式会社XXXXX

〒XXX-XXX XXXXXXXXXXXXXX
TEL:000-00-0000 FAX:000-000-000
web site URL:http://www.XXXX.jp
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
__res_body_eof__


#11.Yahooジオシティーズ ジオプラス用設定 1:ON / 0:OFF
$conf{'geoplus'} = 0;

########################################################################
##高度な設定############################################################
########################################################################

#01.リファラーによるスパムチェック 1:ON / 0:OFF
$conf{'domain_check'} = 0;

#01.リファラー(送信元)のURLの一部か全部
$conf{'domain'} = $ENV{'SERVER_NAME'};

#02.HTML側での設定を無効化(タダ乗り対策) 1:ON / 0:OFF
$conf{'html_vals_disabled'} = 1;

#03.全てが英文の送信を拒否 1:ON / 0:OFF
$conf{'language_check'} = 0;

#11.通し番号保存用のファイルのパス
$conf{'serial_file'} = 'count.dat';

#12.件名に通し番号を付ける 1:ON / 0:OFF
$conf{'subject_serial'} = 0;

#12.送信履歴保存用ファイルとダウンロードパスワード
#$conf{'log_file'} = 'sendlog.cgi';
#$conf{'log_passwd'} = '0123';

#13.送信文字コード
$conf{'charset'} = 'ISO-2022-JP';
$conf{'lang'} = 1;

#無変換設定
$conf{'charset'} = 'UTF-8';
$conf{'lang'} = 0;

#3,#5,#7,#8,#9,#10は必ず修正して下さい!

パーミッション設定

send.cgi: 755
count.dat: 777
check.cgi: 755
postcodes/: 755
L get.cgi: 755
Jcode/: 755
L Unicode: 755

サーバーによって異なりますが、基本的にはこちらでOKです。
サーバーによって利用できない場合もありますが、mailp.phpという実行ファイルを作成したので、
FTPを利用して mailform/mailp.php にアップして、ブラウザから、実行して下さい。
例) http://www.accorder.co.jp/mailform/mailp.php

HTMLにメールフォームを入れる

以下の3行は必須。ページのどこかに入れて下さい。
探しやすく<head>に入れるのがいいとは思います。

<link rel="stylesheet" href="mailform/mailform.css" type="text/css">
<script type="text/javascript" src="mailform/mailform.js" charset="utf-8"></script>
<script type="text/javascript" src="mailform/postcodes/get.cgi?js" charset="utf-8"></script>

FORMの設定

下のコードによくある間違いが2点御座います。どこでしょうか?

答え①→会社名の項目、貴社名になっています。

答え②→郵便番号が必須項目なのに、mfpcの部分は、そう書かれていないです。

<form id="mailform" method="post" action="mailform/send.cgi" onSubmit="return sendmail(this);">
<table border="0" cellspacing="0" cellpadding="0" class="mailform" style="border-left:0px">
<tbody>
<tr>
<th>会社名</th>
<td><input type="text" name="貴社名" class="mailform_lg_s"></td>
</tr>
<tr>
<th>部署名</th>
<td><input type="text" name="部署名" class="mailform_lg_s"></td>
</tr>
<tr>
<th>お名前<span>(必須)</span></th>
<td><input type="text" name="お名前(必須)" class="mailform_lg_s"></td>
</tr>
<tr>
<th>性別</th>
<td>
<label><input type="radio" name="性別" value="男性" id="RadioGroup1_0">男性</label> 
<label><input type="radio" name="性別" value="女性" id="RadioGroup1_1">女性</label>
</td>
</tr>
<tr>
<th>ふりがな<span>(必須)</span></th>
<td><input type="text" name="ふりがな(必須)" class="mailform_lg_s"></td>
</tr>
<tr>
<th>電話番号</th>
<td><input type="text" name="電話番号" class="mf mailform_lg_ss"></td>
</tr>
<tr>
<th>郵便番号(必須)</th>
<td><input type="text" name="郵便番号(必須)" class="mf mailform_lg_ss"> <input type="button" value="〒から住所を自動入力" onClick="mfpc('mailform','郵便番号','住所');"></td>
</tr>
<tr>
<th>住所</th>
<td><input type="text" name="住所" class="mf mailform_lg_l"></td>
</tr>
<tr>
<th>Email<span>(必須)</span></th>
<td><input type="text" name="email(必須)" class="mf mailform_lg_s"></td>
</tr>
<tr>
<th>Email 確認<span>(必須)</span></th>
<td><input type="text" name="confirm_email" class="mf mailform_lg_s"></td>
</tr>
<tr>
<th>お問い合せ目的</th>
<td>
<select name="お問い合せ目的">
<option value="">--- 選択してください ---</option>
<option value="お見積り希望">お見積り希望</option>
<option value="資料請求">資料請求</option>
<option value="お電話でのご相談">お電話でのご相談</option>
</select>
</td>
</tr>
<tr>
<th>ご用件<span>(必須)</span></th>
<td><textarea name="ご用件(必須)"></textarea></td>
</tr>
<tr class="send_btn">
<th class="last"></th>
<td><input type="submit" value="メールを送信する" class="sb_btn1"> <input type="reset" name="reset" value="リセット" class="sb_btn2"></td>
</tr>
</tbody>
</table>
</form>

でも、これだけじゃない。案件によって違う。

サーバーの仕様による不具合、Directoryの構成が違ったり、英語版の対応があったり、様々です。
しかし、上に書かれたところは、ほとんど対応しないといけないところなので、しっかりミスしないように守りましょう。
最後に contact.html と thanks.html に Google Analyticsコード入れるのも忘れないでください。

iframeの中身にスクロールバーを常に表示させる方法(Mac:Safari、Chrome)

Macはデフォルトでスクロールしたとき以外はスクロールバーが出ないようになっています。

通常のWEBページだとコンテンツが画面より多くても、ユーザーはスクロールして見ようとすると思いますが、iframeだとコンテンツがまだあると気づかずに閉じてしまう恐れがあります。

そのため、iframeの中はスクロールバーを常に表示する方がいい場合が多いと思います。今回はその方法をご紹介します。

◯解決方法
<style>
::-webkit-scrollbar { -webkit-appearance:none; width:7px; }
::-webkit-scrollbar-thumb { border-radius:4px; background-color: rgba(0,0,0,.5); box-shadow:0 0 1px rgba(255,255,255,.5); }
</style>
iframeのhtmlに上記のコードを入れると、コンテンツがあふれたときだけスクロールバーが表示されるようになりました。ただ、FireFoxでは一瞬だけ出て消えてしまいました。

※上記のコードのうち、widthとborder-radius、background-color、box-shadowを変えることで、スクロールバーをデザインすることも可能です。

※cssファイルに記述しても動きますが、他のページにも適用するcssに書くと、そのページにもスクロールバーがついてしまうので要注意です。

◯参考サイト
スクロールバーをデザインする方法が書いています。 http://unformedbuilding.com/articles/learn-about-webkit-scrollbar/
◯関連記事
colorboxでiframeを表示した時に起こる問題を記事にしています。

colorboxでモーダルウィンドウの中身がスクロールできなくなる現象を解決する方法

ページの一部分だけを印刷するボタンを設置する方法

ページ全体を印刷するボタンは簡単に設置することができますが、ページの一部分だけとなると、途端に難しくなります。今回は印刷用CSSとJQueryで作成する方法を紹介しようと思います。

◯ページ全体を印刷するボタンの設置方法

その前にページ全体を印刷する方法をついでにご紹介します。
<p class="aaa" onclick="window.print();">印刷</p>
クリックしたら印刷画面を表示させる「onclick=”window.print();”」を書くと、ページ全体を印刷するボタンを作成することができます。

◯ページの一部分だけを印刷するボタンの設置方法

それでは、本題のページの特定の箇所だけを印刷するボタンの作成方法を紹介します。
◯HTML部分
<div>
  <p class="print-title">タイトルタイトルタイトル</p>
</div>
<ul>
  <li class="print-page">
    <img src="images/logo.png" width="500" alt="aaa">
    <h2 class="bbb">コピー</h2>
    <p class="print-btn">印刷ボタン</p>
  </li>
  <li class="print-page">
    <img src="images/top_img_company_table3.jpg" width="500" alt="あああ">
    <h2 class="bbb">コピー2</h2>
    <p class="print-btn">印刷ボタン</p>
  </li>
</ul>
上記のHTMLで印刷する箇所は”.print-title”と”.print-page”で、印刷ボタンは”.print-btn”です。クラス名は任意のもので問題ありません。
◯Javascript部分
$(function(){
  //個別印刷ボタンをクリックした時
  $('.print-btn').each(function(){
      $(this).on('click', function(){
        //プリントしたいエリアの取得
        var printPage = $(this).closest('.print-page').html();
            printTitle = $('.print-title').html();
        //プリント用の要素「#print」を作成
        $('body').append('<div id="print"></div>');
        $('#print').append(printPage).append(printTitle);
        //「#print」以外の要素に非表示用のclass「print-off」を指定
        $('body > :not(#print)').addClass('print-off');
        window.print();
        //window.print()の実行後、作成した「#print」と、非表示用のclass「print-off」を削除
        $('#print').remove();
        $('.print-off').removeClass('print-off');
      });
    });
});
上記のコードをもとに細かく見ていきます。
①印刷ボタンそれぞれに(・・・)内の処理をします。
$('.print-btn').each(function(){・・・});
②クリックしたら、(・・・)内の処理をします。
$(this).on('click', function(){・・・});
③プリント用のHTMLを追加します。ここに書いてあるものが印刷されます。
 //プリントしたいエリアの取得
 var printPage = $(this).closest('.print-page').html();
        printTitle = $('.print-title').html();
 //プリント用の要素「#print」を作成
 $('body').append('<div id="print"></div>');
 $('#print').append(printPage).append(printTitle);
④印刷する箇所以外を非表示にして、印刷画面を表示します。
//「#print」以外の要素に非表示用のclass「print-off」を指定
$('body > :not(#print)').addClass('print-off');
window.print();
⑤印刷が終わったら③と④の処理をリセットし、元の画面にします
//window.print()の実行後、作成した「#print」と、非表示用のclass「print-off」を削除
$('#print').remove();
$('.print-off').removeClass('print-off');
 
◯Style部分
 
.print-off{display:none;}
 @media print{
  .print-off{display:none;}
 }
印刷したくない部分を消す
印刷しない箇所を消します。印刷画面と通常画面の両方を消さないとうまくいかないブラウザがあったので、両方display:noneにします。    

bxSliderやMansonryで一瞬だけレイアウトがおかしくなる問題を解決する方法

◯問題

bxSliderやMasonryをそのまま導入すると、以下のような問題が起こることがあります。どちらにも共通しているのは、それらが動く前の状態が一瞬見えてしまうことです。
・bxSlider
ページを読み込み後、初めの一瞬だけ画像がスライダーの枠からはみ出るくらい大きく表示されたり、スライドさせる画像が全部表示されたりしてしまう。
・Masonry
画面の中央に配置したいのに、読み込んだ後の一瞬だけ左に寄って見えてしまう。

◯解決方法

私がおすすめしたいのは、それらのJQueryプラグインを使っているコンテンツ全体を
.aaa{ opacity: 0; }
このように設定することで透明にして、
$(window).on('load',function(){
    $('.aaa').animate({'opacity':'1'},300);
});
上記のように、読み込みが完了した時点で透明にしたものを元の状態に戻すことで、表示させる方法です。

◯他のプラグインでも

他のプラグインではまだ試していませんが、同様の問題が起こった際には一度試してみてはいかがでしょうか?

スマホで見た時に電話番号のスタイルが変わってしまうのを防ぐ方法

電話番号の自動リンク機能
iPhoneのsafariは自動的に数字の羅列を電話番号と認識して、番号をタップすると電話をかけることができるようにする機能がついています。それ自体は便利な機能ですが、電話番号のスタイルが変わってしまうことがあります。今回はそれを防ぐ方法を共有しようと思います。
①電話をかけることができる機能自体をなくしたい場合
<meta name="format-detection" content="telephone=no">
<head>内に上記のコードを書けば、そのページ全体で電話番号の自動リンク機能をなくすことができます。
②スタイルだけ元に戻す
電話番号の自動リンク機能がついているコードを見てみると、
<p class="foo"><a href="tel:0123456789">0123456789</a></p>
のようになっています。
・スタイルを元に戻すには
.foo a{color:#fff;}
上記のようにスタイルを指定すると、スタイルを元に戻すことができます。
参考サイト:
http://www.tagindex.com/html5/page/meta_format_detection.html