Contributor I

Solved

Create an Unsubscribers for, to get why...

3 replies
1138 views

Hi, I would like to know if exists documentation to create a different unsubscribe form, where can I add a question about why the customer is unsubscribing.

And how can I add this form for a specific list.

This topic has been closed for replies.

David ToAnswer

Klaviyo Employee

Hello @DaviAmaral,

Great question!

You can create your own customized unsubscribe page which can include a question asking why your customers unsubscribed by enabling the Hosted Pages function within Klaviyo. After enabling this feature, you would gain the capability to custom code your unsubscribe and preferences pages which can be applied as the account default pages and as list specific pages. You can enable the hosted pages by navigating to Account > Settings > Domains and Hosting and clicking the Enable Custom Pages button. To learn more about coding your own custom unsubscribe and preferences pages and about the hosted pages, I would recommend reviewing the About Custom Hosted Pages in Klaviyo and How to Custom Code an Unsubscribe or Manage Preferences Page articles.

Since using custom unsubscribe and preference pages require custom coding, I would recommend working with a developer or finding a Klaviyo partner who can further help you build and design your desired pages.

I hope this helps!

David

David ToAnswer

Klaviyo Employee

Hello @DaviAmaral,

Great question!

I hope this helps!

David

bricatfree

Contributor III

Hey @DaviAmaral I got this to work with a workaround!

The problem with just using Klaviyo’s example custom page is that when I created the custom unsubscribe page, and added a list of reasons to select why they are unsubscribing, the custom profile property would not update once a user unsubscribed.

Therefore, the user would unsubscribe, but the unsubscribe reason would not post to their account as a custom profile property.

