このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。
shuttoは、JavaScriptを利用して、スマートフォンのブラウザ側で変換を行っているため、変換後にPCページで動作していたJavaScriptが動かない場合がございます。
今回は、入力チェック付きのPCページの変換フォームの変換方法をご紹介します。
【STEP１】
<form>タグごと、スマホレイアウト画面に持ってきて、
編集メニュー「要素の抽出 > HTML構造を保持」をチェック。
【STEP２】
デザインはCSSで調整します。 プレビュー画面
追加した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>タグごと持ってきて変換した方が、変換後にフォームが動作しないという問題が起きにくくなります。
STEP３
入力チェックのJavaScriptを追加します。
Chromeのデベロッパーツール（F12で起動）を起動して、必須項目の入力フォームのname属性の値を調べます。調べた値を下記画像の赤色の背景色の箇所に「”,”」で区切り、入力して行きます。
※その他、箇所はそのままコピー＆ペーストして、変更しないでください。
[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]
プレビュー画面で動作をご確認ください。
【STEP４】
また、この変換見本に使用している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ビュー画面で該当の要素にカーソルを合わせて調べてください。「,（カンマ）」区切りで複数設定可能です。
ボタンのあった位置にテキスト挿入ツールのHTML入力で、JavaScriptを使わないsubmitボタンを挿入します。
「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のデベロッパーツールで参照して、調べます。
以上で、変換後に入力チェックつきのフォームの変換設定が完成しました。
動作は、プレビュー画面でご確認ください。
※尚、見本のサイトを利用して変換設定を作成しておりますので、実際に送信は行えません。
