連携フォームのデザインサンプルとなります。
電話番号連携に対応したHTMLソースコードとなります。
<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>次回使える円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>次回使える円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;"></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://club.ec-masters.net/swfu/d/order_id_add.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/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">[ 5 ] 応募完了<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/form/app/template/order_1.png?date=>" + time_st ,
"order_step2":"<https://lp.l-seg.com/image/form/app/template/order_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() {
$(".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();
for(var key in label_arry){
if( val == key ){
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.order.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>
<!-- 第三者提供 -->
<div class="agreement" id="agreement">
<a class="detaillink" id="detaillink" href="lseg" rel="noreferrer" target="_blank">個人情報の取得及び第三者共有について</a>
<div class="Design__Container-gnors7-3 ksFzav">
<label id="checkboxcontain"><input type="checkbox" id="checkboxinput">
<span id="checkboxlabel">個人情報の取得及び第三者共有に同意する</span>
</label>
</div>
</div>
<style>
.agreement{
position:fixed;
bottom:0;
background-color:#fff;
z-index:100000000;
box-shadow:0 -2px 3px rgba(0,0,0,0.3);
width:100%;
text-align:center;
padding:2rem 0;
height:11rem;
box-sizing:border-box;
line-height:2rem;
opacity: 0;
animation-name: fadein;
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.a_fadeout {
animation-name: fadeout !important;
}
.agreement .Design__Container-gnors7-3{
margin:0 auto;
background-color:#fff;
border-radius:10px;
padding:1rem;
}
.agreement .ksFzav label{
margin: 0 auto !important;
background-color: #F44336;
color: #fff;
border-radius: 10px;
padding: 0.5rem 1rem;
}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeout {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
display:none;
transform: translateY(20px);
}
}
</style>
<script type="text/javascript">
function fade_control(){
var f_btn = document.querySelector('.agreement .ksFzav label');
var f_parent = document.querySelector('.agreement');
f_btn.addEventListener('click', function() {
f_parent.classList.add('a_fadeout');
});
}
fade_control();
</script>
<!-- /第三者提供 -->