I used a lot of trial and error to come to the conclusion to treat the page with the idea of a multi-submit form -- but then actually splitting the two sections (unsubscribe reason selection and unsubscribe checkbox) into two separate forms, where upon submitting the first form reveals the second. Because of this, the unsubscribe reason selection must come first. [NOTE: I used Klaviyo’s base code for custom unsubscribe page, found here: https://help.klaviyo.com/hc/en-us/articles/115005077067-How-to-Custom-Code-an-Unsubscribe-or-Manage-Preferences-Page ]:

Add the unsubscribe reason selection in one <form> and the actual unsubscribe checkbox in a separate <form>; Note: both forms will need the email field (I just changed the label for the second one to “Confirm email address”)
The unsub reason form will have to come first
After the unsub reason form, put in a hidden iframe:

<iframe name='formresponse' width='300' height='200' style="display:none"></frame>

The unsub reason form then needs to have a target of the iframe, so add target=”formresponse” to your unsub reason form
To make it extra user-friendly, I also added an onclick to the unsub reason form button so that onclick it would hide the unsub reason form (put it in a div, used javascript function to hide on click), as well as to reveal the unsubscribe checkbox form (so it’s hidden until they submit their unsubscribe reason) (put the unsubscribe checkbox form in a div, used javascript function to reveal on click)

So change unsub reason form button to:

<button type="submit" class="btn btn-default btn-primary" onclick="HideTop();ReasonSubmit()">Send</button>

And in the script add:

        function ReasonSubmit() {
    document.getElementById("UnsubDiv").style.display = "";
        }
         
         function HideTop() {
  var x = document.getElementById("hideDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Surround the unsub reason form with <div id=”hideDIV”>
Make sure to start the div just before the unsub reason form, and don’t forget to close off the div (</div) AFTER the unsub reason form only.

Surround the unsub checkbox form with <div id=”UnsubDiv”>
Make sure to start the div just before the unsub checkbox form, and don’t forget to close off the div (</div) AFTER the unsub checkbox form only.

Here is the FULL HTML, it’s Klaviyo’s example edited to include the above; but PLEASE NOTE that because of my trial and error, there may be some unnecessary code in there because I’m a novice -- it’s working fine for me though! Now I have created segments in Klaviyo where the properties equal each of the Unsubscribe reasons so I can see why people are unsubscribing. :D

<!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;
          	padding-left: 20px;
          	padding-right: 20px;
          	font-family: 'Neue Helvetica', sans-serif;
        }

        form {
            margin-bottom: 18px;
        }

        /* Custom page header */
        .header {
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 10px;
        }

        .header h1 {
            margin: 10px 0;
          	font-size: 24px;
        }

        .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;
        }

        .btn {
          	border-radius: 0;
          	border: none;
          	background-color: black;
        }

        .btn:hover {
         		background-color: black;
        }

        /* 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">
       <!-- Custom logo (add logo image as asset in Klaviyo, add name below where it says logo.png* -->
            <img src="{% asset_url 'logo.png' %}" width="300px" />
            <h1 style="color: black;">Unsubscribe from newsletters</h1>
				<br>
         </div>
        <div>
          &nbsp;
        </div>
        <div id="hideDIV">
        <form action="" id="preferences_form" method="POST" role="form" class="form-horizontal" target="formresponse">
            {% 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,UnsubscribeReason" />
            <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 (optional)</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>
             &nbsp;
           </div>
          <div id="reasons">
 <div class="form-group">
              <label for="UnsubscribeReason">Please tell us why you're unsubscribing (we want to learn and do better)!</label>
                  <div class="radio" id="reason-1" required>
                     <label>
                        <input type="radio" name="UnsubscribeReason" id="unsubscribe_reason_1" value="Unwanted" required {% if person.UnsubscribeReason == 'Unwanted' or request.POST.UnsubscribeReason == 'Unwanted' %}checked="checked"{% endif %} />I don't remember subscribing/didn't want to subscribe.</label>
                  </div>
                  <div class="radio">
                     <label>
                     <input type="radio" name="UnsubscribeReason" id="unsubscribe_reason_2" value="Unexpected Subjects" {% if person.UnsubscribeReason == 'Unexpected Subjects' or request.POST.UnsubscribeReason == 'Unexpected Subjects' %}checked="checked"{% endif %} />What I've received wasn't the type of emails I expected from you.</label>
                  </div>
				  <div class="radio">
                     <label>
                     <input type="radio" name="UnsubscribeReason" id="unsubscribe_reason_2" value="Too Many" {% if person.UnsubscribeReason == 'Too Many' or request.POST.UnsubscribeReason == 'Too Many' %}checked="checked"{% endif %} />I've received too many emails from you.</label>
                  </div>
                  <div class="radio">
                     <label>
                     <input type="radio" name="UnsubscribeReason" id="unsubscribe_reason_3" value="Discount Code Only" {% if person.UnsubscribeReason == 'Discount Code Only' or request.POST.UnsubscribeReason == 'Discount Code Only' %}checked="checked"{% endif %} />I only wanted the discount code.</label>
                  </div>
				  <div class="radio">
                     <label>
                     <input type="radio" name="UnsubscribeReason" id="unsubscribe_reason_4" value="Too Expensive" {% if person.UnsubscribeReason == 'Too Expensive' or request.POST.UnsubscribeReason == 'Too Expensive' %}checked="checked"{% endif %} />Not in my budget.</label>
                  </div>
  			 <div class="radio">
                     <label>
                     <input type="radio" name="UnsubscribeReason" id="unsubscribe_reason_5" value="Other" {% if person.UnsubscribeReason == 'Other' or request.POST.UnsubscribeReason == 'Other' %}checked="checked"{% endif %} />Other</label>
                  </div>
            </div>
				</div>
            <div class="clearfix form-actions">
               <div class="pull-right">
                  <button type="submit" class="btn btn-default btn-primary" onclick="HideTop();ReasonSubmit()">Send</button>
               </div>
            </div>
		  </form>
        </div>
        <iframe name='formresponse' width='100%' height='auto' style="display:none"></iframe>
        <div id="UnsubDiv" style="display:none">
        <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,UnsubscribeReason" />
            <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">
       <p>
       <p style="font-weight:normal"><b style="color:red">One last step!</b> Click below to confirm you would like to unsubscribe from all newsletters and notifications about sales, new launches, etc. (This doesn't include order and shipping confirmations and the like.) We're sorry to see you go!</p>
       <div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
               <label for="email" class="col-sm-3 control-label">Confirm 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="checkbox">
       <label>
       <input type="checkbox" id="unsubscribe" name="$unsubscribe" value="true" checked/>
         <span class="text"><b>Unsubscribe me from all emails</b></span>
        </label>
       </div>    
            <div class="clearfix form-actions">
               <div class="pull-right">
                  <button type="submit" class="btn btn-default btn-primary">Unsubscribe</button>
               </div>
            </div>
           </div>
		  </form>
        </div>
         <footer class="footer">
            <p>
               © 2022 Your Company Inc. — <a href="https://www.google.ca/" 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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.',
                }
            });
         // Toggle validation based on selection.
            $('input[name="$unsubscribe"]').on('change', function() {
                $('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
            });
        });             



						// Listen for click on toggle checkbox
			$('#select-none-2').click(function(event) {   
				if(this.checked) {
					// Iterate each checkbox
					$('#select-none, #select-off, #select-off-2, #select-off-3, #select-off-4').each(function() {
						this.checked = false;                        
					});
				}
			});

         			$('#select-none').click(function(event) {   
				if(this.checked) {
					// Iterate each checkbox
					$('#select-none-2, #select-off, #select-off-2, #select-off-3, #select-off-4').each(function() {
						this.checked = false;                        
					});
				} 
			});

               $('#select-all').click(function(event) {   
				if(this.checked) {
					// Iterate each checkbox
					$('#select-off, #select-off-2, #select-off-3, #select-off-4').each(function() {
						this.checked = true;                        
					});
				} 
			});

      var unsubscribe = document.getElementById('unsubscribe');
      var reason_div = document.getElementById('reason');
      unsubscribe.onclick = function() {
          console.log(this);
         if(this.checked) {
           reason_div.style['display'] = 'block';
         } else {
           reason_div.style['display'] = 'none';
         } if(this.unchecked) {
           reason_div.style['display'] = 'none';
         }
      };

		function ReasonSubmit() {
    document.getElementById("UnsubDiv").style.display = "";
		}

         function HideTop() {
  var x = document.getElementById("hideDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
    </script>
   </body>
</html>

Hope this helps!!

Taylor Tarpley

Community Manager

Hi @bricatfree,

Thank you so much for providing this in-depth workaround option for your peer! It benefits our Community at large to share our product knowledge and strategies with others!

-Taylor

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials