お問い合わせフォームを作成する

私のブログの読者には、Webクリエイターも沢山いらっしゃいます。Webクリエイターが必ず、つまづくのがお問い合わせフォームです。

実は、サーバーを引っ越した関係から動いていませんでしたが、この機会に修正しました。

送信ボタンを押したところ
20140105r08

修正後

20140105r00a

お問い合わせフォームは、重要

一般的にお問い合わせフォームは、ホームページに必須です。なぜならお客様との唯一の接点になるからです。

https://www.kewpie.co.jp/customer/information/form.php

20140105r09

「メールやSNSを使えばいいのでは?」と思われがちですが、漫画喫茶などでは、メールの設定すらしていないことも多いです。メールでは、送れないことも多いんです。またSNSなども、同様に使っていない方には、使うことができません。誰でも、必ず送れるのがお問い合わせフォームなんです

お問い合わせフォームは、サーバーサイド

「入門者が必ず、つまづくのがお問い合わせフォーム」と記載しましたが、お問い合わせフォームは、Webサーバーとメールサーバーがないと動作しません。
※実は、XAMPPを使えば比較的簡単に、実現できます。詳しくは、ホームページビルダー18 XAMPPでWordPressを参照ください。

サーバーサイトで一番有名なサイトがKent Webさんです。

http://www.kent-web.com

20140105r10

サーバーサイトプログラムを使えば、実質できないことがなくなります。ショッピングカートも、この技術で実現可能なんです。ぜひ、どんなことができるか「CGIプログラム」の一つ一つを見て確認してください。

20140105r11

Kentさんが一番有名なのは、初心者にもわかりやすい説明と、豊富なサンプルにあります。技術的にPHPの方が楽に実現できますが、他のサイトでここまで素晴らしいのは、いまだに存在しません。

今回のテーマは、「お問い合わせフォームを作成する」ですので、「メールプログラム(フォームメール等)」をクリックします。

20140105r13

今回は、「Post Mail」で実現します。「見本」を見て気に入ったら、実現するような感じです。「詳細」をクリック。

20140105r33

「sample」をクリックしてこれから作るものを確認しましょう。
20140105r22

気に入ったら、本ページを熟読します。今回は、私がナビゲートします。

20140105r15

今のホームページは、UTF形式が一般的です。クリックしてダウンロードします。

20140105r16

ダブルクリックして開いたら、デスクトップにでも展開しましょう。

20140105r17

フォルダーの内容

20140105r23

今回は、WordPress上で使いますので、postmail.htmlのbodyタグの内容を固定ページに貼り付けます。

20140105r18

postmail.htmlを変更し、固定ページに貼り付ける

WordPressの場合は、固定ページに貼り付けます。そうでない方は、直接htmlを編集してください。

フォームの内容は、自由に変更できます。今回は、そのまま使いますが、postmail.htmlは、1カ所だけ変更しましょう。action属性をフルパスに変更します。また、今回は、ファイル一式をpostmailフォルダに保存しますので、フルパスは、以下のようになりました。

変更前

<form action="./postmail.cgi" method="post">

変更後

<form action="http://pcmanabu.com/postmail/postmail.cgi" method="post">
※pcmanabu.comは、ご自分のサイト名に変更してください。

20140105r19

init.cgiを変更する

私は、terapadを使って編集しました。今回は、3箇所変更しました

変更箇所1:72行目

# 送信先メールアドレス
$cf{mailto} = 'xxx@xxx.xx';

# 送信先メールアドレス
$cf{mailto} = 'test1@pcmanabu.com';

変更箇所2:76行目

ここが迷うところだと思います。プロバイダごとに異なります。

# sendmailのパス【サーバパス】
# → プロバイダの指定を確認のこと
$cf{sendmail} = '/usr/lib/sendmail';

# sendmailのパス【サーバパス】
# → プロバイダの指定を確認のこと
$cf{sendmail} = '/usr/sbin/sendmail';

変更3 :140行目

# 送信後の戻り先【URLパス】
$cf{back} = '../index.html';

# 送信後の戻り先【URLパス】
$cf{back} = '../index.php';

FFFTPでアップロード

そして、FFFTPを使って「postmail」フォルダをそのままアップロードします。
FFFTPの使い方は、FFFTP環境の移管方法についてを参照ください。

20140105r24

属性変更

入門者の大きな壁が属性変更です。何も考えず無になって行いましょう。今回は、5箇所です。

20140105r25

「postmail」に移動し、「postmail.cgi」を右クリックし、「属性変更」。

20140105r26

指示通り「705」に変更

20140105r21

この操作は、あと4回。合計5回繰り返します。

終わったら動作確認

http://pcmanabu.com/postmail/check.cgi

20140105r27

送信確認

最後に、実際に動作することを確認し、終了です。

http://pcmanabu.com/postmailcgi/ にアクセスし、「送信する」をクリック

20140105r28

確認画面。「送信する >」をクリックし、送信されることを確認します。

20140105r29

メールが届いているか確認

会社側

20140105r30

お客様側

20140105r31

まとめ:お問い合わせフォームは、必ず設置しよう!

この記事をずっと前から書きたかったのですがやっと実現できました。

Webクリエイターなら、とても重要なことですので、実施してください。

   このエントリーをはてなブックマークに追加