【無料】ファイル添付機能を実装！お問い合わせ・登録フォーム作成ソフト – 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サンプルコード

<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>

<li>

</li>

<li>

</li>

<label class="unique" for="fileWrap">添付ファイル</label>

<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>

</form>

解説

<form action="./clipmail-utf/clipmail.cgi" method="post" enctype="multipart/form-data">

1	<form action="./clipmail-utf/clipmail.cgi" method="post" enctype="multipart/form-data">

◾actionのパスをclipmail.cgiファイルに設定
◾enctype=”multipart/form-data”は、データをマルチパートデータとして送信します。フォーム内にファイル送信欄を設置する際には、この記述が必要となります。

<input type="hidden" name="need" value="氏名 ふりがな 同意する"/>
<input type="hidden" name="sort" value="氏名 ふりがな  clip-1 同意する"/>

1 2	<input type="hidden" name="need" value="氏名ふりがな同意する"/> <input type="hidden" name="sort" value="氏名ふりがな clip-1 同意する"/>