コーディングの勉強

初心者でも簡単にできる!サイトにお問い合わせフォーム(メールフォームプロ)を実装する手順

こんにちは。mito(@mito_works)です。

今回は、サイトにお問い合わせフォームを設置する簡単な方法をまとめます。
お店やサービスサイトを作る際にお問い合わせフォームが必要なもの、多いと思います。

初めてお問い合わせフォームを設置したことを振り返るとそれほど難しくない、むしろ簡単だったのですが、初学者ならではの躓きポイントがありました。

mito
mito
私が実際につまずいたところを中心にまとめます。

使用したお問い合わせフォーム

今回は、Perlで書かれたアンケートフォームや応募フォームとして無料で利用できるメールフォーム(エントリーフォーム)のCGIを使いました。

momo
momo
レスポンシブ対応もされているよ!

設定1 : ダウンロード

コード一式、このページのダウンロードボタンよりダウンロードします。

設定2 : 設置したい場所にフィルダを作成し、ファイルをアップロードする

設置マニュアルに沿って設定していきます。

まずは、設置したい場所にフォルダを作成。
mailformというフォルダの配下に以下3つのフォルダとフォルダの中身を配置しました。

  • iplogs
  • mailformpro
  • mfp.statics

設定3 : パーミッション(ファイル属性を設置する)

パーミッション設定は非常に重要な設定です。設定を忘れてしまうと動きません!!

パーミッションとは?
ファイルごとに定義された、読み出し・書込みなどのアクセスに対する許可情報。
通常は、ファイルシステム内のファイルごとに、特定のユーザーやグループに対してアクセス権を設定しています。これによって、ユーザーごとのファイルシステムの見え方に影響を与え、ファイルシステムに対する変更を制限することができるものです。

mito
mito
セキュリティの面から重要な設定なんですね。
momo
momo
レンタルサーバーごとに異なるけれど、レンタルサーバーのコントロールパネルから設定するよ!
Xserverの場合

インフォパネルのご契約一覧を表示

ファイル管理を押し、ファイル一覧を表示します。

パーミッションの設定

マニュアルP27の以下を参照しながらパーミッションを設定します。


例えばmailformproのフォルダにパーミッション755をつける場合は以下です。

mailformproのファイル名右のチェックボックスにチェックを入れる

ファイル操作のパーミッション変更ボタンを押す

パーミッションを755へ変更し、パーミッション変更ボタンを押す

サーバによってはパーミッションの反映に半日以上かかることもあるので気長に待ちましょう!

設定4 : example.htmlにアクセス

正常に動作していますという旨のメッセージが出ればOKです。

設定5 : config.cgiの編集

必要な内容に合わせて編集します。

設定の注意点

基本的に説明書に忠実に進めると間違い無いのですが、途中エラーも出ないけれど動かなくて困ったのは以下の2つが原因でした。

  • フォルダ構成を変更したことによりパーミッションの設定が消えた
  • htmlの修正について変更の反映に半日以上かかる場合がある

 

mito
mito
特にthanks.htmlは反応が遅く変更の反映に半日かかりました。

皆さんもぜひ設定してみてください!

ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。