Hi @AmandaK and welcome to the Community!
May I ask what your specific use case is? In other words, is there a particular reason why you wouldn’t use the default unsubscribe page that can be found in Account > Settings > Email Preference & Subscription? This unsubscribe page will auto-fill the subscriber’s email by default, so this will just help myself and others get some more perspective on the issue.
What appears with the current code as you have it now? Is everything working except the email isn’t populating? Also, how are you testing this?
While this issue may require some more in-depth development help (our Official Partners if interested), these questions will help to clarify the issue.
In the meantime, here is a helpful guide to creating custom consent pages like yours.
Thanks for using the Community!
-Brian
Hey Brian,
We are attempting to learn more about why our customers are choosing to unsubscribe so we have added additional options beyond the unsubscribe reason. @Brian Turcotte is there a way to pull the code from the traditional unsubscribe button so that I can copy that code into my custom sheet?
I would like the users email to auto populate so that they have a better experience.
Thank you.
Here is the full code:
<!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">
<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 inputbtype="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:// -->
<!--mif 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="https://cdn.shopify.com/s/files/1/0369/6721/9340/files/logo-loll-designs-wordmark_251x.png?v=1613683599/100x100" />
<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 %}" />
<input name="$email" type="hidden" value="$email" style="display: none;">
{% 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">We hate to see you go. Could you let us know why you're leaving?</label>
<div class="col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" name="EmailFrequency" value="NotInterested" {% if 'NotInterested' in person.EmailFrequency or 'NotInterested' in request.POST.EmailFrequency %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}{% endif %} />
I no longer want to receive emails
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailFrequency" value="NeverSignedUp" {% if 'NeverSignedUp' in person.EmailFrequency or 'NeverSignedUp' in request.POST.EmailFrequency %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}{% endif %} />
I never signed up for this mailing list
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailFrequency" value="TooManyEmails" {% if 'TooManyEmails' in person.EmailFrequency or 'TooManyEmails' in request.POST.EmailFrequency %}{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}{% endif %} />
I was sent too many emails
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailFrequency" value="Other" {% if 'Other' in person.EmailFrequency or 'Other' in request.POST.EmailFrequency %}{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}{% endif %} />
Other
</label>
</div>
</div>
</div>
<div class="clearfix form-actions">
<div class="pull-right">
<button type="submit" name="$unsubscribe" value="true" class="btn btn-default btn-primary">Unsubscribe</button>
</div>
</div>
</form>
<footer class="footer">
<p>
2023 Loll Designs — <a href="https://lolldesigns.com/pages/privacy-policy" target="_blank">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'));
});
});
$('inputnname="$unsubscribe"]').on('change', function(){
$('inputotype=checkbox]').not(this).prop('checked', false);
});
$('inputctype=checkbox]').not('inputename="$unsubscribe"]').on('change', function(){
$('inputcname="$unsubscribe"]').prop('checked', false);
});
</script>
</body>
</html>
Hi @AmandaK,
Popping in for @Brian Turcotte here!
Thanks for that additional insight! I get why you would want to capture that insight!
However, as this would be a custom form, we cannot help set this up or troubleshoot any further! One of our partners, or specifically a Community Champion (who are all partners!), would love to help set this up for you!
-Taylor
