自社デザインにCMSを組み込む方法

※ご利用の前にお読み下さい

初めてCMSをご利用になられる場合。
初めて当サイトのCMSをご利用になられる場合、必ず試用版を使ってご自身の環境でCMSが動作するか事前に確認しておいて下さい。
上級者向けの解説です。
htmlやcssを把握されているお客様向けの解説になります。スタイルはレイアウトが崩れない為の必要最低限の設定しか入っていませんので、ご自身での調整が必要となります。

下準備

土台のファイルの準備

土台にしたいデザインファイルを複製し、そちらでテストしていきます。
まず、CMSの土台とする為にindex.htmlだけを残し、他のhtmlは削除しておきます。

続いてindex.htmlのファイル名をtop.htmlに変更します。

CMS専用のcssと画像をダウンロード

tp-style.zipをダウンロード＆解凍します。
tp-style.cssはcssフォルダに、noimg.pngはimagesフォルダに移動して下さい。フォルダがない場合は新規で作って下さい。
top.htmlにこのcssの読み込みタグを追加します。
以下は、tp-style.cssをcssフォルダに入れた場合の例です。

試用版からファイルを移動

試用版から以下ファイル・フォルダを持ってきます。
既に当サイトのCMSで運営中の場合は、サーバーからDLしてきたものを使って下さい。

data（フォルダ）
user_data（フォルダ）
index.php（ファイル）
setup.php（ファイル）
.htaccess（ファイル）※.htaccessファイルが見当たらない場合。

CMS用の設定

リンク先の変更

top.htmlを開き、リンク先を試用版に合わせて変更します。
既に当サイトのCMSで運営中の場合は、ご自身の環境に応じて変更して下さい。

<a href="./">ホーム</a>
<a href="./info_list.html">施設のご案内</a>
<a href="./service_list.html">サービスのご案内</a>
<a href="./price_list.html">ご利用料金</a>
<a href="./access.html">アクセス</a>
<a href="./faq_list.html">よく頂く質問</a>
<a href="./company.html">会社概要</a>
<a href="./recruit_list.html">採用情報</a>
<a href="./contact.html">お問い合わせ</a>

トップページ用のタグを記載

top.htmlのメインコンテンツに、以下のコードをコピペして下さい。
<div class="tp-contents">  <h2>{val info/info1/title}</h2> <p>{val info/info1/value}</p>  <p><img src="./user_data/{val info/image1_file}" alt=""></p>    <h2>{val info/info2/title}</h2> <p>{val info/info2/value}</p>  <p><img src="./user_data/{val info/image2_file}" alt=""></p>    <h2>{val info/info3/title}</h2> <p><img src="./user_data/{val info/image3_file}" alt="" class="fl ws"> {val info/info3/value}</p>   <h2>{val info/info4/title}</h2> <p>{val info/info4/value}</p>  <p><img src="./user_data/{val info/image4_file}" alt=""></p>    <h2>{val info/info5/title}</h2> <p>{val info/info5/value}</p>  <p><img src="./user_data/{val info/image5_file}" alt=""></p>    <h2>{val info/info6/title}</h2> <p>{val info/info6/value}</p>  <p><img src="./user_data/{val info/image6_file}" alt=""></p>    <h2>{val info/info7/title}</h2> <p>{val info/info7/value}</p>  <p><img src="./user_data/{val info/image7_file}" alt=""></p>    <h2>{val info/info8/title}</h2> <p>{val info/info8/value}</p>  <p><img src="./user_data/{val info/image8_file}" alt=""></p>    <h2>{val info/info9/title}</h2> <p>{val info/info9/value}</p>  <p><img src="./user_data/{val info/image9_file}" alt=""></p>    <h2>{val info/info10/title}</h2> <p>{val info/info10/value}</p>  <p><img src="./user_data/{val info/image10_file}" alt=""></p>    <section> <h2>PDFファイル</h2> <p>上の「PDFファイル」のタイトルと、このコメントは直接top.htmlに入っています。<br> PDFが不要ならtop.htmlからブロックごと削除して下さい。<br> <a href="./?act=output_file&id={val info/pdf}">{val info/pdf_info/name} (サイズ：{val info/pdf_info/size} Byte)</a></p> </section>  <h2>お知らせ</h2> <dl class="tp-new">  <dt>{val newinfo/rss_date}</dt>  <dd><a href="{val newinfo/url}">{val newinfo/title}{val newinfo/contents}</a></dd>   <dd>{val newinfo/title}{val newinfo/contents}</dd>   </dl> </div>

