Webフォームのテンプレートとなるレイアウト
その中でいくつか注意点がありますので、お気を付けて下さいませ。
【必須な情報】
Webフォーム上で必要なJavaScriptおよびCSSがございます。以下のファイルは書き換えず、テンプレート内のヘッダーなどへ貼り付けてください。
<script src="../saaske/js/jquery.js"></script>
<script src="../saaske/js/jquery-ui.js"></script>
<script src="../saaske/js/jquery/jquery.ui.datepicker-ja.min.js"></script>
<script src="./js/jquery.my.common.js"></script>
<link rel="stylesheet" href="../saaske/css/jquery-ui.css">【差し込みタグ】
Contents以外は任意ですが、設定した方が利便性・カスタマイズ性が向上します。- $Title$ : 「公開ページ設定」の「ページタイトル」が挿入されます。
- $Script$ : 「公開ページ設定」の「ヘッダー情報」が挿入されます。
- $Header$ : 「公開ページ設定」の「ヘッダーデザイン」が挿入されます。
- $Footer$ : 「公開ページ設定」の「フッターデザイン」が挿入されます。
- $Contents$ : 「項目設定」で設定したフォームが挿入されます。必須。
【必須項目のCSS】
以下のCSSを追加する事で、必須項目に赤い米印が付きます。CSSが分かる方であれば自由に調整が可能です。
<style>
.required:after {
color: red;
content: "※";
display: inline-block;
margin-left: 5px;
}
</style>【jQueryについて】
$が全て#に置換される仕様となっております。そのため、jQueryを書く際は$ではなく以下のようにjQueryで表記してください。
<script>
jQuery(function() {
var ver = jQuery.fn.jquery;
var txt = "jQuery (" + version + ")";
console.log(txt);
});
</script>テンプレートの例
下記HTMLはWebフォームのテンプレートとなります。参考にお使い頂けますと幸いです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 公開ページ設定 ページタイトル(Title) が入ります -->
<title>$Title$</title>
<!-- ここから システム用記述 削除不可 -->
<script src="../saaske/js/jquery.js"></script>
<script src="../saaske/js/jquery-ui.js"></script>
<script src="../saaske/js/jquery/jquery.ui.datepicker-ja.min.js"></script>
<script src="./js/jquery.my.common.js"></script>
<link rel="stylesheet" href="../saaske/css/jquery-ui.css">
<!-- ここまで システム用記述 削除不可 -->
<!-- ここから デザイン調整用のCSS（削除や編集をして問題ありません） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
<link rel="stylesheet" href="https://files.saaske.com/document/webform/template/style.css">
<!-- ここまで デザイン調整用のCSS -->
<!-- 公開ページ設定 ヘッダー情報(Script) が入ります -->
$Script$
</head>
<style>
/* 必須項目のCSS（必要に応じて記入してください） */
.required {
color: #dc2626;
}
.required:after {
content: '※';
display: inline-block;
margin-left: 0.5rem;
}
</style>
<script>
// 【注意】jQueryを利用する場合は$ではなくjQuery表記をしてください。
jQuery(function() {
var ver = jQuery.fn.jquery;
var txt = "jQuery (" + ver + ")";
console.log(txt);
});
</script>
<body>
<header>
<div>
<a href="https://saaske.com/">
<img src="https://files.saaske.com/document/webform/template/logo.svg" alt="サスケ">
</a>
</div>
<!-- 公開ページ設定 ページタイトル(Title) が入ります -->
<h2>$Title$</h2>
<!-- 公開ページ設定 ヘッダーデザイン(Header) が入ります -->
$Header$
</header>
<main>
<!-- WEBフォーム本体(Contents)が入ります 削除不可 -->
$Contents$
</main>
<footer>
<!-- 公開ページ設定 フッターデザイン(Footer) が入ります -->
$Footer$
<p>Copyright(C) Interpark., Co. Ltd. All rights reserved.</p>
</footer>
</body>
</html>ぜひ、ご活用下さい。
