TOP > 豊作ツールズ > WordPress 豊作フォーム

豊作ツールズwordpress ロゴ

WordPress Plugin 豊作フォーム

本プログラムは、Wordpress のプラグインとして機能します。

ワードプレスを使っていて、なかなかいい感じのフォームプラグインに出会えなかったので、作ってしまいました。
だいぶ荒削りではありますが、ある程度の知識を持っている方であれば、非常に使いやすいのではないか?と思っています。
比較的新しめのガラケー+Ktai Style、スマホでも使えますし、さくらインターネットのレンタルサーバ、共有SSLでも使えます。

ページのトップへ

【実際の利用サイト】

テレホンカード
こちらの問い合わせに使ってます。
ほかにも複数使っていますが、サイトをお伝えできないのが残念です。
ページのトップへ

【ダウンロード】

hsk-form2012051101.zip ← こちらよりダウンロードを行ってください。


【バージョンアップ】

2012/3/30

Version:2012022901 〜 Version:2012033001 の変更点
・確認画面に出力される登録ボタンに IDを振りました。 id="kaku-submit"
・確認画面のURLに #kaku を付与しました。
・登録完了画面のURL に #thanks を付与しました。


【動作環境】

・Wordpress 3.0 以降)
・PHP 5.0 以降(PHP 4 での検証はしていません。)

ページのトップへ

豊作フォーム概要


豊作フォーム(簡易ショップ)は、一つのワードプレス上に複数のフォーム(簡易ショップ)を構築出来るプラグインです。

簡易ショップは PayPal社の決済である「エクスプレスチェックアウト」に対応しています。ので、クレジットカード等の決済も行う事が可能です。
※詳しくは PayPal社にてご確認下さい。

また、クッキーを受け入れる事の出来るガラケー(携帯端末)やスマートフォンにも対応しています。
ガラケーの場合は「Ktai Style」。スマートフォンの場合は「WPtouch」が必要です。

フォームの構築は、エクセルにてフォームのデータや商品データを作成し、そのデータをテキストファイルにコピーペーストする事により、フォームを形成します。

フォームのみでも機能しますが、簡易ショップ機能は、単品の商品販売をサポートします。
加えて、「キャンペーン値引き」「ペイパル(PayPal)決済」がサポートされます。

サンキューメールにも対応しており、メールを配信するタイミングは、
・フォーム登録完了時(登録者向け、管理者向け)
・ペイパル決済完了時(登録者向け、管理者向け)
となります。

データの格納は、WorePress プラグイン「Contact Form 7」を利用した際に利用する WorePress プラグイン「Contact Form to DB Extension」で管理されるデーターベースを使用します。この為、「Contact Form to DB Extension」がインストールされている必要があります。

※豊作フォームの簡易ショップ機能は、買い物かご機能の無いショップシステムとお考え下さい。買い物かご機能が必要な方は、豊作カートをご検討下さいますようお願い申し上げます。
ページのトップへ

使用例


フォームのみ
・通常の問合せフォーム
・ちょっと凝ったアンケートフォーム

物販簡易ショップ
・様々な物販
・セミナーの販売
・チケットの販売


物販ダウンロード販売
・音楽ダウンロード
・動画ダウンロード
・情報商材
ダウンロードの場合は、パスワードを設定した投稿ページや固定ページ(投稿)を設け、ペイパル決済完了時にパスワードの入ったメールを自動配信したり、手動配信したりする事で、ダウンロード販売が可能となります。
※パスワードを設定した画面のパスワードは、定期的に変更される事をお勧めします。
※在庫管理及び集中販売(希少チケット先着順販売等)は未対応です。

ページのトップへ

動作確認


組み合わせ1**********************
WordPress 3.2.1
Contact Form to DB Extension 2.1

組み合わせ2**********************
WordPress 3.3.1
Contact Form to DB Extension 2.2.5

組み合わせ3**********************
WordPress 3.3.1
Contact Form to DB Extension 2.2.6
Ktai Style 2.0.5
WPtouch 1.9.38
さくらのレンタルサーバ共有SSLで動作


にて行いました。

インストール


1.フォルダ「hsk-form」を「/wp-content/plugins/」の中にFTP等で転送します。

2.Contact Form to DB Extension」のプラグインがインストールされていて有効になっているか?確認して下さい。無ければ、インストールし、有効化して下さい。