一覧ページ（service.html）のタグを記載

top.htmlファイルを複製し、ファイル名をservice.htmlに変更します。
service.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}（※横長レイアウト）</h2> <ul> <li>このブロックは「横長レイアウト」です。下の「グリッドレイアウト」とご希望に合う方を使って下さい。</li> </ul> <form name="form1" method="get" action="./"> <input type="hidden" name="act" value="{val form/kind}_list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form> <div class="tp-list-normal">  <div class="tp-list"> <figure> <a href="./?act=info&id={val list/info_id}">  <img src="user_data/{val list/image1_file}" alt="{val list/title}">   <img src="images/noimg.png" alt="{val list/title}">  </a> </figure> <div class="tp-text"> <h4 class="mb1rem"> <a href="./?act=info&id={val list/info_id}">{val list/title}</a> <span>NEW</span> <span>オプション1</span> <span>PDF</span> </h4> <div> <p>{val list/contents}</p> </div> </div> </div>  </div> <h2>{val title}（※カラムレイアウト）</h2> <ul> <li>このブロックは「横並びのカラムレイアウト」です。上の「横長レイアウト」とご希望に合う方を使って下さい。</li> </ul> <div class="tp-list-grid">  <div class="tp-list"> <figure> <a href="./?act=info&id={val list/info_id}">  <img src="user_data/{val list/image1_file}" alt="{val list/title}">   <img src="images/noimg.png" alt="{val list/title}">  </a> </figure> <div class="tp-text"> <h4 class="mb1rem"> <a href="./?act=info&id={val list/info_id}">{val list/title}</a> <span>NEW</span> <span>オプション1</span> <span>PDF</span> </h4> <div> <p>{val list/contents}</p> </div> </div> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </div>

続いて、head内に以下のjavascriptコードも入れます。
<script>  </script>

一覧ページ用（recruit.html）のタグを記載

service.htmlファイルを複製し、ファイル名をrecruit.htmlに変更します。
recruit.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}</h2> <form name="form1" method="get" action="./"> <input type="hidden" name="act" value="{val form/kind}_list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form>  <h3>{val list/title}</h3> <p>{val list/contents}</p> <table class="tp-ta1">  <tr> <th>{val list/info/title}</th> <td>{val list/info/value}</td> </tr>  </table>   <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </div>

一覧ページ用（faq.html）のタグを記載

recruit.htmlファイルを複製し、ファイル名をfaq.htmlに変更します。
faq.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}</h2> <form name="form1" method="get" action="./"> <input type="hidden" name="act" value="{val form/kind}_list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form> <dl class="tp-faq">  <dt>{val list/title}<span>NEW</span></dt> <dd>{val list/contents}<br>  <a href="./?act=output_file&id={val list/pdf}">{val list/pdf_info/name} (サイズ：{val list/pdf_info/size} Byte)</a><br>   <img src="./user_data/{val list/image1_file}" width="200" alt="">  </dd>  </dl>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </div>

一覧ページ用（access.html）のタグを記載

