【無料】ファイル添付機能を実装！お問い合わせ・登録フォーム作成ソフト – clipmail
2016年9月24日
html、cssのコーディングを行っていると、ファイル添付機能付きのお問い合わせフォームを実装する機会があるかと思います。
そんな時に、無料で使えて便利な「clipmail」というソフトがあるので、簡単な使い方とサンプルコードを記載します！
ダウンロード
http://www.kent-web.com/mail/clipmail.html
clipmailのページにアクセスし、開発環境に合った文字コードのファイルをダウンロードします。
スポンサードサーチ
フォルダの配置
zipを解凍すると、clipmail-utf（clipmail-shift-jis）のフォルダがあるので、フォームを実装するhtmlファイルと同階層にファイルを置きました。（フォルダ階層は任意）
次に、htmlのサンプルコードを見ていきましょう
htmlサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<form action="./clipmail-utf/clipmail.cgi" method="post" enctype="multipart/form-data"> <input type="hidden" name="need" value="氏名 ふりがな 同意する"/> <input type="hidden" name="sort" value=" 氏名 ふりがな clip-1 同意する"/> <ul class="formList"> <li> <label for="name">氏名<span class="required">必須</span></label> <input type="text" id="name" name="氏名"> </li> <li> <label for="kana">ふりがな<span class="required">必須</span></label> <input class="inputTwo" type="text" id="" name="ふりがな"> </li> <li class="fileList"> <label class="unique" for="fileWrap">添付ファイル</label> <label class="file" for="fileWrap"> <input type="file" id="fileWrap" name="clip-1" style="display:none;">ファイルを選択</label> </li> </ul> <div id="doui"><input id="agree" type="checkbox" name="同意する" value="同意する" /><label for="agree" class="width">個人情報取扱について同意する</label></div> <div id="submit-btn"><input type="submit" value="入力内容の確認" id="submit"></div> </form> |
解説
|
1 |
<form action="./clipmail-utf/clipmail.cgi" method="post" enctype="multipart/form-data"> |
◾actionのパスをclipmail.cgiファイルに設定
◾enctype=”multipart/form-data”は、データをマルチパートデータとして送信します。フォーム内にファイル送信欄を設置する際には、この記述が必要となります。
|
1 2 |
<input type="hidden" name="need" value="氏名 ふりがな 同意する"/> <input type="hidden" name="sort" value="氏名 ふりがな clip-1 同意する"/> |
formの直下に上記の2行を追加することで、入力エラーのバリデーション、ソート設定ができる。
◾name=”need” → 必須項目（未入力だとエラー表示）
◾name=”sort” → 確認、エラー画面の表示時に記述順番通り表示してくれるソート機能
◾value=”name属性の値を入れてあげる”
|
1 |
<input type="file" name="clip-1"> |
name=”clip-1”となっているが、このname属性の値が違うと確認画面で文字化けが起きてしまうので要注意！
添付ファイル項目をいくつか作る場合は、name=”clip-2”、、、と続けて書いていけばよい。
スポンサードサーチ
clipmailの設定ファイルの編集
init.cgi
$cf{mailto} = ‘xxx@xxx.xx’;
（送信するメールアドレスを指定します）
$cf{sendmail} = ‘/usr/lib/sendmail’;
（sendmailのパスを指定します。プロバイダの指定するパスを確認してください）
clipmail.cgi , check.cgi
#!/usr/local/bin/perl
clipmail.cgi , check.cgiファイルの一番上に記述（プロバイダで定められたPerlへのパスを指定します）
↑重要！プロバイダ（サーバー業者）によってパスを変更する必要がある！
下記より、主なプロバイダのCGI使用可否の表とsendmail、perlのパスを確認できます。
http://cgi-design.net/cont/provider.htm
パーミッションの変更
パーミッションの変更後の値については、clipmailのページ内にある下記の表から確認できます。
http://www.kent-web.com/mail/clipmail.html
作成したファイルデータをサーバーにアップし、パーミッションの変更を行う。
パーミッションの変更はサーバー上の対象ファイルの上で右クリックして行うことができます。
例えば、clipmail.cgiはパーミッションの数値がデフォルトだと644となっていたので、これを705に変更してあげる。
以上の設定を行うことで、ファイル添付機能付きのフォームが実装できるかと思います！
最初は少し難しいかもしれないですが、慣れたら簡単にできそうですね♪
関連記事
2017年4月28日 プラグインいらず！WordPressで簡単にサイト内検索機能を実装する方法
2019年3月8日 コピペでOK！Vue.jsで『ハンバーガーメニュー』を実装する方法
2019年1月30日 超簡単！jsでカウントダウンタイマー（残り〜日）を設置する方法- 2019年6月17日 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法
2019年1月30日 【css】文字（テキスト）にborderをつけるように縁取りをする方法