3.プラグイン「豊作フォーム」を有効化して下さい。

4.Apache が起動しているユーザーから、このディレクトリが読み書き出来るか確認し、読み書き出来るようにして下さい。

5.豊作フォームは $_SESSION を使います。wp-config.php に session_start(); を書き加えて下さい。

6.セキュリティ設定※超重要!!
サーバ上に転送されている hsk-form/hsk-form-ptn/htaccess.txt を
.htaccess という名前に変更して下さい。
各種設定ファイルや、メール配信バックアップを読まれないようにする設定です。
こちらの設定が出来ない、解らない場合は、使用を控えていただいた方が安全です。

※インストール作業等を有償で請け負う事も可能です。info@housaku.net までお問い合わせ下さい。

[書き込み確認方法]
WordPress ダッシュボード左画面「プラグイン」クリック


「豊作フォーム」を選択し、「選択」をクリック


「ファイルを更新」ボタンが表示されていれば大丈夫です。



ページのトップへ

データ構造(Tsv)

フォームデータを形成する為の TSVデータです。
以下、hsk-form/hsk-form-ptn/tmp.xls の Tsv説明 タブに記載されています。
エクセル列名称説明
A名前表示やエラーチェック等に利用する名前
※form typタイプ(J列)に指定されたもの以外が入っている場合、行をそのまま出力します。(HTMLもそのまま出力)
※checkbox,submit,reset,hidden の場合は出力されません。
B入力例入力の例
C続く文字フォームの後に続く文字 年月日等
DidID
Eclass pcpc用クラス
Fclass スマホスマホ用クラス
Gclass 携帯携帯用クラス
Hform typタイプtext, password, radio, checkbox, submit, reset, hidden, select, textarea
Iform nameネーム名称 form_ で始まるようにして下さい
Jform value初期値初期に入っている値(チェックド、セレクテッドの値)
Kform sizeサイズinput のサイズ数字のみ textareaの場合は 数字_数字 = cols_rows となる 40_2 の場合 cols=40 rows=2 となる
Lform maxlength最大文字数最大文字数
Mminilength最小文字数最小文字数
N必須項目必須かどうか 1=必須 0=空OK
Oチェックコード 1=数字のみ
2=数字とハイフンとプラスのみ(電話番号)
3=英数字とハイフン(ドメイン)
4=メールアドレス
5=日本語以外
100=無視
Pセレクトの場合マルチセレクトの場合マルチ選択を許可するか? 1=許可 0=シングル
Qセレクトの場合一つ目に空白を作る値無し用の文言(選択して下さい 等)
R選択項目カンマで区切り複数入力(select , radio)
ページのトップへ

データ構造(Data)

フォームデータを形成を補足したり、商品や決済の情報を格納しておく為のデータです。
A列:項目、B列:値、C列:説明となっています。
以下、hsk-form/hsk-form-ptn/tmp.xls の Data説明 タブに記載されています。
項目説明
data_mymailadd自分のメールアドレス
data_sendmailadd送る先のメールアドレス フォームTsvの form nameネーム を指定
data_parts_orderデータ出力の並び順を指定します。 0=名前 1=必須 2=入力例 3=フォーム要素 4=続く文字 これらをカンマで区切って指定して下さい。これにより、CSSでのデザイン形成の自由度があがります。
data_kaku_ue_msg確認画面上のメッセージ (html可)
data_kaku_sita_msg確認画面下のメッセージ (html可)
data_kaku_submit_value確認画面送信ボタンの文言
data_dberrorstrデータベースコミットエラー時の表示文言 (html可)
data_sendmailbak送信メールのバックアップを保持する 1=保持 0=保持しない 保存の場合 hsk-form/hsk-form-ptn/bak/ を書き込み可能にして下さい。保存する場合、バックアップは溜まりっぱなしになります。定期的に削除を行って下さい。
data_thank_msg送信してもらい、DB格納、メール送信後に表示するメッセージ (html可)
pay_data_paypal_useペイパル決済するか? 1=する 0=しない
pay_data_paypal_idペイパルID
pay_data_paypal_payd固定値「未決済」のまま
pay_data_paypal_sts固定 paypalのステータス記録(空欄のまま)
pay_data_paypal_returnペイパル決済完了後に出力するページURL
pay_data_paypal_cancel_returnペイパル決済キャンセル後に出力するページURL
item_data_itemname商品名
item_data_itemname_title商品名タイトル
item_data_itemdiscrip商品説明文(html可)
item_data_itemdiscrip_title商品説明タイトル
item_data_price販売価格(数値のみ)
item_data_price_title販売価格タイトル
item_data_discount_cordカンマ区切りで複数可能(コード:値引き金額,コード:値引き金額,.....)
item_data_discount_formキャンペーンコードが入ってくる フォームTsvの form nameネームを指定
item_data_number_format通貨記号(¥ 以外で試した事はありません。)