faq.htmlファイルを複製し、ファイル名をaccess.htmlに変更します。
access.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val info/title}</h2> <p>{val info/contents}</p> <table class="tp-ta1"> <caption>アクセス（この見出しは直接access.htmlに入っています）</caption>  <tr> <th>{val info/info1/title}</th> <td>{val info/info1/value}</td> </tr>   <tr> <th>{val info/info2/title}</th> <td>{val info/info2/value}</td> </tr>   <tr> <th>{val info/info3/title}</th> <td>{val info/info3/value}</td> </tr>   <tr> <th>{val info/info4/title}</th> <td>{val info/info4/value}</td> </tr>   <tr> <th>{val info/info5/title}</th> <td>{val info/info5/value}</td> </tr>   <tr> <th>{val info/info6/title}</th> <td>{val info/info6/value}</td> </tr>   <tr> <th>{val info/info7/title}</th> <td>{val info/info7/value}</td> </tr>   <tr> <th>{val info/info8/title}</th> <td>{val info/info8/value}</td> </tr>   <tr> <th>{val info/info9/title}</th> <td>{val info/info9/value}</td> </tr>   <tr> <th>{val info/info10/title}</th> <td>{val info/info10/value}</td> </tr>  </table> <table class="tp-ta1"> <caption>周辺環境（この見出しは直接access.htmlに入っています）</caption>  <tr> <th>{val info/info11/title}</th> <td>{val info/info11/value}  <img src="user_data/{val info/image1_file}" alt="">  </td> </tr>   <tr> <th>{val info/info12/title}</th> <td>{val info/info12/value}  <img src="user_data/{val info/image2_file}" alt="">  </td> </tr>   <tr> <th>{val info/info13/title}</th> <td>{val info/info13/value}  <img src="user_data/{val info/image3_file}" alt="">  </td> </tr>   <tr> <th>{val info/info14/title}</th> <td>{val info/info14/value}  <img src="user_data/{val info/image4_file}" alt="">  </td> </tr>   <tr> <th>{val info/info15/title}</th> <td>{val info/info15/value}  <img src="user_data/{val info/image5_file}" alt="">  </td> </tr>   <tr> <th>{val info/info16/title}</th> <td>{val info/info16/value}  <img src="user_data/{val info/image6_file}" alt="">  </td> </tr>   <tr> <th>{val info/info17/title}</th> <td>{val info/info17/value}  <img src="user_data/{val info/image7_file}" alt="">  </td> </tr>   <tr> <th>{val info/info18/title}</th> <td>{val info/info18/value}  <img src="user_data/{val info/image8_file}" alt="">  </td> </tr>   <tr> <th>{val info/info19/title}</th> <td>{val info/info19/value}  <img src="user_data/{val info/image9_file}" alt="">  </td> </tr>   <tr> <th>{val info/info20/title}</th> <td>{val info/info20/value}  <img src="user_data/{val info/image10_file}" alt="">  </td> </tr>  </table> </div>

一覧ページ用（info.html）のタグを記載

access.htmlファイルを複製し、ファイル名をinfo.htmlに変更します。
info.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}（※横長レイアウト）</h2> <ul> <li>このブロックは「横長レイアウト」です。下の「グリッドレイアウト」とご希望に合う方を使って下さい。</li> </ul> <form name="form1" method="get" action="./"> <input type="hidden" name="act" value="{val form/kind}_list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form> <div class="tp-list-normal">  <div class="tp-list"> <figure>  <img src="user_data/{val list/image1_file}" alt="{val list/title}">   <img src="images/noimg.png" alt="{val list/title}">  </figure> <div class="tp-text"> <h4 class="mb1rem"> {val list/title} <span>NEW</span> <span>オプション1</span> <span>PDF</span> </h4> <div> <p>{val list/contents}</p> </div> </div> </div>  </div> <h2>{val title}（※カラムレイアウト）</h2> <ul> <li>このブロックは「横並びのカラムレイアウト」です。上の「横長レイアウト」とご希望に合う方を使って下さい。</li> </ul> <div class="tp-list-grid">  <div class="tp-list"> <figure>  <img src="user_data/{val list/image1_file}" alt="{val list/title}">   <img src="images/noimg.png" alt="{val list/title}">  </figure> <div class="tp-text"> <h4 class="mb1rem"> {val list/title} <span>NEW</span> <span>オプション1</span> <span>PDF</span> </h4> <div> <p>{val list/contents}</p> </div> </div> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </div>

一覧ページ用（price.html）のタグを記載

