PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

【shutto小技】入力チェック付きのフォーム変換方法

2014年4月1日 | 森下 奈緒

シェアする

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

shuttoは、JavaScriptを利用して、スマートフォンのブラウザ側で変換を行っているため、変換後にPCページで動作していたJavaScriptが動かない場合がございます。

今回は、入力チェック付きのPCページの変換フォームの変換方法をご紹介します。

【STEP1】

<form>タグごと、スマホレイアウト画面に持ってきて、
編集メニュー「要素の抽出 > HTML構造を保持」をチェック。

shutto
shutto

【STEP2】

デザインはCSSで調整します。 プレビュー画面

shutto

追加したCSS
[html]@current table,
@current tbody,
@current th,
@current tr,
@current td {
display: block;
width: 100%;
border: none;
padding: 0;
background: transparent;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@current th {
text-align: left;
background: #EEEBDC;
}
@current .contact > tbody > tr {
background: #DBF4FB;
}
@current .contact > tbody > tr > td:nth-child(3),
@current .colspan_3 {
clear: both;
background: #fff;
}
@current .img_right {
width: 20%;
float: left;
padding: 8px;
text-align: center
}
@current .border_line,
@current .img_right + td {
float: left;
width: 80%;
padding: 8px 0;
}
@current td.border_line + td,
@current td.colspan_3 {
padding: 8px;
}
@current .input_notice {
padding: 5px 0 0;
}
@current .contact_input02 {
width: 100px;
}
@current #description {
height: 100px;
}
@current .btn_area {
padding: 15px 0;
text-align: center;
}[/html]

全体的なCSSを書く事が難しい場合は、フォームのパーツを個別に持ってきて、個別に「HTML属性を保持をチェック」し、編集機能を使用してデザインしても変換は可能ですが、<form>タグごと持ってきて変換した方が、変換後にフォームが動作しないという問題が起きにくくなります。

STEP3

入力チェックのJavaScriptを追加します。
Chromeのデベロッパーツール(F12で起動)を起動して、必須項目の入力フォームのname属性の値を調べます。調べた値を下記画像の赤色の背景色の箇所に「”,”」で区切り、入力して行きます。
※その他、箇所はそのままコピー&ペーストして、変更しないでください。

shutto

[html]// 必須入力チェック
(function($) {
// 下記列に必須項目のname属性の値を入力する
var requiredInputNames = [
‘mail’,’company’,’name’,’tel’,’description’, ‘privacy_policy_agreement_input’
];

var changeBg = function() {
$(this).css(‘background-color’, $(this).val() ? ‘#fff’ : ‘#faffbd’);
};
$(
$.map(requiredInputNames, function(name) {
return ‘[name="’ + name + ‘"]’;
}).join(‘,’)
).attr(‘required’, ‘required’).each(changeBg).blur(changeBg);
})(Zepto);[/html]

プレビュー画面で動作をご確認ください。

【STEP4】

また、この変換見本に使用しているPCページの送信ボタンは下記の様に onclick属性 でJavaScriptがついておりますので、送信出来ない場合がございます。
その場合のJavaScriptを使用しない送信ボタンの設置方法をお教えします。

[html]<div class="btn_area">
<input type="image" onclick="return check_privacy_policy_agreement_input();" alt="入力内容の確認" src="images/btn_conf_off.png">
</div>[/html]

表示させたくない要素は、編集メニューの「要素の抽出 > 非表示要素」で設定。
セレクタは、Chromeのデベロッパーツール(F12で起動)で調べるか、PCビュー画面で該当の要素にカーソルを合わせて調べてください。「,(カンマ)」区切りで複数設定可能です。

shutto

ボタンのあった位置にテキスト挿入ツールのHTML入力で、JavaScriptを使わないsubmitボタンを挿入します。

shutto

「form=」にはformのidを入れます。
formにidがついていないときは、「form=”formのセレクタ”」で指定することができます。
例)form=”form[name=’form’]”など

[html]<input type="image" src="http://shutto.com/sandbox/demo_form/images/btn_conf_off.png" form="form[name=’form1′]">[/html]

formのname属性の値は、PCページをChromeのデベロッパーツールで参照して、調べます。

shutto

以上で、変換後に入力チェックつきのフォームの変換設定が完成しました。
動作は、プレビュー画面でご確認ください。

※尚、見本のサイトを利用して変換設定を作成しておりますので、実際に送信は行えません。

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階