Manage Preferences

<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" /><style type="text/css"> /* Space out content a bit */ body { padding-top: 20px; padding-bottom: 20px; } form { margin-bottom: 18px; } /* Custom page header */ .header { border-bottom: 1px solid #e5e5e5; margin-bottom: 10px; } .header h1 { margin: 10px 0; } .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 { padding-top: 18px; border-top: 1px solid #e5e5e5; } /* Customize container */ @media (min-width: 768px) { .container { max-width: 730px; } } </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"> <div class="header"><img src="" data-mce-src="http://via.placeholder.com/300x75" /> <h1>Email Preferences</h1> </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="EmailInterests,EmailFrequency" /> <input type="hidden" name="$list_fields" value="EmailInterests" /> <!-- <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="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}"><label for="email" class="col-sm-3 control-label">Email Address<span class="required">*</span></label> <div class="col-sm-9"><input type="email" class="form-control" 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="form-group"><label for="first_name" class="col-sm-3 control-label">First Name</label> <div class="col-sm-9"><input type="text" class="form-control" id="first_name" name="$first_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$first_name' }}{% else %}{{ person.first_name|default:'' }}{% endif %}" /></div> </div> <div class="form-group"><label for="last_name" class="col-sm-3 control-label">Last Name</label> <div class="col-sm-9"><input type="text" class="form-control" id="last_name" name="$last_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$last_name' }}{% else %}{{ person.last_name|default:'' }}{% endif %}" /></div> </div> <div class="form-group"><label for="interests" class="col-sm-3 control-label">Interests</label> <div class="col-sm-9"> <div class="checkbox"><label> <input type="checkbox" name="EmailInterests" value="New Releases" if="" new="" releases="" in="" person="" emailinterests="" or="" request="" post="" checked="checked" elif="" not="" and="" endif="" /> New Product Releases </label></div> <div class="checkbox"><label> <input type="checkbox" name="EmailInterests" value="Promotions" if="" promotions="" in="" person="" emailinterests="" or="" request="" post="" checked="checked" elif="" not="" and="" endif="" /> Promotions &amp; Sales </label></div> <div class="checkbox"><label> <input type="checkbox" name="EmailInterests" value="Blog" if="" blog="" in="" person="" emailinterests="" or="" request="" post="" checked="checked" elif="" not="" and="" endif="" /> Latest from the Blog </label></div> <div class="checkbox"><label> <input type="checkbox" name="EmailInterests" value="Events" if="" events="" in="" person="" emailinterests="" or="" request="" post="" checked="checked" elif="" not="" and="" endif="" /> Events </label></div> </div> </div> <div class="form-group"><label for="interests" class="col-sm-3 control-label">How often would you like to hear from us?</label> <div class="col-sm-9"> <div class="radio"><label> <!-- Default value. --> <input type="radio" name="EmailFrequency" id="email_frequency_0" value="All" if="" person="" emailfrequency="" all="" or="" request="" post="" checked="checked" elif="" not="" and="" endif="" /> Twice per Week </label></div> <div class="radio"><label> <input type="radio" name="EmailFrequency" id="email_frequency_1" value="Weekly" if="" person="" emailfrequency="=" weekly="" or="" request="" post="" checked="checked" endif="" /> Once per Week </label></div> <div class="radio"><label> <input type="radio" name="EmailFrequency" id="email_frequency_2" value="Monthly" if="" person="" emailfrequency="=" monthly="" or="" request="" post="" checked="checked" endif="" /> Once per Month </label></div> </div> </div> <div class="checkbox"><label> <input type="checkbox" name="$unsubscribe" value="true" /> <span class="text">Unsubscribe me from all emails.</span> </label></div> <div class="clearfix form-actions"> <div class="pull-right"><button type="submit" class="btn btn-default btn-primary">Update Preferences</button></div> </div> </form> <footer class="footer"> <p>© 2017 Company Name — <a href="https://www.klaviyo.com" target="_blank" rel="noopener noreferrer">Privacy Policy</a></p> </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> $(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')); }); }); </script></body></html>