フォームを設置する

豊作フォームはテキストで作成されたデータを元に、フォームを形成したりエラーチェック等を行ったりします。準備するファイルは以下になります。

ファイル名用途
フォーム名称Tsv.txtフォームその物の名称や挙動を定義した tsv ファイルです。
フォーム名称Data.txtフォームの補足や商品、決済情報を定義した tsv ファイルです。
フォーム名称Css.txtフォーム画面、確認画面、エラー表示、サンキュー画面のデザインを形成する CSS です。
フォーム名称Sent.txt送信完了時に登録者へ送られるメールの雛形です。
フォーム名称SentMb.txt送信完了時に登録者へ送られるメールの雛形です。(ガラケー向け)
フォーム名称SentSp.txt送信完了時に登録者へ送られるメールの雛形です。(スマホ向け)
フォーム名称Get.txt送信完了時に管理者へ送られるメールの雛形です。
フォーム名称SentPayPal.txtPayPal決済完了時に登録者へ送られるメールの雛形です。(PayPal 決済 を使わない場合は不要)
フォーム名称SentPayPalMb.txtPayPal決済完了時に登録者へ送られるメールの雛形です。(PayPal 決済 を使わない場合は不要 ガラケー向け)
フォーム名称SentPayPalSp.txtPayPal決済完了時に登録者へ送られるメールの雛形です。(PayPal 決済 を使わない場合は不要 スマホ向け)
フォーム名称GetPayPal.txtPayPal決済完了時に管理者へ送られるメールの雛形です。(PayPal 決済 を使わない場合は不要)

1.フォームの名前を決めます。今回は「sample」とします。(名前はアルファベットでお願いします。)

2.hsk-form/hsk-form-ptn/tmp.xls をダウンロードして開きます。(tmp.xls はこの場所に無くても大丈夫です。ダウンロード後は個の場所から削除して頂いても結構です。)

3.タブ「TSV説明」「Data説明」に従いフォームに必要なデータを作ります。タブ「sampleTsv」と「sampleData」があるので、そちらを参考にして下さい。
※名称(フォームのネーム)には予約語があるので、form_**** などと、頭を form_ として下さい。

4.データファイルを作成、配置します。

sampleTsv.txt」「sampleData.txt

を作成します。文字コードは「UTF-8」です。

sampleTsv.txt」には、エクセルのタブ sampleTsv のデータをエクセルからコーピーして貼付けます。

sampleData.txt」には エクセルのタブ sampleData のデータをエクセルからコーピーして貼付けます。

※サンプルで準備されているそれぞれの一行目は説明行なので、コピーしないようにして貼付けて下さい。

出来上がったファイルを hsk-form/hsk-form-ptn/ に ftp 等で配置します。

5.サンキューメールの雛形を作成します。

sampleSent.txt」「sampleSentMb.txt」「sampleSentSp.txt」「sampleGet.txt
PayPal 決済を利用する場合は以下も作成
sampleSentPayPal.txt」「sampleSentPayPalMb.txt」「sampleSentPayPalSp.txt」「sampleGetPayPal.txt

を作成します。文字コードは「UTF-8」です。

文章は自由に書いて下さい。
文章には差し入れが出来ます。文中に {} の中に Tsv の名称(フォームのネーム)を入れた差し替えようの記号をいれる事により、文字が置き換わります。

sampleTsv の場合は
{form_syu}で「お問い合わせ種別」 {form_name}で「お名前」
{form_mail}で「メールアドレス」
等にそれぞれ置き換わります。

{date} は予約語となっており、メールを送信した時間が自動で入ります。
{data_mymailadd}は Data で記述した data_mymailadd のメールアドレスに自動で置き換わります。

ファイルの作成が完了したら hsk-form/hsk-form-ptn/ に配置します。
※デザインを後から調整する場合、空の フォーム名Css.txt も同時に配置をしておいて下さい。

