連携フォームのデザインサンプルとなります。
電話番号連携に対応した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>次回使える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;">358201</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_step_agree" 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);
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete")) {
done = true;
callback();
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('電話番号で応募');
};
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() {
var val = $(this).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 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; 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; text-align: center; }
.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; text-align: center; }
.emoji { width: 1rem; vertical-align: middle; }
.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; top: 0; left: 0; right: 0; bottom: 0; }
p.order { background-color: #cfa972; color: #fff; padding: 0.5rem; text-align: center; }
p.description.top { padding: 0.5rem; border: 7px solid #cfa972; margin: 2rem 1rem 0 1rem; line-height: 1.5rem; }
p.lastyear { margin-bottom: 2rem; font-size: x-small; text-align: center; }
.step_type_wrap { border-bottom: 3px solid #BF0000; margin-top: 1rem; text-align: center; }
.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; }
.type_change_btn.active { background-color: #BF0000 !important; padding: .5rem; font-weight: 700; }
.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; }
</style>