ホームページのお問い合わせフォームへの画像認証（CAPTCHA）設置方法｜初心者向け徹底解説

この記事では、ホームページのお問い合わせフォームに画像認証（CAPTCHA）を設置する方法について、具体的な手順と注意点を解説します。特に、KENT-WEB CAPTCHA-MAILを利用している方を対象に、初期設定後の設置方法に焦点を当て、初心者でも理解しやすいように丁寧に進めていきます。

現在、KENT-WEB CAPTCHA-MAILというメールフォームをホームページに設置しようとしています。初期設定は済み、“チェックモード”でも全てOK表示になりました。しかし、設置方法が説明をみても、書いていない様子で解らず困っています。既存のお問合せフォームに設置したいのですが、どうすれば利用できるのでしょうか。ご存じの方、お解りになられる方、教えてください。宜しくお願い致します。

上記のような疑問をお持ちの方、ご安心ください。この記事を読めば、あなたも必ず画像認証を設置できるようになります。お問い合わせフォームへの画像認証の設置は、スパム対策として非常に重要です。悪意のあるボットによる不正な送信を防ぎ、ユーザーからの正当な問い合わせを確実に受け取れるようにするために不可欠な対策と言えるでしょう。

1. なぜ画像認証（CAPTCHA）が必要なのか？

まず、なぜ画像認証（CAPTCHA）が必要なのかを理解しておきましょう。CAPTCHAは、「Completely Automated Public Turing test to tell Computers and Humans Apart」の略で、人間とコンピュータを区別するためのテストです。具体的には、歪んだ文字や数字、画像を選択させることで、自動プログラム（ボット）による不正なアクセスやスパム送信を防ぎます。お問い合わせフォームにCAPTCHAを設置することで、以下のようなメリットがあります。

スパム対策: ボットによる大量のスパム送信を阻止し、メールサーバーへの負荷を軽減します。
セキュリティ向上: 不正なアクセスや個人情報の収集を試みるボットを排除し、サイトの安全性を高めます。
ユーザーエクスペリエンスの向上: 信頼できるフォームとして、ユーザーからの信頼を得やすくなります。

2. KENT-WEB CAPTCHA-MAILの基本

KENT-WEB CAPTCHA-MAILは、無料で利用できるメールフォームシステムです。シンプルな操作性で、初心者でも簡単に導入できるのが特徴です。初期設定が済んでいるということは、CAPTCHA-MAILの基本的な動作は理解していることと思います。ここでは、設置方法に焦点を当てて解説します。

2-1. ファイルの準備

まず、KENT-WEB CAPTCHA-MAILのファイルをダウンロードし、解凍します。解凍されたファイルの中には、以下の主要なファイルが含まれています。

captmail.cgi: CAPTCHA-MAILのメインプログラムファイル
captmail.dat: 認証情報を保存するデータファイル
img.cgi: 画像を表示するためのCGIファイル
readme.txt: 説明書

これらのファイルを、あなたのウェブサイトの適切な場所にアップロードする必要があります。一般的には、CGIファイルはcgi-binディレクトリに、画像ファイルはimagesディレクトリに配置することが推奨されます。ただし、サーバーの設定によっては、異なるディレクトリに配置する必要がある場合もあります。サーバーのマニュアルを参照するか、レンタルサーバーのサポートに問い合わせて確認してください。

2-2. 既存のお問い合わせフォームへの組み込み

次に、既存のお問い合わせフォームにCAPTCHAを組み込む方法を解説します。ここでは、一般的なHTMLフォームを例に説明します。あなたのフォームのHTMLコードに合わせて、適宜修正してください。

CAPTCHAの表示部分の追加: CAPTCHA画像を表示する部分を、フォームの適切な位置に追加します。具体的には、以下のようなHTMLコードを挿入します。

<img src="img.cgi" alt="CAPTCHA画像">

このコードは、img.cgiというCGIファイルにアクセスして、CAPTCHA画像を表示します。img.cgiのパスが異なる場合は、src属性の値を修正してください。

入力フィールドの追加: CAPTCHAの答えを入力するためのテキストフィールドを追加します。

<label for="captcha">画像認証:</label>
<input type="text" id="captcha" name="captcha" size="10" maxlength="6">

このコードは、captchaという名前のテキストフィールドを作成します。このフィールドに、ユーザーはCAPTCHAに表示された文字を入力します。name属性の値は、後でCGIプログラムで参照するために重要です。

CGIプログラムの修正: 既存のお問い合わせフォームのCGIプログラムを修正し、CAPTCHAの認証処理を追加します。KENT-WEB CAPTCHA-MAILのcaptmail.cgiを参考に、以下の処理を追加します。

CAPTCHAの答えの取得: フォームから送信されたcaptchaの値を取得します。
認証の実行: captmail.datに保存されている正解と比較し、認証を行います。
エラー処理: 認証に失敗した場合のエラーメッセージを表示し、フォームを再表示します。
メール送信処理: 認証に成功した場合に、メールを送信します。

CGIプログラムの修正は、プログラミングの知識が必要となります。自信がない場合は、専門家への依頼を検討しましょう。

3. 具体的な設置手順（KENT-WEB CAPTCHA-MAIL）

ここでは、KENT-WEB CAPTCHA-MAILを既存のお問い合わせフォームに設置する具体的な手順を、ステップバイステップで解説します。

3-1. ファイルのアップロード

ファイルのダウンロードと解凍: KENT-WEB CAPTCHA-MAILのファイルをダウンロードし、解凍します。
ファイルのアップロード: 解凍されたファイルを、FTPソフトなどを使用して、あなたのウェブサイトのサーバーにアップロードします。
ファイルの配置:
- captmail.cgi: CGIプログラムファイル。cgi-binディレクトリにアップロードします。
- img.cgi: 画像表示用CGIファイル。cgi-binディレクトリにアップロードします。
- captmail.dat: 認証情報ファイル。cgi-binディレクトリにアップロードします（または、CGIプログラムと同じ場所に配置し、パーミッションを設定します）。
- readme.txt: 説明書。

3-2. HTMLフォームの修正

HTMLファイルの編集: お問い合わせフォームのHTMLファイルを、テキストエディタなどで開きます。
CAPTCHA表示部分の追加: CAPTCHA画像を表示する部分を、フォームの適切な位置に追加します。

<p><img src="cgi-bin/img.cgi" alt="CAPTCHA画像"></p>

src属性の値は、img.cgiの配置場所に合わせて修正してください。

入力フィールドの追加: CAPTCHAの答えを入力するためのテキストフィールドを追加します。

<p><label for="captcha">画像認証:</label> <input type="text" id="captcha" name="captcha" size="10" maxlength="6"></p>

ファイルの保存: 修正したHTMLファイルを保存し、サーバーにアップロードします。

3-3. CGIプログラムの修正

CGIファイルの編集: captmail.cgiをテキストエディタなどで開きます。
CAPTCHA認証処理の追加: captmail.cgiに、CAPTCHA認証処理を追加します。KENT-WEB CAPTCHA-MAILのサンプルコードを参考に、以下の処理を追加します。

# CAPTCHA認証

$captcha = param('captcha');

if ($captcha ne $captcha_code) {

    # エラー処理

    print "Content-type: text/htmlnn";

    print "<html><head><title>エラー</title></head><body>n";

    print "<p>画像認証に失敗しました。</p>n";

    print "<p><a href="..."">フォームに戻る</a></p>n""; # フォームのURLを修正

コメントするコメントをキャンセル

お役立ちコンテンツ

転職体験談

転職ノウハウ

転職コラム

コミュ力が、
最強の武器
になる。

まずは登録