6.サイトで公開
固定ページ(投稿)を作成し、フォームを配置したい箇所に

[hsk_form ptn="フォーム名"]

を記述します。今回は sample なので [hsk_form ptn="sample"] を記述します。

7.フォームから登録があると、メールの配信とデータベースへの記録が開始されます。

ページのトップへ

デザイン


hsk-form/hsk-form-ptn/ に フォーム名Css.txt を配置します。
それぞれ HTML に従いスタイルシートを作成して下さい。HTMLは以下のルールで出力されます。

フォーム表示時:商品系の HTML
<div class='hsk-form-items'>
<div class='hsk-form-item-name'>商品名タイトル</div>
<div class='hsk-form-item-name-data'>商品名</div>
<div class='hsk-form-item-price'>販売価格タイトル</div>
<div class='hsk-form-item-price-data'>販売価格</div>
<div class='hsk-form-item-disc'>商品説明タイトル</div>
<div class='hsk-form-item-disc-data'>商品説明</div>
</div>

フォーム表示時:フォームの HTML
<div class='hsk-form'>
<form>
各種要素が入ります
</form>
</div>

各種要素
<div class="hsk-form-tsv-[<フォームの形状>]-[<TSVのクラス>]">
各項目
</div>
となります。[<TSVのクラス>]はTSVを編集した時の class になります。
各項目
TSVデータの
<div class="hsk-form-tsv-nam">名前</div>
<div class="hsk-form-tsv-null">必須</div>
<div class="hsk-form-tsv-rei">入力例</div>
<div class="hsk-form-tsv-cont">フォーム要素</div>
<div class="hsk-form-tsv-tuzuku">続く文字</div>
が入ります。

それぞれの表示順番を入れ替える場合は、
0=名前 1=必須 2=入力例 3=フォーム要素 4=続く文字 とし、
フォーム名Data.txt の data_parts_order にて番号指定をして下さい。

※フォーム要素には TSVのID が付与されます。
※hiddenn はフォーム要素のみ出力します。
※submit,reset は、フォーム要素以外は div のみ出力されます。名前等が入っていても出力されません。

行をそのまま出力する場合は、div タグを付与せずに出力しますので、ご自身で div タグを フォーム名Tsv.txt に記述して下さい。

フォーム表示時:入力エラーの HTML
<div class="hsk-form-err">
<ul>
<li>エラー内容</li>
上記をループ
</ul>
</div>

確認表示時:商品系の HTML
フォーム表示時と同じHTMLが出力されます。
※キャンペーンコードが確認された場合「販売価格」の部分が以下になります。
<s>販売価格</s><br/>
キャンペーンコード[<入力されたキャンペーンコード>]を確認しました。<br/>
<販売価格タイトル><br/>
<値引き後販売価格>になります。

確認画面時:確認表示部分の上 HTML
フォーム名Data.txt data_kaku_ue_msg に値が入っていた場合、
<div class="hsk-form-data_kaku_ue_msg">確認画面上のメッセージ</div>

確認画面時:入力内容の確認 HTML
<div class="hsk-form-kaku">
<div class="title">名称</div>
<div class="value">入力内容</div>
上記をループ
</div>

確認画面時:確認表示部分の下 HTML
フォーム名Data.txt data_kaku_sita_msg に値が入っていた場合、
<div class="hsk-form-data_kaku_sita_msg">確認画面上のメッセージ</div>

確認画面時:送信ボタン HTML
<div class="hsk-form-kakunin">
<form>・・・</form>
</div>

サンキュー画面時:サンキューメッセージ HTML
<div class="hsk-form-thank-msg">
サンキューメッセージ(フォーム名Data の data_thank_msg)
</div>

サンキュー画面時:データベースエラー HTML
<div class="hsk-form-errmsg">
エラーメッセージ(フォーム名Data の data_dberrorstr)
</div>

サンキュー画面時:ペイパルボタン HTML
<div class="hsk-form-paypalbtn">
ペイパルボタン要素
</div>

ページのトップへ

運用


データの閲覧について
登録されたデータを見るには、管理画面左メニュー「豊作フォーム」の下にある「フォームデータ」にアクセスして下さい。

「* select a form *」に利用していて、データが入っているフォーム名が一覧表示されます。見たいフォームを選択して下さい。

