2016年3月13日

荷物のお問い合わせフォームを設置する

確定申告の期限前のこの時期は、個人事業主の皆さんはぐったりされている方も多いことでしょう。
理由は様々でしょうけど、簿記を分からないなりに、自分でやってる方が結構多いですよね。
時間は掛かりますが、慣れれば、仕訳も書類作成もできるようになりますし。

とはいえ、書類作成に多大な心理的負担がかかっている方は、税理士さんに投げちゃったほうがいいんじゃないかなぁと思います。コストも大したことありませんし。

ということで、私もこの時期はなにかと忙しくしておりますが、あと少しの辛抱です。

さて今回。
配送会社のWebサイトにある、荷物のお問い合わせフォームを、カラーミーショップに設置する方法についてです。
完成イメージはこんな感じ。うちにも付けたいなと思っていただけたら幸いです。




0. HTMLのformタグについて


まず、formタグについてです。<FORM>-HTMLタグリファレンス
デザイン関連のHTMLは理解しているけど、formタグは知らないという方、結構多いと思います。
サーバーとのやりとりがイメージしにくいのか、少々とっつきにくい印象です。

ということで、ざっくりとした説明。
1. type="submit"となっているところのボタンを押すと 
2. <form>~</form>内の、inputタグにあるname属性とvalue属性の値をサーバーに送って
3. PHPやCGIなどで処理して、結果を表示

荷物のお問い合わせフォームを設置すること自体は難しくありません。
配送会社のWebサイトから<form>~</form>内の必要項目をコピペすれば、 カラーミーショップにも設置できるという話です。


1. ヤマト運輸の「荷物のお問い合わせフォーム」


クロネコヤマトの荷物お問い合わせシステムから一部抜粋
<form method="post" action="/cgi-bin/tneko" style="margin: 0px;">
<center>
<table border="0" width="no">
<tr>
 <td align="left">詳細情報 
  <input type="radio" name="number00" value="1" checked>あり
  <input type="radio" name="number00" value="2">なし
 </td>
 <td align="center">
  <input type="submit" name="sch" value="お問い合わせ開始">
  <input type="button" value="  クリア  " onclick="javascript:clearText(this.form,10);">
 </td>
</tr>
</table>
</center>
<hr width="750">
<table class="ichiran">
<tr>
 <th><br></th>
 <th colspan="2" class="lf">
  <font color="#990000" size="3"><b>お問い合わせ伝票番号</b></font>
 </th>
 <th><font color=#990000 size=3 class="ct">日付</font></th>
 <th><font color=#990000 size=3 class="ct">配達状況</font></th>
</tr>
<tr>
 <td><br></td>
 <td colspan="4"><font size="2"><span style="FONT-WEIGHT:NORMAL;">枠の中にお問い合わせ伝票番号を入力してください。<br><br></span></font></td>
</tr>
<tr align="middle">
 <td class="number">
  <font size="3"> 1件目</font>
 </td>
 <td class="input">
  <input name="number01" size="20" maxlength="14">
 </td>
 <td class="denpyo"><br></td>
 <td class="hiduke"><br></td>
 <td class="ct"><br></td>
</tr>
(以下、省略)
</form>


必要な箇所はマーカー部分の5ヶ所です。
カラーミーショップで動かすために、少し手を入れます。
<form  method="post" action="http://toi.kuronekoyamato.co.jp/cgi-bin/tneko" style="margin: 0px;">
  <input type="hidden" value="1" name="number00">
  <input maxlength="14" size="20" name="number01">
  <input type="submit" name="sch" value="お問い合わせ開始">
</form>
送信先のプログラム名はフルパスで指定します。

本家にあったラジオボタンは不要なので、number00=1 固定で送ります。hiddenは、Webサイト上に表示はしないが送信する必要がある場合。

3行目は、type="text"が省略されています(type属性の値が"text"の場合は省略可能)。テキスト入力エリアが表示されます。
入力した数字がname属性の値とセットになって、number01=314159265358という具合にサーバーに送られます。

4行目のtype属性の値"submit"は、ボタンを表示します。実行、送信、検索などなど。この例では「お問い合わせ開始」というラベルがついています。
ボタンを押すと、action属性で指定したスクリプトが実行されます。

5行目。閉じタグ、重要ですね。

最後にCSSでデザインを指定すれば完成。


2. おわりに


先にも書きましたが、デザイン関連のHTMLは理解しているけど、formタグは知らないという方には、レベルアップのよい機会ではないでしょうか。
formタグは、カラーミーショップでも、「検索窓」や「カートに入れる」ボタンで使われています。このあたりをいじっていると、避けては通れない知識だと思います。

ヤマト運輸以外も、やりかたは同じです。