私のブログの読者には、Webクリエイターも沢山いらっしゃいます。Webクリエイターが必ず、つまづくのがお問い合わせフォームです。
実は、サーバーを引っ越した関係から動いていませんでしたが、この機会に修正しました。
送信ボタンを押したところ
修正後
お問い合わせフォームは、重要
一般的にお問い合わせフォームは、ホームページに必須です。なぜならお客様との唯一の接点になるからです。
https://www.kewpie.co.jp/customer/information/form.php
「メールやSNSを使えばいいのでは？」と思われがちですが、漫画喫茶などでは、メールの設定すらしていないことも多いです。メールでは、送れないことも多いんです。またSNSなども、同様に使っていない方には、使うことができません。誰でも、必ず送れるのがお問い合わせフォームなんです。
お問い合わせフォームは、サーバーサイド
「入門者が必ず、つまづくのがお問い合わせフォーム」と記載しましたが、お問い合わせフォームは、Webサーバーとメールサーバーがないと動作しません。
※実は、XAMPPを使えば比較的簡単に、実現できます。詳しくは、ホームページビルダー18 XAMPPでWordPressを参照ください。
サーバーサイトで一番有名なサイトがKent Webさんです。
サーバーサイトプログラムを使えば、実質できないことがなくなります。ショッピングカートも、この技術で実現可能なんです。ぜひ、どんなことができるか「CGIプログラム」の一つ一つを見て確認してください。
Kentさんが一番有名なのは、初心者にもわかりやすい説明と、豊富なサンプルにあります。技術的にPHPの方が楽に実現できますが、他のサイトでここまで素晴らしいのは、いまだに存在しません。
今回のテーマは、「お問い合わせフォームを作成する」ですので、「メールプログラム(フォームメール等)」をクリックします。
今回は、「Post Mail」で実現します。「見本」を見て気に入ったら、実現するような感じです。「詳細」をクリック。
「sample」をクリックしてこれから作るものを確認しましょう。
。
気に入ったら、本ページを熟読します。今回は、私がナビゲートします。
今のホームページは、UTF形式が一般的です。クリックしてダウンロードします。
ダブルクリックして開いたら、デスクトップにでも展開しましょう。
フォルダーの内容
今回は、WordPress上で使いますので、postmail.htmlのbodyタグの内容を固定ページに貼り付けます。
postmail.htmlを変更し、固定ページに貼り付ける
WordPressの場合は、固定ページに貼り付けます。そうでない方は、直接htmlを編集してください。
フォームの内容は、自由に変更できます。今回は、そのまま使いますが、postmail.htmlは、1カ所だけ変更しましょう。action属性をフルパスに変更します。また、今回は、ファイル一式をpostmailフォルダに保存しますので、フルパスは、以下のようになりました。
変更前
<form action="./postmail.cgi" method="post">
変更後
<form action="https://pcmanabu.com/postmail/postmail.cgi" method="post">
※pcmanabu.comは、ご自分のサイト名に変更してください。
init.cgiを変更する
私は、terapadを使って編集しました。今回は、3箇所変更しました
変更箇所1:72行目
前# 送信先メールアドレス 後# 送信先メールアドレス |
変更箇所2:76行目
ここが迷うところだと思います。プロバイダごとに異なります。
前# sendmailのパス【サーバパス】 後# sendmailのパス【サーバパス】 |
変更3 :140行目
前# 送信後の戻り先【URLパス】 後# 送信後の戻り先【URLパス】 |
FFFTPでアップロード
そして、FFFTPを使って「postmail」フォルダをそのままアップロードします。
FFFTPの使い方は、FFFTP環境の移管方法についてを参照ください。
属性変更
入門者の大きな壁が属性変更です。何も考えず無になって行いましょう。今回は、5箇所です。
「postmail」に移動し、「postmail.cgi」を右クリックし、「属性変更」。
指示通り「705」に変更
この操作は、あと4回。合計5回繰り返します。
終わったら動作確認
https://pcmanabu.com/postmail/check.cgi
送信確認
最後に、実際に動作することを確認し、終了です。
https://pcmanabu.com/postmailcgi/ にアクセスし、「送信する」をクリック
確認画面。「送信する >」をクリックし、送信されることを確認します。
メールが届いているか確認
会社側
お客様側
まとめ:お問い合わせフォームは、必ず設置しよう！
この記事をずっと前から書きたかったのですがやっと実現できました。
Webクリエイターなら、とても重要なことですので、実施してください。
マイクロソフト認定トレーナー。専業ブロガーになり1年経過(別名:ひきごもり)。ブロガーなのに誤字脱字王。滑舌が悪いのにYouTuber。『自己紹介』