「Submitted」は無視をして下さい。
「commiteYMD」がフォームを送信された日時です
「formKey」がフォームを一意に特定する値です
paypal等との照合にお使い下さい。
その他は フォーム名Tsv.txt で指定した「form nameネーム」部分がカラム(項目)名となります。

「豊作フォーム」の下にある「ショートコード作成」を利用すると、便利な抽出等が出来るようです。

このデータ閲覧部分は「Contact Form to DB Extension」の機能となります。詳細な使い方は Contact Form to DB Extension 等を参考にして下さいますようお願い申し上げます。
メールについて
フォーム名Data.txt の data_sendmailbak に 1 を指定した場合、送信メールのデータがバックアップされます。何らかの障害でメールが配信されなかった場合は、hsk-form/hsk-form-ptn/bak/ の中を確認して下さい。

※メールデータは溜まる一方です。定期的に削除して下さい。


ページのトップへ

共有SSL での利用


フォーム なので、SSL 配下での利用されたいと思います。
レンタルサーバの共有SSLでテストしてみました。


さくらインターネットレンタルサーバ編

実際にやってみたサイトは http://www.telephonecard.info/ になります。テスト時はpayPal もテストしましたが、今はPayPalは外してあります。

1.共有SSLの設定
さくらインターネットで共有SSLを使える様にホストのセッティングをして下さい。
2.共有SSLアクセス確認 設定後、共有SSL でアクセスが出来るか?確認を行う。
https://secure1151.sakura.ne.jp/www.telephonecard.info/
にアクセス。

3.プラグイン有効化
プラグインを有効化します(既にしていれば不要)
Contact Form 7 to Database Extension 2.2.6 インストール 有効化
豊作フォームインストール 有効化

4.フォームを作成
上記説明にて作成して下さい。

5.固定ページを3種類作成
フォーム用ページ
https://secure1151.sakura.ne.jp/www.telephonecard.info/toi/

PayPal決済完了ページ
https://secure1151.sakura.ne.jp/www.telephonecard.info/thanks/

PayPal決済キャンセルページ
https://secure1151.sakura.ne.jp/www.telephonecard.info/cancel/

フォーム用ページにショートコードを記述
[hsk_form ptn="test"]


6.パーマリンク設定
カスタム構造:/%category%/%postname%/

7.カスタムメニュー設定
自動で出てくるリンク先は http なので、問合せのリンク先をカスタムメニューで作成し直します。
https://secure1151.sakura.ne.jp/www.telephonecard.info/toi/

※カスタムメニューに対応していないテーマもあるので、その場合はファイルに直書いてください。

7.IEのセキュリティ警告問題
IEだとSSLじゃないファイルが含まれている等の警告が出ますので、どや!?共有SSLでWordPressプラグインContact Form 7を使う方法 等を参考に、問合せページ用の「page-ポスト番号.php」を作成いただき、インクルードしているファイル等を共有SSLから呼び出すようにして下さい。

8.バックアップのメールに関して
スグバックアップメールがFTPクライアントで見えない場合があります。この場合、FTPクライアントにてリフレッシュ等をしていただくと見える様になります。

9.メール配信に関して
さくらインターネットのレンタルサーバサービスで作成出来るメールアドレスで、送信アドレスを指定するのであれば問題ありませんが、別のメールアドレスを送信アドレスにあてる場合、DNSに spf 認証を書き入れないと、メールが配信されない事があります。ご確認下さい。


ページのトップへ

その他


ライセンス
「豊作フォーム」のライセンスは GPL v2 とします。
著作権は「豊作プロジェクト株式会社」が保有します。ただし、ソースコードのいくつかの部分はWordPress の本体コードを流用したものがあり、その部分は WordPress 開発者が著作者です。


注意事項
「豊作フォーム」を利用した事によるあらゆるトラブルや障害に関して、豊作プロジェクトでは一切の責任を負いかねます。ご自身の判断にてご利用下さい。

ページのトップへ

Classic ASP.AID レガシー ASP

Classic ASP に特化したサポートサービス

Classic ASP.AID レガシー ASP
電子書籍出版サービス

豊作パブリッシング

LOOK
ショッピングカート ASP サービス の OEM

ショッピングカート ASP サービス の OEM

ショッピングカート ASP サービス の OEM
豊作ツールズ

豊作プロジェクトの便利ツール提供

LOOK