[BASE]問い合わせページ出力内容

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>