まめわざには、日々ユーザー様から機能のリクエストをいただいております。
たくさんのご意見・ご要望の中で、作成が可能で、かつ需要がある機能の開発に優先的に取り組んでおります。
6月末から、これまでいただいたリクエストに沿った改善をいくつか実施しました。この中の問合せフォーム関連のアップデートについてご報告いたします。
これまで問合せフォーム・注文フォーム・予約フォームは、名前・住所・メールアドレス・電話番号・規約など定型の入力欄と、自由入力欄に分かれていました。
今回の更新でこれらが統合され、複数の名前の入力欄を設けたり、順番を自由に入れ替えるなど、完全カスタマイズが可能な問合せフォームとして生まれ変わりました。
注文フォームも、必須の注文内容入力欄（商品選択・支払方法選択・送料計算）以外は自由にアレジンができます。
同じく予約フォームも自由自在です。予約フォームでは宿泊日や人数も必須ではないので、人数の入力欄のない貸切型の宿泊施設に利用するなど、アイディア次第で様々な使い方が可能です。
これまでも細かくカスタマイズができたフォームの装飾の適用範囲を更に拡大し、手軽さは維持しながら、もっとこだわれるように改善しました。
特に、チェックボックス（複数チェック型）・ラジオボタン（単数チェック型）と送信ボタンにも装飾の範囲を広げ、フォーム全体で統一感のあるデザインが実現可能です。
フォームのサイズを統一させると見栄えが向上します。サイズを幅を統一しながらパーセントで指定する機能を追加しました。
サイズの変更は、各フォームの「装飾」から行います。
装飾ウィンドウを表示し、「入力欄」タブの「サイズで」、25％・50％・75％・100％の4種類から選択するとサイズが変わります。
サイズの指定・統一を解除する場合は「自動」を選択します。
今回の改善点を取り入れた雛形を複数追加しました。
雛形をベースに微調整することも簡単ですので、ぜひ好みのデザインを探してみてください。
メールソフト（メーラー）でメールを送信した場合には、「送信済みメール」や「送信履歴」などとして自分が送信したメールが残りますが、問合せフォームでは残りません。そこで、送信した問合せの内容のコピーを送信者にも送る仕組みがあります。
まめわざでは、注文フォームと予約フォームにはそれぞれ「注文確認」「予約確認」としてコピーを送信する仕組みがありましたが、これを問合せフォームにも拡張しました。
の条件を満たした場合に、メール入力欄に入力されたメールアドレスに、送信確認メールが送信されます。
送信確認メールの末尾には「ありがとうメッセージと署名」の内容がそのまま表示されます。
ありがとうメッセージと署名」欄には文字通り「お問合せありがとうございます。後ほどご連絡申し上げます。」といったメッセージと、サイト名・連絡先などの署名を入力しましょう。
予約フォームの「宿泊日・宿泊日数」の設定欄で、これまでは宿泊可能日数の上限が設定できましたが、下限も設定できるように改善しました。
例えば長期滞在向けの施設の場合に、下限7・上限31として「7泊～31泊」の選択肢を提供することも可能です。
また、上記で説明したフォームの入力欄の自由度向上により、「宿泊日・宿泊日数」は必須では無くなりました。
例えば週単位での選択肢を提供したい場合は、「宿泊日・宿泊日数」を向こうにして、「選択欄」を追加して「○○週間」の選択肢を登録することで「1週間～4週間」の選択肢を提供するなど、様々なケースに対応可能です。
下限にはゼロも設定ができます。ゼロにした場合は「0泊（デイユース）」と表記され、宿泊施設の日帰り利用の予約フォームとしてもご利用いただけます。
ネイティブなCSSではcheckboxのスタイルは設定できません。今回は次のような手順でcheckboxとradioをCSS対応化させましたので参考までにご紹介いたします。
| やりたいこと | やる方法 |
|---|---|
| 元のチェック部分（□と○の部分）を非表示にする | input[type="checkbox"]、input[type="radio"]をdisplay:none |
| 代わりのチェック部分（□と○の部分）はCSSで別途用意する | <label><input />テキスト</label> ↓ <label><input /><span></span>テキスト</label> としてチェック描写用にspanを設置 |
| チェック自体はJavascriptではなくCSSで制御する | 「チェックされたinputの隣のspan」を input:checked+span として定義。:checkedは「チェックされた」を表す擬似クラス、プラスは「ある要素の後」を指定する隣接セレクタ |
チェックボックスを表現する方法は様々ですが、装飾機能の中で「文字サイズと連動してサイズを変更する」というまめわざの都合により、フォントで表現することにしました。
色々と試した結果、アルファベットのエル(L)をCSSで反転＆回転させた場合が、各ブラウザで最も綺麗に見えたので採用しました。具体的なCSSは次のようになります。
input[type="checkbox"]:checked+span:after {
content: "L";
-webkit-transform: scale(-1, 1) rotate(-45deg);
transform: scale(-1, 1) rotate(-45deg);
}
content: "L"としてLをCSS側で描写し、scaleで左右反転をさせて、rotateで45度時計回りに回転しました。
一方、ラジオボタンの方は●だけなのでそのまま「●」で再現しました。
<form autocomplete="off" class="myform">
<label><input type="checkbox" name="meal[]" value="夕食" checked="checked" /><span></span>夕食</label>
<label><input type="checkbox" name="meal[]" value="朝食" /><span></span>朝食</label>
<hr />
<label><input type="radio" name="gender" value="男性" checked="checked" /><span></span>男性</label>
<label><input type="radio" name="gender" value="女性" /><span></span>女性</label>
</form>
form.myform input[type="radio"], form.myform input[type="checkbox"] {
display: none;
}
form.myform input[type="radio"]+span, form.myform input[type="checkbox"]+span {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
margin-right: 5px;
border: 1px solid #999999;
vertical-align: middle;
text-align: center;
line-height: 100%;
font-size: 80%;
}
form.myform input[type="radio"]+span {
-webkit-border-radius: 100%;
border-radius: 100%;
}
form.myform input[type="radio"]+span:after, form.myform input[type="checkbox"]+span:after {
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 1em;
height: 1em;
line-height: 100%;
}
form.myform input[type="checkbox"]:checked+span:after {
content: "L";
font-weight: bold;
-webkit-transform: scale(-1, 1) rotate(-45deg);
transform: scale(-1, 1) rotate(-45deg);
}
form.myform input[type="radio"]:checked+span:after {
content: "●";
}
form.myform input[type="radio"]+span, form.myform input[type="checkbox"]+span
の中身を変更することで手軽にカスタマイズができます。
backgroundで背景、borderで枠線、colorで中のチェックや●の色、というように変更可能です。
form.myform input[type="radio"]+span, form.myform input[type="checkbox"]+span
は単に
form.myform label span
のように簡略化することも可能です。
この場合、label内に他のspanが入らないように注意しましょう。入る場合は、チェック再現用のspanにclassを設定する手もあります。
font-familyの指定がない場合は、端末によって見栄えが変わってしまいます。
特に「L」は、毛筆のハネのような部分のあるTimes New Romanのようなフォントだと、チェックボックスっぽさが損なわれるので、必要に応じてfont-familyを指定しましょう。
チェックボックスとラジオボタンはそれぞれlabelタグに内包されているので、これにhoverアクションをつけると見栄えが良くなります。
また、labelタグのfont-sizeを変えることで全体のサイズが変化するので、アクセシビリティも確保できます。
form.myform label {
font-family: "fontello", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
form.myform label {
cursor: pointer;
opacity: 0.7;
-ms-filter: "alpha(opacity=70)";
}
form.myform label:hover {
opacity: 1;
-ms-filter: "alpha(opacity=100)";
}