2022.10現在のもの。
仕様
フォーム、確認、完了の3ページを1つのタグで賄っている。
{block:ContactPage}
{ContactContentsTag}
{/block:ContactPage}
活用方法
CSSの独自デザイン用ベースコード。
タグから自動生成される内容の記載なので、HTMLをいじっても本番環境で使用できない。
注意とか
ユニークっぽい内容は伏せ字とか代替テキストに置換。
改行とかを整形済み。
現状における内容なので変わることがあるかもしれない。
フォーム
※エラー文のあるものを追加
<div class="main">
<section class="inquirySection">
<h1>contact</h1>
<p>お問い合わせ内容をご入力ください。</p>
<form action="https://thebase.in/inquiry/*** id="ShopInquiryInquiryForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
<input type="hidden" name="data[_Token][key]" value="***" id="Token***" autocomplete="off">
</div>
<dl>
<dt>お名前<span>(必須)</span></dt>
<dd>
<input name="data[ShopInquiry][name]" type="text" id="ShopInquiryName" required="required">
</dd>
<dd class="error ma-b20"></dd>
<dt>電話番号</dt>
<dd>
<input name="data[ShopInquiry][tel]" type="text" id="ShopInquiryTel">
</dd>
<dd class="error ma-b20"><div class="error-message">電話番号をご確認ください</div></dd>
<dt>メールアドレス<span>(必須)</span></dt>
<dd>
<input name="data[ShopInquiry][mail_address]" type="text" id="ShopInquiryMailAddress" required="required">
</dd>
<dd class="error ma-b20"><div class="error-message">メールアドレスを正しい形式でご入力ください</div></dd>
<dt>件名<span>(必須)</span></dt>
<dd>
<input name="data[ShopInquiry][title]" type="text" id="ShopInquiryTitle" required="required">
</dd>
<dd class="error ma-b20"></dd>
<dt>注文ID</dt>
<dd>
<input name="data[ShopInquiry][entered_unique_key]" type="text" id="ShopInquiryEnteredUniqueKey">
</dd>
<dd class="error ma-b20"></dd>
<dt>お問い合わせ内容<span>(必須)</span></dt>
<dd>
<textarea name="data[ShopInquiry][inquiry]" style="margin-bottom: 0px;" id="ShopInquiryInquiry" required="required"></textarea>
</dd>
<dd class="error ma-b20"></dd>
</dl>
<div class="clear"></div>
<div class="control-panel">
<input id="buttonLeave" class="detail onMouseOver" type="submit" value="確認する">
<input type="hidden" name="mode" value="1to2">
<input type="hidden" name="shopID" value="***">
<input type="hidden" name="unique_key" value="">
<input type="hidden" name="item_id" value="">
<input type="hidden" name="variation_id" value="">
</div>
<div style="display:none;">
<input type="hidden" name="data[_Token][fields]" value="***" id="***" autocomplete="off">
<input type="hidden" name="data[_Token][unlocked]" value="" id="***" autocomplete="off">
</div>
</form>
</section>
</div>
確認
<div class="main">
<section id="inquiryConfirmSection" class="inquirySection">
<h1>contact</h1>
<p>お問い合わせ内容をご確認下さい。</p>
<form action="https://thebase.in/inquiry/***" id="ShopInquiryInquiryForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
<input type="hidden" name="data[_Token][key]" value="***" id="***" autocomplete="off">
</div>
<dl>
<dt><b>お名前</b></dt>
<dd>あああああああああああ <input type="hidden" name="data[ShopInquiry][name]" value="あああああああああああ" id="ShopInquiryName"></dd>
<input type="hidden" name="data[ShopInquiry][tel]" value="" id="ShopInquiryTel">
<dt><b>メールアドレス</b></dt>
<dd>hogehoge@hogehoge.jp <input type="hidden" name="data[ShopInquiry][mail_address]" value="hogehoge@hogehoge.jp" id="ShopInquiryMailAddress"></dd>
<dt><b>件名</b></dt>
<dd>あああああああああああ <input type="hidden" name="data[ShopInquiry][title]" value="あああああああああああ" id="ShopInquiryTitle"></dd>
<input type="hidden" name="data[ShopInquiry][entered_unique_key]" value="" id="ShopInquiryEnteredUniqueKey">
<dt><b>お問い合わせ内容</b></dt>
<dd>あああああああああああ <input type="hidden" name="data[ShopInquiry][inquiry]" value="あああああああああああ" id="ShopInquiryInquiry"></dd>
</dl>
<div class="control-panel">
<input id="buttonLeave" class="detail onMouseOver" type="submit" value="送信する">
<input type="hidden" name="mode" value="2to3">
<input type="hidden" name="shopID" value="***">
<input type="hidden" name="unique_key" value="">
<input type="hidden" name="item_id" value="">
<input type="hidden" name="variation_id" value="">
<input type="hidden" id="grecaptcha" name="grecaptcha" value="***">
</div>
<div style="display:none;">
<input type="hidden" name="data[_Token][fields]" value="***" id="***" autocomplete="off">
<input type="hidden" name="data[_Token][unlocked]" value="" id="***" autocomplete="off">
</div>
</form>
</section>
</div>
完了
<div class="main">
<section id="inquiryCompleteSection" class="inquirySection">
<h1>contact</h1>
<p>
【サイト名】 へお問い合わせを送信いたしました。<br>
返答はご入力頂いたメールアドレスに直接送らせていただきます。<br>
</p>
<a href="【トップページ】">ショップトップへ戻る</a>
</section>
</div>
コメント