info.htmlファイルを複製し、ファイル名をprice.htmlに変更します。
price.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <h2>{val title}</h2> <form name="form1" method="get" action="./"> <input type="hidden" name="act" value="{val form/kind}_list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> </form>  <h3>{val list/title}</h3> <p>{val list/contents}</p> <table class="tp-ta1">  <tr> <th>{val list/info1/title}</th> <td>{val list/info1/value}</td> </tr>   <tr> <th>{val list/info2/title}</th> <td>{val list/info2/value}</td> </tr>   <tr> <th>{val list/info3/title}</th> <td>{val list/info3/value}</td> </tr>   <tr> <th>{val list/info4/title}</th> <td>{val list/info4/value}</td> </tr>   <tr> <th>{val list/info5/title}</th> <td>{val list/info5/value}</td> </tr>   <tr> <th>{val list/info6/title}</th> <td>{val list/info6/value}</td> </tr>   <tr> <th>{val list/info7/title}</th> <td>{val list/info7/value}</td> </tr>   <tr> <th>{val list/info8/title}</th> <td>{val list/info8/value}</td> </tr>   <tr> <th>{val list/info9/title}</th> <td>{val list/info9/value}</td> </tr>   <tr> <th>{val list/info10/title}</th> <td>{val list/info10/value}</td> </tr>  </table>  <h4 class="mb1rem">{val list/info11/title}</h4> <p>{val list/info11/value}<br>  <img src="user_data/{val list/image1_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info12/title}</h4> <p>{val list/info12/value}<br>  <img src="user_data/{val list/image2_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info13/title}</h4> <p>{val list/info13/value}<br>  <img src="user_data/{val list/image3_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info14/title}</h4> <p>{val list/info14/value}<br>  <img src="user_data/{val list/image4_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info15/title}</h4> <p>{val list/info15/value}<br>  <img src="user_data/{val list/image5_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info16/title}</h4> <p>{val list/info16/value}<br>  <img src="user_data/{val list/image6_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info17/title}</h4> <p>{val list/info17/value}<br>  <img src="user_data/{val list/image7_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info18/title}</h4> <p>{val list/info18/value}<br>  <img src="user_data/{val list/image8_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info19/title}</h4> <p>{val list/info19/value}<br>  <img src="user_data/{val list/image9_file}" alt="">  </p>   <h4 class="mb1rem">{val list/info20/title}</h4> <p>{val list/info20/value}<br>  <img src="user_data/{val list/image10_file}" alt="">  </p>    <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </div>

詳細ページ用（service_item.html）のタグを記載

price.htmlファイルを複製し、ファイル名をservice_item.htmlに変更します。
service_item.htmlのメインコンテンツのコードを以下に置き換えます。
<div class="tp-contents"> <article> <h2>{val item/title}</h2> <figure class="tp-c tp-mb30">  <img src="user_data/{val item/image1_file}" id="bukken_image" alt="{val item/title}" class="tp-mb30"><br>   <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" width="70" alt=""></a>　   <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" width="70" alt=""></a>　  </figure> <table class="tp-ta1"> <caption>詳細情報</caption>  <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr>   <tr> <th>資料</th> <td><a href="./?act=get_file&id={val item/pdf}">{val item/pdf_file/name}</a></td> </tr>  </table> </article> </div>

続いて、head内に以下のコードも入れます。
（※price.htmlに入っていたhead内のコードは削除。）
<script> function set_image(img) { document.getElementById('bukken_image').src = img; } </script>

会社概要ページ用（company.html）のタグを記載

