連携フォームのデザインサンプルとなります。
電話番号連携に対応したHTMLソースコードとなります。
*このページで使用している各class、id名はエルセグの仕様変更等に伴い利用できなくなる可能性がございます。あらかじめご承知おきください。
*本記事は2022年2月2日時点で動作を確認しております。
コピーに失敗する場合はこちらをお試しください。
<div class="titlebar">
<img draggable="false" role="img" class="emoji" alt="✨" src="https://s.w.org/images/core/emoji/13.0.1/svg/2728.svg"> お得意様限定 <img draggable="false" role="img" class="emoji" alt="✨" src="https://s.w.org/images/core/emoji/13.0.1/svg/2728.svg"><br>次回使える500円OFFクーポンがもらえる <img draggable="false" role="img" class="emoji" alt="❗" src="https://s.w.org/images/core/emoji/13.0.1/svg/2757.svg">
</div>
<p class="description top">いつも当店をご利用頂きありがとうございます。<br>いつもご愛顧頂いている御礼に、お得意様限定プレゼントキャンペーンをご用意いたしました。<br><br>これまで当店で注文いただいた際の「<strong>電話番号</strong>」か「<strong>注文番号</strong>」をご入力いただくと、<strong>次回使える500円OFFクーポン</strong>をプレゼント<img draggable="false" role="img" class="emoji" alt="🥰" src="https://s.w.org/images/core/emoji/13.0.1/svg/1f970.svg"></p>
<p class="lastyear">※有効な注文番号・電話番号は2年以内のご注文に限ります。</p>
<p class="order"><strong>▼注文番号の確認方法はこちら▼</strong></p>
<div class="step_type_wrap">
<div class="type_change_btn active" data="app">楽天アプリ</div>
<div class="type_change_btn" data="web">WEB</div>
</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 id="order_step1" src="https://lp.l-seg.com/image/order_id_1.png">
</div>
<div class="inline-block">
<a href="https://sp.order.my.rakuten.co.jp/?openExternalBrowser=1" onclick="trackOutboundLink('https://sp.order.my.rakuten.co.jp/?openExternalBrowser=1'); return false;">楽天の購入履歴ページ</a>にアクセスし、当店の過去の注文履歴から「注文詳細」(アプリの場合は「詳細」)をクリック<br>
<div class="link_btn">
<a href="https://sp.order.my.rakuten.co.jp/?openExternalBrowser=1" onclick="trackOutboundLink('https://sp.order.my.rakuten.co.jp/?openExternalBrowser=1'); return false;"> </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 id="order_step2" src="https://lp.l-seg.com/image/order_id_2.png">
</div>
<div class="inline-block">
【注文番号】と表示されている数字をコピーします。<br>※当店の注文番号は<strong style="color:red;font-size:1.25rem;">01234567</strong>から始まるものです。
</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 id="order_step3" src="https://lp.l-seg.com/image/order_id_3.png">
</div>
<div class="inline-block">
このページにある【注文番号】の入力欄に、先ほどコピーした注文番号を入力して、確定ボタンをクリック。<br>
<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 id="order_step4" src="https://lp.l-seg.com/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/2757.svg">
</div>
</div>
<script type="text/javascript">
var time_st= "" + new Date().getTime();
var image_arry = {
'web':{
"order_step1":"https://lp.l-seg.com/image/order_id_1.png?date=" + time_st ,
"order_step2":"https://lp.l-seg.com/image/order_id_2.png?date=" + time_st ,
"order_step3":"https://lp.l-seg.com/image/order_id_3.png?date=" + time_st,
"order_step4":"https://lp.l-seg.com/image/order_id_4.png"
},
'app':{
"order_step1":"https://lp.l-seg.com/image/order_id_1.png?date=" + time_st ,
"order_step2":"https://lp.l-seg.com/image/order_id_2.png?date=" + time_st ,
"order_step3":"https://lp.l-seg.com/image/order_id_3.png?date=" + time_st,
"order_step4":"https://lp.l-seg.com/image/order_id_4.png"
}
}
function change_image( data_type ){
for( var id in image_arry[ data_type ] ){
$('#' + id ).attr( 'src' , image_arry[ data_type ][ id ] );
}
}
function change_type( data_type ){
$('.type_change_btn').removeClass('active');
$('.type_change_btn[data="' + data_type + '"]').addClass('active');
}
function loadScript(src, callback) {
var done = false;
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = src;
head.appendChild(script);
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
}
function change_order_label(){
var p = $(".ksFzav")
p.find('input[value="order"]').closest('label').find('span').text('注文番号で応募');
p.find('input[value="number"]').closest('label').find('span').text('電話番号で応募');
};
//starter
loadScript("https://code.jquery.com/jquery-3.6.0.min.js", function() {
$("#debug").html("！");
$(".type_change_btn").on('click',function(){
var data_type = $(this).attr('data');
change_type( data_type );
change_image( data_type );
});
change_order_label();
var label_arry = {
"order":$('input[value="order"]').closest('label'),
"number":$('input[value="number"]').closest('label')
}
label_arry.order.addClass('radio_checked');
$(".ksFzav input").on('change',function(){
console.log("changed");
var val = $(this).val();
var checked = $(this).prop('checked');
console.log( checked );
console.log( val );
for( var key in label_arry ){
if( key == val ){
label_arry[ key ].addClass('radio_checked');
}
else {
label_arry[ key ].removeClass('radio_checked');
}
}
});
label_arry.number.click();
});
</script>
<style>
.form-description{
width:100% !important;
margin:0 auto 12rem 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:11rem;
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 .ksFzav label{
width:50%;
text-align:center;
display:inline-block;
margin:0 auto;
padding:.75rem;
}
.OrderForm input{
width:75%;
margin:0 auto .5rem auto;
height:3rem !important;
padding:.75rem !important;
border-color:#e1cb8a;
font-size: 17px !important;
outline: none !important;
box-sizing:border-box;
}
.OrderForm button{
width:40%;
height:3rem !important;
line-height:3rem;
padding:0;
margin:.5rem auto 0 auto;
}
.titlebar{
background-color:#cfa972;
color:#fff;
padding:0.5rem 0;
line-height:2rem;
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 #cfa972;
border-left:5px solid #cfa972;
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:#996600;
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.order{
background-color:#cfa972;
color:#fff;
padding:0.5rem;
}
p.description{
line-height:1.5rem;
margin:1.25rem auto;
}
p.description.top{
padding:0.5rem;
border:7px solid #cfa972;
margin:2rem 1rem 0 1rem;
}
p.lastyear{
margin-bottom:2rem;
font-size:x-small;
text-align:center;
}
.coupon img{
width:70% !important;
margin:0 auto;
}
.gaiyo p{
text-align:center;
font-size:1rem;
}
.gaiyo{
background-color:#eee;
text-align:left;
padding-top:0.5rem;
font-size:.75rem;
}
.gaiyo ul{
padding:.5rem;
}
.gaiyo ul li{
padding-left:.5rem;
list-style:disc;
}
.gaiyo ul ul{
margin-left:1rem;
padding-top:0;
padding-left:0;
}
.gaiyo ul ul li{
padding:0;
}
.sbt{
font-weight:700;
list-style:none !important;
margin:0.5rem -0.5rem;
}
.step_type_wrap{
border-bottom:3px solid #BF0000;
margin-top:1rem;
}
.type_change_btn{
display:inline-block;
width:45%;
border-radius:10px 10px 0 0;
background-color:#aaa;
cursor:pointer;
color:#fff;
padding:.35rem;
vertical-align:bottom;
margin:0 auto;
}
.type_change_btn.active{
background-color:#BF0000 !important;
padding:.5rem;
font-weight:700;
}
/* 電話番号用追加style */
.OrderForm .ksFzav label{
width:50%;
text-align:center;
display:inline-block;
margin:0 auto;
padding:.75rem;
}
.ksFzav input[type="radio"]{
display:none !important;
}
.ksFzav label{
background-color:#eee;
color:#aaa;
}
.ksFzav label.radio_checked{
background-color:#b32929;
color:#fff;
}
.ksFzav label.radio_checked span::before{
content:"▷ ";
display:inline;
}
.OrderForm{
height:11rem !important;
padding:0 !important;
}
.form-description{
margin:0 auto 12rem auto !important;
}
.OrderForm input{
height:3rem !important;
font-size: 17px !important;
outline: none !important;
box-sizing:border-box;
}
.toast-container{
z-index:100000000;
}
.spinnner-wrapper{
position: fixed;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
margin: auto;
text-align:center;
}
div[aria-busy="true"]::before{
content:"オーダーIDを検索中…";
display:block;
width:10rem;
color:#fff;
border-radius:20px;
padding:.5rem 2rem;
background-color:#009d4b;
font-weight:bold;
box-shadow:0 0 3px 2px rgb(0,0,0,0.3);
}
</style>