Explore the strategic opportunities that arise when a high-intent subscriber clicks the unsubscribe link. Andriy shares an effective method to retain subscribers—and potentially convert them into customers—by implementing an unsubscribe page with a compelling discount.
Additionally, Bobi Nikolovski, our Technical Director, provides a comprehensive step-by-step guide on how to create an unsubscribe page in Klaviyo, complete with coding instructions and customization tips.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
<style type="text/css">
/* GLOBALS PARAMETRS START */
body {
font-family: 'Josefin Sans', sans-serif !important;
}
.top_image_part {
background-image: url({% asset_url 'top.jpg' %});
}
.bottom_image_part {
background-image: url({% asset_url 'bot.png' %});
}
.container-fluid,
.form_inputs,
.global_checkbox_container,
.global_radio_container,
.birthday_select_tags,
.default_select_tags {
border-color: rgba(49, 49, 51, 0.5);
}
.header h1{
color: #295980;
}
.footer a {
color: #FFFFFF;
}
.header h3,
.form_labels,
.form_inputs,
.group_title,
.global_checkbox_container,
.global_radio_container,
.birthday_select_tags,
.default_select_tags,
.unsubscribe_checkbox .global_checkbox_container {
color: #000000;
}
.group_title {
text-align: center;
}
/* When the checkbox is hovered */
.global_checkbox_container:hover input~.checkmark {
background-color: #000000;
}
/* When the radiobutton is hovered */
.global_radio_container:hover input~.radio_checkmark {
border-color: #000000;
}
/* When the checkbox is checked */
.global_checkbox_container input:checked~.checkmark{
background-color: #295980;
}
.update_button_container .pull-right button,
.update_button_container .pull-right button:focus {
background-color: #295980;
}
/* When the radiobutton is checked */
.global_radio_container input:checked~.radio_checkmark {
border-color: rgba(41, 89, 128, 1);
}
/* Inputs border radius */
.global_checkbox_container,
.global_radio_container,
.form_inputs,
.birthday_select_tags,
.default_select_tags,
.update_button_container .pull-right button {
border-radius: 0;
}
/* Separators color */
.checkboxes_row,
.submit_buttons_container,
.birthday_group,
.single_input_group {
border-color: rgba(49, 49, 51, 0.5);
}
/* Placeholder color */
.form_inputs::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(49, 49, 51, 0.5);
}
.form_inputs::-moz-placeholder { /* Firefox 19+ */
color: rgba(49, 49, 51, 0.5);
}
.form_inputs:-ms-input-placeholder { /* IE 10+ */
color: rgba(49, 49, 51, 0.5);
}
.form_inputs:-moz-placeholder { /* Firefox 18- */
color: rgba(49, 49, 51, 0.5);
}
/* GLOBALS PARAMETRS END */
/* Space out content a bit */
body {
padding-top: 0px;
padding-bottom: 0px;
}
.container-fluid {
padding: 0;
border-style: solid;
border-width: 0 0 0 0;
}
.container {
max-width: 650px;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
box-sizing: border-box;
padding: 0;
}
.inner_container {
width: 100%;
display: block;
position: relative;
float: left;
}
/* TOP IMAGE PART */
.top_image_part {
position: relative;
height: 255px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: Auto;
}
.top_image_part img {
position: absolute;
z-index: -1;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 50px;
max-width: 200px;
}
.top_image_part:after {
content: '';
position: absolute;
left: 0;
z-index: 2;
width: 100%;
height: 105%;
}
.bottom_image_part {
position: relative;
height: 300px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto;
}
.bottom_image_part:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 100%;
height: 105%;
}
/* Custom page header */
.header {
margin: 0;
}
.header h1 {
text-transform: uppercase;
margin: 35px 0 18px 0;
padding: 0;
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 21px;
text-align: center;
}
.header h3 {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 21px;
text-align: center;
margin-top: 50px;
}
.required-fields {
text-align: right;
}
.required-fields span {
color: #a94442;
font-weight: bold;
}
.list-group-item label {
font-weight: normal;
margin-top: 17px;
}
.list-group-item label input[type="checkbox"] {
margin-right: 4px;
}
.form-group span.required {
position: absolute;
top: 0;
right: 0;
font-size: 20px;
color: #a94442;
font-weight: bold;
user-select: none;
}
label.error {
color: #a94442;
font-weight: bold;
margin-top: 4px;
}
.form-actions {
/*margin: 25px 0;*/
}
.form-control+.form-control {
margin-top: 6px;
}
.panel-group .panel-title .closed-icon,
.panel-group .panel-title .open-icon {
margin-right: 0.5em;
top: 2px;
}
.panel-group .panel-title a:hover,
.panel-group .panel-title a:active {
text-decoration: none;
}
.panel-group .panel-title a:hover .text,
.panel-group .panel-title a:active .text {
text-decoration: underline;
}
.panel-group .panel-title .closed-icon {
display: none;
}
.panel-group.closed .panel-title .open-icon {
display: none;
}
.panel-group.closed .panel-title .closed-icon {
display: inline;
}
/* Custom page footer */
.footer {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 21px;
text-align: center;
color: #FFFFFF;
padding: 26px 0;
background-color: #313133;
}
/*.form_labels, */
.checkbox_labels {
font-size: 25px;
font-weight: bold;
letter-spacing: 1px;
color: #2c1d10;
box-sizing: border-box;
}
.form_labels {
font-style: normal;
font-weight: normal;
font-size: 14px;
height: 40px;
line-height: 40px;
}
.checkbox_labels {
line-height: 100%;
margin-bottom: 22px !important;
}
.form-horizontal .control-label {
padding: 0px;
text-align: left;
}
.form_inputs {
border-width: 1px;
border-style: solid;
box-sizing: border-box;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 40px;
padding: 0px 29px;
height: 40px;
}
.inputs_group {
margin-bottom: 15px;
}
.inputs_group .col-xs-3 {
width: 100px;
margin-bottom: 0;
}
.inputs_group .col-xs-9 {
width: calc(100% - 100px);
padding: 0;
}
.col-sm-2, .col-sm-12, .col-sm-10, .col-sm-9, .col-sm-3, .form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.birthday_group {
/*margin-bottom: 48px;*/
border-width: 1px 0 1px 0;
border-style: solid;
padding: 35px 0;
margin: 50px 0 !important;
}
.single_input_group {
border-width: 0 0 1px 0;
border-style: solid;
padding-bottom: 30px;
}
.birthday_select_tags {
height: 35px;
padding: 0 36px 0 29px;
margin-right: 18px;
width: calc(50% - 11px);
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 21px;
box-sizing: border-box;
outline: none !important;
background-repeat: no-repeat;
background-size: 25px;
background-position: right +9px center;
border-width: 1px;
border-style: solid;
background-image: url({% asset_url 'select-arrow.png' %});
}
.default_select_tags {
height: 35px;
padding: 0 36px 0 29px;
margin-right: 18px;
width: 100%;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
box-sizing: border-box;
outline: none !important;
background-repeat: no-repeat;
background-size: 25px;
background-position: right +9px center;
border-width: 1px;
border-style: solid;
background-image: url({% asset_url 'select-arrow.png' %});
}
#Birthday_day_select {
margin-right: 0;
}
.birthday_select_tags,
.default_select_tags {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
.green_labels {
color: #7a9900;
}
/* Custom Checkbox and Radio Buttons styles */
.left_form_group {
max-width: 292px;
}
.right_form_group {
max-width: 292px;
float: right;
}
.group_title span {
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 21px;
margin-right: 15px;
}
.group_title {
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 21px;
text-transform: initial;
margin-bottom: 25px;
}
.global_checkbox_container {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-bottom: 15px;
padding-left: 55px !important;
font-style: normal;
font-weight: normal;
font-size: 14px;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
height: 40px;
line-height: 38px;
}
/* Hide the browser's default checkbox */
.global_checkbox_container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.global_checkbox_container .checkmark {
position: absolute;
background-color: #E8E8E8;
border-radius: 5px;
top: 50%;
left: 9px;
width: 23px;
height: 23px;
overflow: hidden;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.global_checkbox_container .checkmark img {
width: 15px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.global_radio_container {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-bottom: 15px;
padding-left: 55px !important;
font-style: normal;
font-weight: normal;
font-size: 14px;
box-sizing: border-box;
height: 40px;
line-height: 38px;
border-width: 1px;
border-style: solid;
}
.global_radio_container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.global_radio_container .radio_checkmark {
position: absolute;
background-color: #ffffff;
border-radius: 5px;
top: 50%;
left: 9px;
width: 23px;
height: 23px;
border-radius: 50%;
overflow: hidden;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border-width: 6px;
border-style: solid;
border-color: #E8E8E8;
}
.cocoa_checkbox_container,
.cocoa_radio_container {
min-height: 30px !important;
line-height: 30px !important;
margin-bottom: 10px !important;
}
/* End Custom Checkbox and Radio Buttons styles */
.submit_buttons_container {
padding: 0;
border-width: 0 0 0 0;
border-style: solid;
padding: 0 0 30px 0;
margin-top: 9px;
}
.unsubscribe_checkbox {
display: block;
position: relative;
padding: 0 !important;
}
.unsubscribe_checkbox .global_checkbox_container {
font-weight: normal !important;
padding-left: 38px !important;
font-size: 14px;
border-radius: 0;
border: none;
height: 54px;
line-height: 55px;
}
.unsubscribe_checkbox .global_checkbox_container .checkmark {
width: 28px;
height: 28px;
left: 22%;
}
.unsubscribe_checkbox .global_checkbox_container .checkmark img {
opacity: 0;
}
.unsubscribe_checkbox .global_checkbox_container input:checked~.checkmark img {
opacity: 1;
}
.update_button_container {
display: block;
position: relative;
padding: 0;
}
.update_button_container .pull-right button {
border: 0px;
text-transform: uppercase;
font-weight: normal;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 21px;
text-align: center;
color: #222222;
padding: 17px 28px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
outline: none !important;
border-radius: 0 0 0 0;
border: 2px solid black;
background-color: white;
}
.update_button_container .pull-right button:hover,
.update_button_container .pull-right button:focus {
opacity: 0.8;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-group {
margin-bottom: 35px;
margin-top: 35px;
}
.inputs_group {
margin-bottom: 15px !important;
}
.birthday_group.inputs_group,
.single_input_group.inputs_group {
margin-bottom: 50px !important;
}
.checkboxes_row.not-active {
opacity: 0.3;
}
.top_image_part {
height: 220px;
}
.checkboxes_row {
/* border-width: 1px 0 0 0;
border-style: solid;
padding-top: 30px;
margin-top: 22px;*/
border: none !important;
/*overflow: hidden;*/
}
.pull-right {
float: none !important;
}
/* Form error style */
.has-error input {
background-color: rgba(253, 95, 96, 0.12);
}
.has-error .help-block {
text-align: right;
}
label.error {
text-align: right;
width: 100%;
font-size: 13px;
}
/* tooltip style */
.tooltip-icon {
width: 20px;
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.tooltip-inner {
padding: 15px;
max-width: 350px;
width: 350px;
}
.klaviyo_birthday_title {
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 21px;
color: #000000;
margin-bottom: 25px;
text-align: center;
}
.checkbox, .radio {
padding-top: 0 !important;
margin-bottom: 15px;
margin-top: 0 !important;
}
@media only screen and (max-width: 767px) {
.container {
padding: 0 26px;
}
.form_inputs {
padding: 0px 15px;
}
.left_form_group,
.right_form_group {
max-width: 100%;
float: none;
}
.email_favorites_group_form_rows .left_form_group {
margin-bottom: 0;
}
.form-horizontal .checkbox {
padding-top: 15px;
}
.submit_buttons_container {
padding-top: 0;
margin-top: 0;
}
.unsubscribe_checkbox .global_checkbox_container {
max-width: 265px;
width: 100%;
margin: 15px auto;
}
.update_button_container .pull-right {
float: none !important;
}
.update_button_container button {
width: 100%
}
.birthday_select_tags {
width: calc(50% - 9px);
margin-right: 13px;
padding: 0 36px 0 15px;
}
#Birthday_day_select {
margin-right: 0;
}
.global_checkbox_container,
.global_radio_container {
padding-left: 50px !important;
}
.tooltip-inner {
max-width: 200px;
width: 200px;
}
.unsubscribe_checkbox .global_checkbox_container .checkmark {
left: 0;
}
.col-sm-2, .col-sm-12, .col-sm-10, .col-sm-9, .col-sm-3, .form-horizontal .form-group {
margin: auto !important;
}
}
@media only screen and (max-width: 374px) {
.update_button_container .pull-right button {
font-size: 20px;
}
.birthday_select_tags {
width: calc(50% - 5px);
margin-right: 5px;
}
#Birthday_day_select {
margin-right: 0;
}
.unsubscribe_checkbox .global_checkbox_container .checkmark {
left: 0;
}
.col-sm-2, .col-sm-12, .col-sm-10, .col-sm-9, .col-sm-3, .form-horizontal .form-group {
margin: 20px 0 !important;
}
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="top_image_part" data-type="parallax" data-speed="20">
<img src={% asset_url 'liaison-logo.png' %} />
</div>
<div class="container">
<div class="inner_container">
<div class="header">
<h3>EMAIL UNSUBSCRIBE</h3>
</div>
<form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
{% if form.non_field_errors %}
<div class="alert alert-danger">
{% for error in form.non_field_errors %}
{{ error }}{% if not forloop.last %}<br />{% endif %}
{% endfor %}
</div>
{% endif %}
<input type="hidden" name="$fields"
value="StylePreference,EmailInterests,EmailFrequency,Birthday,Collections" />
<input type="hidden" name="$list_fields" value="EmailInterests" />
<input type="hidden" name="$list_fields" value="Collections" />
<!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->
<!--<p class="required-fields">
<span>*</span> Required Information
</p>-->
<div class="inputs_group form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}" style="height: 0; margin: 0;">
<label for="email" class="col-xs-3 control-label form_labels"style="height: 0;"> </label>
<div class="col-xs-9">
<input placeholder="Enter your email address..." type="hidden" type="email" class="form-control form_inputs" id="email" name="$email" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$email' }}{% else %}{{ person.email|default:'' }}{% endif %}" />
{% if form.errors|lookup:'$email' %}
<p class="help-block">{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}</p>
{% endif %}
</div>
</div>
<div class="header">
<h1 style="font-size: 40px; line-height: 1; margin: 0;font-weight: normal !important; color: #121111;">REMEMBER THE <br/>GOOD OLD DAYS!</h1>
<h3 style="color: #222222; margin: 30px 0 0 0;">The days of sitting in the sun wearing your first-rate <br/>BARTON band with a cold beer in hand, telling <br/>your buddies about your latest adventure. <br/><br/>Do you really want to leave all that behind? <br/><br/>Hey, if you do, we can’t stop you. <br/>But if you want to give this another shot <br/>we’ll try to bring the magic back with 25% off.<br/> All you’ve got to do is follow the three step process: <br/><br/>1. Click the “Stick around with 25% off button” below<br/> 2. Update your preferences (without unsubscribing!) <br/>3. Check your email for your sweet 25% off discount code!
</h3> <div>
<h1 style="margin-bottom: 0;"><p style="padding: 10px; border: 2px black dashed; width: 200px; margin: auto; font-weight: normal !important; color: #000000;" >25% OFF
</p></h1>
</div>
</div>
<div class="col-xs-12">
<div class="checkboxes_row row">
<div class="form-group col-sm-12 group_form_rows" style="width: 300px; margin: 20px 180px;;">
<label for="interests" class="col-sm-12 group_title uppercase email_interests_label" style="margin-bottom: 0;"><span> </span></label>
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-6" style="width: 100%;">
<label class="global_checkbox_container" style=" background-color: #295980; color: white;">
<input
type="checkbox" name="EmailInterests" value="Accepted Last Offer"
{% if 'Accepted Last Offer' in person.EmailInterests or 'Accepted Last Offer' in request.POST.EmailInterests %}checked="checked"
{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
<span class="checkmark"><img src={% asset_url 'check.png' %} /></span>
STICK AROUND WITH 25% OFF
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 submit_buttons_container" style="padding-bottom: 0; margin-top: 40px;">
<div class="col-sm-6 checkbox unsubscribe_checkbox" style="margin-bottom: 0; width: 100%; text-align: center;">
<label class="global_checkbox_container">
<input type="checkbox" name="$unsubscribe" value="true" />
<span class="checkmark"><img src={% asset_url 'check.png' %} /></span>
<span class="text">No, I’d like you to unsubscribe me from all emails.</span>
</label>
</div>
</div>
<div class="col-xs-12 submit_buttons_container" style="margin-bottom: 45px;">
<div class="col-sm-6 clearfix form-actions update_button_container" style="width: 100%; text-align: center;">
<div class="pull-right">
<button type="submit" class="btn btn-default btn-primary">Update Preferences</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="bottom_image_part" data-type="parallax" data-speed="20"></div>
<footer class="footer">
Barton Watch Bands     <a href="https://www.bartonwatchbands.com/pages/privacy-policy-and-terms-of-use" target="_blank" style="text-decoration: underline;">Privacy Policy</a>
</footer>
</div>
<!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script>
// INIT TOOLTIP
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
// Get default value Style Preference from data base
var default_value = $('#default_select_tags').attr('defaultValue');
$('#default_select_tags').val(default_value);
});
// PARALLAX INIT
function parallaxInit() {
$('*[data-type="parallax"]').each(function () {
var $bgobj = $(this);
var yPos = -($(window).scrollTop() / $bgobj.data("speed"));
var yPosNew = yPos + 50;
var coords = "50% " + yPosNew + "%";
$bgobj.css({ backgroundPosition: coords });
});
}
$(document).ready(function(){
parallaxInit();
});
$(window).scroll(function () {
parallaxInit();
});
$(function() {
$('#preferences_form').validate({
rules: {
$email: {
required: true
}
},
messages: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// Toggle validation based on selection.
$('input[name="$unsubscribe"]').on('change', function() {
$('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
// MY JS
if ( $(this).prop("checked") ) {
$('form .checkboxes_row').addClass('not-active');
} else {
$('form .checkboxes_row').removeClass('not-active');
}
});
});
// MY JS
$('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change', function () {
$('form .checkboxes_row').removeClass('not-active');
});
$('input[name="$unsubscribe"]').on('change', function () {
$('input[type=checkbox]').not(this).prop('checked', false);
});
$('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change', function () {
$('input[name="$unsubscribe"]').prop('checked', false);
});
// $('input[value="New Product Releases, Promotions & Sales, Events"]').on('change', function () {
// $('input[name=EmailInterests]').not(this).prop('checked', false);
// });
// $('input[name=EmailInterests]').not('input[value="New Product Releases, Promotions & Sales, Events"]').on('change', function () {
// $('input[value="New Product Releases, Promotions & Sales, Events"]').prop('checked', false);
// });
$('select[id="Birthday_month_select"]').on('change', function () {
var i;
var option;
$('#Birthday_day_select').empty();
option = document.createElement('option');
option.appendChild(document.createTextNode("Day"));
option.value = "";
option.attributes.disabled;
document.getElementById('Birthday_day_select').appendChild(option);
switch (document.getElementById('Birthday_month_select').value) {
case "1":
case "3":
case "5":
case "7":
case "8":
case "10":
case "12":
for (i = 1; i < 32; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
console.log(i);
document.getElementById('Birthday_day_select').appendChild(option);
}
break;
case "2":
if ((document.getElementById('Birthday_year_select').value % 4 == 0) && (document.getElementById('Birthday_year_select').value % 100 != 0) || (document.getElementById('Birthday_year_select').value % 400 == 0)) {
for (i = 1; i < 30; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
console.log(i);
document.getElementById('Birthday_day_select').appendChild(option);
}
break;
} else {
for (i = 1; i < 29; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
console.log(i);
document.getElementById('Birthday_day_select').appendChild(option);
}
break;
}
default:
for (i = 1; i < 31; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
console.log(i);
document.getElementById('Birthday_day_select').appendChild(option);
}
}
});
$('button[type=submit]').on('focus', function () {
// code for birthday
if (document.getElementById('Birthday_month_select').value != '' && document.getElementById('Birthday_day_select').value != '') {
if (document.getElementById('Birthday_year_select').value == '') {
document.getElementById('Birthday_year_select').value = 2020;
}
document.getElementById('Birthday').value = document.getElementById('Birthday_month_select').value + "/" + document.getElementById('Birthday_day_select').value + "/" + document.getElementById('Birthday_year_select').value;
}
else {
document.getElementById('Birthday').value = null;
}
});
function unsubscribe() {
document.getElementById('unsub').click();
document.getElementById('submit').click();
};
$(document).ready(function () {
var i;
var date = new Date();
var option;
i = date.getFullYear();
var lowestYear = i - 100;
for (i; i > lowestYear; i--) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
document.getElementById('Birthday_year_select').appendChild(option);
}
/* This condition will first check if there is some birthday value coming from
the database or not and then if there is then it will populate the birthday
fields appropriately.
*/
if (document.getElementById("Birthday").value.trim().length != 0 && document.getElementById("Birthday").value != null) {
//console.log(document.getElementById("Birthday").value.trim().length);
var birthday_received = document.getElementById("Birthday").value;
var birthday_received_split_array = birthday_received.split("/");
var birthday_received_month = birthday_received_split_array[0];
var birthday_received_day = birthday_received_split_array[1];
var birthday_received_year = birthday_received_split_array[2];
// populates the month and year fields
document.getElementById("Birthday_year_select").value = birthday_received_year;
document.getElementById("Birthday_month_select").value = birthday_received_month;
/*
To populate the day field... this code will first check the month.
Based on the month it will first populate the number of days values
in the month options.
*/
var i;
var option;
$('#Birthday_day_select').empty();
option = document.createElement('option');
option.appendChild(document.createTextNode("Day"));
option.value = "";
option.attributes.disabled;
document.getElementById('Birthday_day_select').appendChild(option);
switch (birthday_received_month) {
case "1":
case "3":
case "5":
case "7":
case "8":
case "10":
case "12":
for (i = 1; i < 32; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
document.getElementById('Birthday_day_select').appendChild(option);
}
break;
case "2":
if ((document.getElementById('Birthday_year_select').value % 4 == 0) && (document.getElementById('Birthday_year_select').value % 100 != 0) || (document.getElementById('Birthday_year_select').value % 400 == 0)) {
for (i = 1; i < 30; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
document.getElementById('Birthday_day_select').appendChild(option);
}
break;
} else {
for (i = 1; i < 29; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
document.getElementById('Birthday_day_select').appendChild(option);
}
break;
}
default:
for (i = 1; i < 31; i++) {
option = document.createElement('option');
option.appendChild(document.createTextNode(i));
option.value = i;
document.getElementById('Birthday_day_select').appendChild(option);
}
}
// Populates the day field in the birthday.
document.getElementById("Birthday_day_select").value = birthday_received_day;
}
else { }
});
</script>
</body>
</html>
Explore the tools, platforms, and insights discussed in this video. Below, you’ll find links to key resources and additional materials to help you dive deeper into the topic.
Coming soon.
Coming soon.
Coming soon.
Coming soon.