service_item.html（※どのhtmlでも構いません）を複製し、ファイル名をcompany.htmlに変更します。
company.htmlのメインコンテンツのコードを以下に置き換えます。
（head内にCMS用のコードがある場合は不要なので、削除しておきます。）
<div class="tp-contents"> <h2>{val info/title}</h2> <p>{val info/contents}</p> <table class="tp-ta1">  <tr> <th>{val info/info1/title}</th> <td>{val info/info1/value} </td> </tr>   <tr> <th>{val info/info2/title}</th> <td>{val info/info2/value} </td> </tr>   <tr> <th>{val info/info3/title}</th> <td>{val info/info3/value} </td> </tr>   <tr> <th>{val info/info4/title}</th> <td>{val info/info4/value} </td> </tr>   <tr> <th>{val info/info5/title}</th> <td>{val info/info5/value} </td> </tr>   <tr> <th>{val info/info6/title}</th> <td>{val info/info6/value} </td> </tr>   <tr> <th>{val info/info7/title}</th> <td>{val info/info7/value} </td> </tr>   <tr> <th>{val info/info8/title}</th> <td>{val info/info8/value} </td> </tr>   <tr> <th>{val info/info9/title}</th> <td>{val info/info9/value} </td> </tr>   <tr> <th>{val info/info10/title}</th> <td>{val info/info10/value} </td> </tr>  </table>  <h3>{val info/info11/title}</h3> <p>{val info/info11/value}</p>   <p><img src="./user_data/{val info/image1_file}" alt=""></p>   <h3>{val info/info12/title}</h3> <p>{val info/info12/value}</p>   <p><img src="./user_data/{val info/image2_file}" alt=""></p>   <h3>{val info/info13/title}</h3> <p>{val info/info13/value}</p>   <p><img src="./user_data/{val info/image3_file}" alt=""></p>   <h3>{val info/info14/title}</h3> <p>{val info/info14/value}</p>   <p><img src="./user_data/{val info/image4_file}" alt=""></p>   <h3>{val info/info15/title}</h3> <p>{val info/info15/value}</p>   <p><img src="./user_data/{val info/image5_file}" alt=""></p>   <h3>{val info/info16/title}</h3> <p>{val info/info16/value}</p>   <p><img src="./user_data/{val info/image6_file}" alt=""></p>   <h3>{val info/info17/title}</h3> <p>{val info/info17/value}</p>   <p><img src="./user_data/{val info/image7_file}" alt=""></p>   <h3>{val info/info18/title}</h3> <p>{val info/info18/value}</p>   <p><img src="./user_data/{val info/image8_file}" alt=""></p>   <h3>{val info/info19/title}</h3> <p>{val info/info19/value}</p>   <p><img src="./user_data/{val info/image9_file}" alt=""></p>   <h3>{val info/info20/title}</h3> <p>{val info/info20/value}</p>   <p><img src="./user_data/{val info/image10_file}" alt=""></p>   <h3>PDFファイル</h3> <p>上の「PDFファイル」のタイトルと、このコメントは直接company.htmlに入っています。<br> PDFが不要ならcompany.htmlからブロックごと削除して下さい。<br> <a href="./?act=output_file&id={val info/pdf}">{val info/pdf_info/name} (サイズ：{val info/pdf_info/size} Byte)</a></p>  </div>

フォーム用（contac.htmlt）のタグを記載

company.html（※どのhtmlでも構いません）を複製し、ファイル名をcontact.htmlに変更します。
contact.htmlのメインコンテンツのコードを以下に置き換えます。
（head内にCMS用のコードがある場合は不要なので、削除しておきます。）
<div class="tp-contents"> <h2>お問い合わせフォーム</h2>  <p>お問い合わせ内容を送信しました。</p>    <p class="tp-color-check">全項目入力必須です。</p>   <p class="tp-color-check">{val message}</p>  <form name="form1" method="post" action="./?act=contact"> <input type="hidden" name="mode" value="{val mode}"> <input type="hidden" name="id" value="{val item/info_id}"> <table class="tp-ta1"> <tr> <th>お名前</th> <td>  {val form/name}   <input type="text" name="name" size="30" class="tp-ws" value="{val form/name}">  </td> </tr> <tr> <th>メールアドレス</th> <td>  {val form/email}   <input type="text" name="email" size="50" class="tp-ws" value="{val form/email}">  </td> </tr>  <tr> <th>メールアドレス(確認)</th> <td> <input type="text" name="email2" size="50" class="tp-ws" value="{val form/email2}"> </td> </tr>  <tr> <th>お問い合わせ詳細 </th> <td>  {val form/comment}   <textarea name="comment" cols="60" rows="8" class="tp-wl">{rval form/comment}</textarea>  </td> </tr> </table> <div class="tp-c">  <input type="submit" value="この内容で送信する">   <input type="submit" value="確認する">  </div> </form>  </div>

設定は以上です

サーバーにアップロードしプレビュー確認をして下さい。
フォームの動作はsetup.phpファイルの設定が必要なので、マニュアルをご覧下さい。
詳しい使い方もマニュアルに解説があります。

自社デザインに老人ホームテーマを組み込む汎用CMS