連携フォームのデザインサンプルとなります。
*このページで使用している各class、id名はエルセグの仕様変更等に伴い利用できなくなる可能性がございます。あらかじめご承知おきください。
*本記事は2021年9月7日時点で動作を確認しております。

動作イメージ

下記のような注文番号ページの説明文を設置することが出来ます。

画像はそのままご利用頂いても結構ですし、皆様でご自由に変更頂いて問題ございません。

設置方法

連携フォーム作成画面にて「HTML」を選択し、サンプルコードを張り付けてご利用ください。
！必ず事前に動作の確認をお願いいたします！

サンプルコード

カラーコード等は皆様のショップに合わせた配色に変更頂いて問題ございません。
※ＬＩＮＥ風の緑カラーで作成していますので、そのままでもご利用いただけます。

<div class="titlebar">
    お得意さま限定クーポンの受け取り方 <img draggable="false" role="img" class="emoji" alt="🥰" src="https://s.w.org/images/core/emoji/13.0.1/svg/1f970.svg">
</div>
<p class="description">いつも当店をご利用頂きありがとうございます。<br>いつもご愛顧頂いているお礼に、お得様限定クーポンをご用意いたしました。これまで当店で注文いただいた際の「注文番号」をご入力いただくと、最大級にお得なクーポンを差し上げています<img draggable="false" role="img" class="emoji" alt="🥰" src="https://s.w.org/images/core/emoji/13.0.1/svg/1f970.svg"></p>
<div class="coupon">
    <img src="/image/coupon.png">
</div>
<div class="data_wrap">
    <h3 class="subtitle">[ 1 ] 当店の注文履歴を開く<img draggable="false" role="img" class="emoji" alt="😄" src="https://s.w.org/images/core/emoji/13.0.1/svg/1f604.svg"></h3>
    <div class="inline-block image_block">
        <img src="/image/order_id_1.png">
    </div>
    <div class="inline-block">
        <a href="https://sp.order.my.rakuten.co.jp/?openExternalBrowser=1">楽天の購入履歴ページ</a>にアクセスし、当店の過去の注文履歴から「注文詳細」をクリック<br>
        <div class="link_btn">
            <a href="https://sp.order.my.rakuten.co.jp/?openExternalBrowser=1"> </a>
            注文履歴ページへ
        </div>
    </div>
</div>
<div class="data_wrap">
    <h3 class="subtitle">[ 2 ] 当店の注文番号をメモ<img draggable="false" role="img" class="emoji" alt="👍" src="https://s.w.org/images/core/emoji/13.0.1/svg/1f44d.svg"></h3>
    <div class="inline-block image_block">
        <img src="/image/order_id_2.png">
    </div>
    <div class="inline-block">
        【注文番号】と表示されている数字をコピー<br>
    </div>
</div>
<div class="data_wrap">
    <h3 class="subtitle">[ 3 ] 注文番号を入力<img draggable="false" role="img" class="emoji" alt="❗" src="https://s.w.org/images/core/emoji/13.0.1/svg/2757.svg"></h3>
    <div class="inline-block image_block">
        <img src="/image/order_id_3.png">
    </div>
    <div class="inline-block">
        このページにある【注文番号】の入力欄に、先ほどコピーした注文番号を入力して、確定ボタンをクリック<br>
    </div>
</div>
<div class="data_wrap">
    <h3 class="subtitle">[ 4 ] クーポンゲット<img draggable="false" role="img" class="emoji" alt="✨" src="https://s.w.org/images/core/emoji/13.0.1/svg/2728.svg"></h3>
    <div class="image_block">
        <img src="/image/order_id_4.png">
    </div>
    <div class="thanx_box">
        こちらで完了です。<br>表示されたクーポンを取得してください。<br>
        引き続き当店をよろしくお願いいたします<img draggable="false" role="img" class="emoji" alt="😌" src="https://s.w.org/images/core/emoji/13.0.1/svg/1f60c.svg">
    </div>
</div>
<style>
    .form-description{
        width:100% !important;
        margin:0 auto 9.5rem auto !important;
    }
    .header{
        display:none !important;
    }
    .image{
        margin:0 auto !important;
        line-height:0.9rem;
    }
    .image img{
        border-radius:0 !important;
        width:100% !important;
    }
    .OrderForm{
        height:9rem;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        box-shadow: 0 -1px 3px rgb(0 0 0 / 30%);
        width: 100% !important;
        padding: 1rem;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .OrderForm input{
        width:75%;
        margin:0 auto .5rem auto;
        height:2rem !important;
        padding:.75rem;
    }
    .OrderForm button{
        width:40%;
        height:3rem !important;
        line-height:3rem;
        padding:0;
        margin:.5rem auto 0 auto;
    }
    .titlebar{
        background-color:#00a23c;
        color:#fff;
        height:3rem;
        line-height:3rem;
        margin-bottom:.5rem;
        font-size:1.25rem;
        font-weight:700;
        margin-top:-0.2rem;
    }
    .data_wrap{
        font-size:0.9rem;
        color:#333;
    }
    .inline-block{
        display:inline-block;
        vertical-align:top;
        width:48%;
        text-align:left;
    }
    .image_block{
        border-right:1px dotted #ccc;
    }
    .image_block img{
        width:97% !important;
        margin:0 auto;
    }
    .subtitle{
        text-align:left;
        border-bottom:1px solid #00a23c;
        border-left:5px solid #00a23c;
        margin:1rem;
        padding:.5rem;
    }
    p{
        margin:0 auto;
    }
    .thanx_box{
        margin:2rem auto;
    }
    .strong{
        font-weight:700;
        font-size:1.75rem;
    }
    .emoji{
        width:1rem;
    }
    .link_btn{
        line-height:2rem;
        padding:0.5rem 1rem;
        background-color:#00a23c;
        border-radius:10px;
        color:#fff;
        position:relative;
        margin:2rem auto;
        text-align:center;
        width:70%;
    }
    .link_btn a{
        position:absolute;
        margin:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
    p.description{
        line-height:1.5rem;
        margin:1.25rem auto;
    }
    .coupon img{
        width:70% !important;
        margin:0 auto;
    }
</style>