ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【無料】ファイル添付機能を実装!お問い合わせ・登録フォーム作成ソフト – clipmail

2016年9月24日
clipmail

html、cssのコーディングを行っていると、ファイル添付機能付きのお問い合わせフォームを実装する機会があるかと思います。

そんな時に、無料で使えて便利な「clipmail」というソフトがあるので、簡単な使い方とサンプルコードを記載します!

ダウンロード

clipmail02

http://www.kent-web.com/mail/clipmail.html

clipmailのページにアクセスし、開発環境に合った文字コードのファイルをダウンロードします。

スポンサードサーチ

フォルダの配置

clip_mail_fail

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のページ内にある下記の表から確認できます。

clip_mail_permission02

http://www.kent-web.com/mail/clipmail.html

作成したファイルデータをサーバーにアップし、パーミッションの変更を行う。
パーミッションの変更はサーバー上の対象ファイルの上で右クリックして行うことができます。
例えば、clipmail.cgiはパーミッションの数値がデフォルトだと644となっていたので、これを705に変更してあげる。

clip_mail_permission01

以上の設定を行うことで、ファイル添付機能付きのフォームが実装できるかと思います!
最初は少し難しいかもしれないですが、慣れたら簡単にできそうですね♪

関連記事

  • プラグインいらず!WordPressで簡単にサイト内検索機能を実装する方法2017年4月28日 プラグインいらず!WordPressで簡単にサイト内検索機能を実装する方法
  • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日 コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法
  • 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法2019年1月30日 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法
  • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法
  • 【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日 【css】文字(テキスト)にborderをつけるように縁取りをする方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.