SFMC two-click unsubscribe page

sfmc-ampscript-two-click-unsubscribe.html

<script runat="server" language="ampscript">

  set @debug = 0
  set @unsubscribeFromAll = RequestParameter("unsubscribeFromAll") /* append this in the CloudPagesURL function, if desired */
  set @submitFlag = RequestParameter("submitFlag")

  /* on page load (pre-submit) */
  if empty(@submitFlag) then

    /* retrieve values from encrypted qs parameter send context */
    set @jobid = AttributeValue("jobid")
    set @listid = AttributeValue("listid")
    set @jobSubscriberBatchID = AttributeValue("_JobSubscriberBatchID")
    set @emailaddr = AttributeValue("emailaddr")
    set @subscriberkey = AttributeValue("_subscriberkey")
    set @reason = "Two-Click Unsubscribe"

  /* post-submit */
  elseif @submitFlag >= 0 then

    /* retrieve values from form */
    set @jobid = RequestParameter("jobid")
    set @listid = RequestParameter("listid")
    set @jobSubscriberBatchID = RequestParameter("_JobSubscriberBatchID")
    set @emailaddr = RequestParameter("emailaddr")
    set @subscriberkey = RequestParameter("_subscriberkey")
    set @reason = RequestParameter("reason")
    set @unsubscribeFromAll = RequestParameter("unsubscribeFromAll")

    /* log an unsub event when submitFlag = 1 via post */
    if @submitFlag == 1 and not empty(@subscriberkey) then

       /* if unsubscribing from all, then set the job, batch and listids to blank, effectively doing a global unsub */
       if @unsubscribeFromAll == "1" then
         set @jobid = ""
         set @listid = ""
         set @jobSubscriberBatchID = ""
       endif

       /* create an ExecuteRequest inject an unsub event into the LogUnsubEvent platform table */
       set @lue = CreateObject("ExecuteRequest")
       SetObjectProperty(@lue,"Name","LogUnsubEvent")

       /*
        In order to invoke the request, associate the following information with it to define the subscriber context and the job context:

        1. Subscriber Key
        2. JobId associated with the email send
        3. ListID associated with the email send
        4. jobSubscriberBatchID associated with the email send
        5. Reason for the unsub
       */

       /* 1. define and associate Subscriber Key to the request */
       set @lue_prop = CreateObject("APIProperty")
       SetObjectProperty(@lue_prop, "Name", "SubscriberKey")
       SetObjectProperty(@lue_prop, "Value", @subscriberkey)
       AddObjectArrayItem(@lue, "Parameters", @lue_prop)

       /* 2. define and associate JobID to the request */
       if not empty(@jobid) then
        set @lue_prop = CreateObject("APIProperty")
        SetObjectProperty(@lue_prop, "Name", "JobID")
        SetObjectProperty(@lue_prop, "Value", @jobid)
        AddObjectArrayItem(@lue, "Parameters", @lue_prop)
       endif

       /* 3. define and associate ListID to the request */
       if not empty(@listid) then
         set @lue_prop = CreateObject("APIProperty")
         SetObjectProperty(@lue_prop, "Name", "ListID")
         SetObjectProperty(@lue_prop, "Value", @listid)
         AddObjectArrayItem(@lue, "Parameters", @lue_prop)
       endif

       /* 4. define and associate jobSubscriberBatchID to the request */
       if not empty(@jobSubscriberBatchID) then
        set @lue_prop = CreateObject("APIProperty")
        SetObjectProperty(@lue_prop, "Name", "BatchID")
        SetObjectProperty(@lue_prop, "Value", @jobSubscriberBatchID)
        AddObjectArrayItem(@lue, "Parameters", @lue_prop)
       endif

       /* 5. define and associate unsub reason to the request */
       set @lue_prop = CreateObject("APIProperty")
       SetObjectProperty(@lue_prop, "Name", "Reason")
       SetObjectProperty(@lue_prop, "Value", @reason)
       AddObjectArrayItem(@lue, "Parameters", @lue_prop)

       /* 6. invoke the request */
       set @lue_statusCode = InvokeExecute(@lue, @overallStatus, @requestId)

       /* extract messages from the response */
       set @Response = Row(@lue_statusCode, 1)
       set @Status = Field(@Response,"StatusMessage")
       set @Error = Field(@Response,"ErrorCode")

    endif

  endif

  if @debug == 1 then
    output(concat("<br>jobid: ", @jobid))
    output(concat("<br>listid: ", @listid))
    output(concat("<br>jobSubscriberBatchID: ", @jobSubscriberBatchID))
    output(concat("<br>emailaddr: ", @emailaddr))
    output(concat("<br>subscriberkey: ", @subscriberkey))
    output(concat("<br>reason: ", @reason))
    output(concat("<br>unsubscribeFromAll: ", @unsubscribeFromAll))
    output(concat("<br>submitFlag: ", @submitFlag))
    output(concat("<br>overallStatus: ", @overallStatus))
    output(concat("<br>requestId: ", @requestId))
    output(concat("<br>Status: ", @Status))
    output(concat("<br>Error: ", @Error))
  endif

</script>

%%[ if not empty(@subscriberkey) then ]%%

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Unsubscribe</title>
      <style>
        body, a, input, td, th {font-family:sans-serif; font-size:12px;}
      </style>
    </head>
    <body>

      %%[ if empty(@submitFlag) then ]%%

          <h1>Unsubscribe?</h1>

          <form method="POST" action="%%=RequestParameter('PAGEURL')=%%">
            <input type="hidden" name="jobid" value="%%=v(@jobid)=%%"/>
            <input type="hidden" name="listid" value="%%=v(@listid)=%%"/>
            <input type="hidden" name="_JobSubscriberBatchID" value="%%=v(@_JobSubscriberBatchID)=%%"/>
            <input type="hidden" name="emailaddr" value="%%=v(@emailaddr)=%%"/>
            <input type="hidden" name="_subscriberkey" value="%%=v(@subscriberkey)=%%"/>
            <input type="hidden" name="reason" value="%%=v(@reason)=%%"/>
            <input type="hidden" name="unsubscribeFromAll" value="%%=v(@unsubscribeFromAll)=%%"/>
            <input type="hidden" name="submitFlag" id="submitFlag" value="0"/>
            <button name="unsubscribe" id="unsubscribe" type="submit">Yes! Please unsubscribe me.</button>
            <button name="nevermind" id="nevermind" type="submit">Oops! Nevermind.</button>
          </form>
          <script>

            document.addEventListener('DOMContentLoaded', function () {

              const unsubscribeBtn = document.querySelector('#unsubscribe');
              unsubscribeBtn.addEventListener('click', () => {
                document.getElementById("submitFlag").value = "1";
              });

              const nevermindBtn = document.querySelector('#nevermind');
              nevermindBtn.addEventListener('click', () => {
                document.getElementById("submitFlag").value = "0";
              });

            }, false);

          </script>

      %%[ elseif @submitFlag == 1 then ]%%

          <h1>Got it. You've been unsubscribed.</h1>

      %%[ elseif @submitFlag == 0 then ]%%

          <h1>Understood. We all make mistakes.</h1>

      %%[ endif ]%%

    </body>
  </html>

%%[ else ]%%

BAD REQUEST - MISSING REQUIRED DATA

%%[ endif ]%%