メールフォームを無料で簡単作成できるphpテンプレートTransmitMail

メールフォームを無料で簡単作成し、カスタマイズもできるphpテンプレートの「TransmitMail」を設置した時の手順です。phpを利用可能なサーバーでしたら、静的なHTMLで作成しているサイトにもメールフォームを作成できます。

TransmitMailでできること

  1. WordPressなどのCMSを導入していなくても、メールフォームを簡単に作成できます。

  2. 日本語を使えます。作者が日本の方です。

  3. 入力する内容をとても細かく設定できます。

  4. 入力内容に不備があるとエラーを返せます。

  5. 送信前に入力内容の確認ページを表示できます。

  6. 入力されたメールアドレス宛に自動返信できます。

  7. メールフォームのデザインを自由にカスタマイズできます。

  8. その他すばらしい機能があります。

TransmitMailを利用するメリット

  1. 無料にもかかわらずCopyright表示不要で使えます。しかも商用もOKです。

  2. 公式サイト(dounokouno/TransmitMail Wiki ・ GitHub)の説明が丁寧です。

  3. メールフォームのソースを見てもメールアドレスが記載されていませんので、ロボットなどにメールアドレスを収集されません。

  4. メールフォームをカスタマイズして自分好みのものを一度作成すると、次回からは同じものを他サイトに使いまわせます。

TransmitMailの導入

  1. TransmitMail公式サイトのdounokouno / TransmitMailから、ファイルをダウンロードします。Downloadsをクリックします。

    transmitmail-setting-1.png
  2. 画面がかわります。今回はzipファイル形式でダウンロードしますのでDownload as zipをクリックします。

    transmitmail-setting-2.png
  3. dounokouno-TransmitMail-009a7b6.zip というファイルがダウンロードされました。ダウンロードするバージョンにより、ファイルの名称が異なるかもしれません。

    transmitmail-setting-3.png
  4. 圧縮ファイルを解凍します。下図はWindows XPの場合です。

    transmitmail-setting-4.png
  5. 解凍すると、dounokouno-TransmitMail-009a7b6 というフォルダが出現します。

    transmitmail-setting-5.png
  6. フォルダ名を分かりやすいように 「contact」 に変更しました。名前変更により、サーバーの独自ドメインフォルダのルートにこのcontactフォルダをアップロードした場合、http://sample.com/contact/でメールフォームにアクセスできるようになります。

    transmitmail-setting-6.png

設定すること

自分仕様にカスタマイズ

  1. メールフォームから投稿された内容を送信するためのメールアドレスを設定します。confフォルダ内のconfig.phpを開き、18行目にあるメールアドレスを書き換えます。これをしないと、TransmitMail作者宛にメールが送信されてしまいます。

    transmitmail-setting-7.png
  2. 上記設定やその他の設定も公式サイトで確認できます。

コアサーバーの場合、セーフモードを解除

  1. お使いのサーバーがコアサーバーの場合、セーフモードを解除しないとメールフォームから投稿できません。

  2. メールフォームのフォルダ内に「.htaccess」ファイルを設置します。その記載内容は次のとおりです。コピペでOKです。 フォルダ名を contact に変更した場合は、その contactフォルダ内に設置します。

    
    <files index.php>
    AddHandler application/x-httpd-phpcgi .php
    </files>
    <files config.php>
    AddHandler application/x-httpd-phpcgi .php
    </files>
    
  3. Windows XPでは、「.htaccess」 という名前のファイルを作成できないので、ひとまず「htaccess.txt」というファイルを作成しておき、サーバーにアップロードしてから、.htaccess という名前に変更します。

アップロードして作動を確認

  1. メールフォームからテスト投稿してみて、きちんと投稿できるか確認します。また、自動返信もきちんとされるかも確認します。

メールフォームをページ内の一部として読み込む

概要

  1. すでにTransmitMailを正しく設定できていることが前提です。最初からカスタマイズして運用しだすと、メールフォームが機能しなかった場合に、どこに問題があるのかを判別しにくくなります。

  2. CMSは使っていないが、ヘッダーやサイドバーなどを別々のPHPファイルにモジュール化しインクルードしている場合などに、メールフォームをページ内の一部として読み込む設定です。また、静的なHTMLのみでサイトを作成している場合でも、同じような手順でメールフォームにヘッダーやサイドバーなどを追加できます。

  3. 当サイトの管理人が行った手順を記載しているだけなので、最も正しい方法であるとかセキュリティー上問題ないとかは言えないです。ご了承願います。

index.php 内のコードを変更

  1. index.php にアクセスすると、次のファイルが状況に応じて出力されます。

    • input.html
    • confirm.html
    • error.html
    • finish.html
  2. デフォルト設定では、index.php 自体ではページの骨格となるHTMLを出力していません。index.php で読み込まれる input.html などに骨格となるHTMLが書かれています。index.php 内の記述を変更し、モジュール化している各ファイルを読み込むようにすると、メールフォームがページの一部に表示されます。イメージとしては下図のとおりです。

    transmitmail-include-1.png
  3. index.phpの最初に、次のようなコードを付け足します。あくまでも一例ですので、普段設定しているものをご利用ください。単純にコピペしてもエラーが返ります。

    
    <?php $doctype = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n"; print $doctype ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ページタイトル</title>
    <?php include(dirname(__FILE__) . '/../inc/import.php'); ?>
    </head>
    <body>
    <div id="page">
    
    <div id="header">
    <h1>ページタイトル</h1>
    <?php include(dirname(__FILE__) . '/../inc/banner.php'); ?>
    </div><!-- /#header -->
    
    <div id="main">
    
  4. index.phpの最下部に、次のようなコードを付け足します。あくまでも一例ですので、普段設定しているものをご利用ください。単純にコピペしてもエラーが返ります。

    
    </div><!-- /#main -->
    
    <?php include(dirname(__FILE__) . '/../inc/nav.php'); ?>
    </div><!-- /#nav -->
    
    <?php include(dirname(__FILE__) . '/../inc/footer.php'); ?>
    
  5. index.php内に最初から書かれていた exit(); を全て削除します。もしくは /* exit(); */ に置き換えてコメントアウトします。これをしないと index.phpの最下部に追加したコードが読み込まれません。

読み込まれるファイル内にあるHTML部分を調整

  1. input.html などに書かれている不要なHTMLを削除します。具体的には、<div id="content">内以外は不要です。

  2. input.html などに書かれているHTMLやCSS用のclassやidなどを調整します。