Merge pull request pytorch#681 from shiftlab/pyt-580-salesforce-form

[PYT-580] Integrate functioning Salesforce sign up on Contributors page

Author: woo-kim

_sass/contributors.scss

@@ -219,6 +219,7 @@
   }
 
   .content-left {
+    flex: 60%;
     padding-top: 76px;
 
     @include desktop {
@@ -228,9 +229,25 @@
     h2 {
       color: $orange;
     }
+
+    .contributor-consent-check {
+      max-width: 400px;
+    }
+
+    .email-consent {
+      color: $mid_gray;
+      font-size: 14px;
+    }
+    
+    .please-accept-terms {
+      display: none;
+      color: $orange;
+      font-size: 14px;
+    }
   }
 
   .content-right {
+    flex: 40%;
     padding-top: 76px;
 
     h2 {
@@ -239,47 +256,62 @@
   }
 
   .contributor-form {
-    display: flex;
     margin: -8px 0 47px 0;
 
-    .form-success {
+    .form-success,
+    .form-fail {
       color: $orange;
       display: none;
-      margin: -6px 0 0 0;
+      flex: none;
+      margin: 8px 0 12px 0;
     }
 
     form {
-      display: flex;
       width: 100%;
-
-      input[type="email"] {
-        border: 1px solid darken($color: #f3f3f3, $amount: 5);
-        border-radius: 4px;
-        flex: 1 70%;
-        padding: 5px 8px 5px 8px;
-        margin-right: 10px;
+      
+      .contributor-form-ui {
+        display: flex;
+        max-width: 390px;
+        flex-wrap: wrap;
 
-        &::placeholder {
-          color: darken($color: #f3f3f3, $amount: 20);
-        }
+        input[type="text"] {
+          border: 1px solid darken($color: #f3f3f3, $amount: 5);
+          border-radius: 4px;
+          flex: 1 70%;
+          padding: 5px 8px 5px 8px;
+          margin-right: 10px;
 
-        &:focus {
-          border: 1px solid $orange;
+          &::placeholder {
+            color: darken($color: #f3f3f3, $amount: 20);
+          }
+  
+          &:focus {
+            border: 1px solid $orange;
+          }
         }
-      }
 
-      input[type="submit"] {
-        background: darken($color: #f3f3f3, $amount: 5);
-        border: none;
-        border-radius: 4px;
-        color: #6d6d6d;
-
-        &:hover {
-          background: darken($color: #f3f3f3, $amount: 20);
-          color: darken($color: #6d6d6d, $amount: 20);
+        input[type="submit"] {
+          background: darken($color: #f3f3f3, $amount: 5);
+          border: none;
+          border-radius: 4px;
+          color: #6d6d6d;
+  
+          &:hover {
+            background: darken($color: #f3f3f3, $amount: 20);
+            color: darken($color: #6d6d6d, $amount: 20);
+          }
         }
       }
     }
+
+    input[type="checkbox"] { 
+      margin: 1px 6px 0 0;
+    }
+
+    .contributor-consent-check {
+      color: $mid_gray;
+      margin-top: 1rem;
+    }
   }
 
   .contributors-button {
@@ -301,7 +333,7 @@
     a {
       color: $dark_grey;
     }
-  
+
     @include animated_border_hover_state;
   }
 }

ecosystem/contributors.html

@@ -39,7 +39,33 @@ <h2 class="lead">The central place for PyTorch contributors to stay up-to-date w
       <div class="content-left">
         <h2>Newsletter Sign Up</h2>
         <p>Follow the contributors newsletter for curated news from across the PyTorch developer community</p>
-        <a id="subscribe" class="contributors-button" href="https://forms.gle/1Edh9z6ExzJSGAiS6">Subscribe</a>
+        <div class="contributor-form">
+          <form action="https://cl.s10.exct.net/DEManager.aspx" name="subscribeForm" method="post">
+            <input type="hidden" name="_clientID" value="515009167">
+            <input type="hidden" name="_deExternalKey" value="BBAD707C-57C6-46F4-9701-D24E5550FB79">
+            <input type="hidden" name="_action" value="add">
+            <input type="hidden" name="_returnXML" value="0">
+            <input type="hidden" name="_successURL" value="https://pytorch.org/resources/contributors?signUp=success">
+            <input type="hidden" name="_errorURL" value="https://pytorch.org/resources/contributors?signUp=fail">
+            <div class="contributor-form-ui">
+              <input type="text" name="Email Address">
+              <input type="submit" value="Submit">
+            </div>
+            <div class="contributor-consent-check">
+              <input type="checkbox" id="agree" oninvalid="this.setCustomValidity('')" required>
+              <label for="agree">
+                <span>I accept the terms and conditions below</span>
+              </label>
+            </div>
+          </form>
+          <p class="form-success">Thanks! You are now subscribed to the PyTorch Contributors Newsletter.</p>
+          <p class="form-fail">There was an error submitting your email address. Please try again.</p>
+          <p class="please-accept-terms">Please accept the terms and conditions below</p>
+        </div>
+        <p class="email-consent">
+          By submitting your email, you agree to receive technical updates and marketing-related electronic communications from Facebook Inc, and its affiliated businesses, including news, events, and updates.
+          You may withdraw your consent and unsubscribe from these at any time, for example, by clicking the unsubscribe link included on our emails. For more information about how Facebook handles your data, please read our <a href="https://pytorch.org/assets/tos-oss-privacy-policy/fb-oss-privacy-policy.pdf">Data Policy</a>
+        </p>
         <a id="issue-toggle" class="contributors-button" href="#pytorch-1">View Issues</a>
       </div>
 
@@ -57,34 +83,32 @@ <h2>Join the conversation</h2>
 <script type="text/javascript">
   $("#past-issues, #issue-toggle" ).on("click", function() {
     $(".hidden").show();
-    $(".marketo-contain").hide();
     $("#sign-up").removeClass("nav-select");
     $("#past-issues").addClass("nav-select");
   })
 
   $("#sign-up").on("click", function() {
     $(".hidden").hide();
-    $(".marketo-contain").show();
     $("#past-issues").removeClass("nav-select");
     $(this).addClass("nav-select");
   });
 
-  $( "#mc-embedded-subscribe-form").submit(function( event ) {
-    event.preventDefault();
-  });
+  var urlParams = new URLSearchParams(window.location.search);
+  var paramValue = urlParams.has('signUp') ? urlParams.get('signUp') : null;
+
+  if (paramValue == 'success') {
+    $(".form-fail").hide();
+    $(".form-success").show();
+  } else if (paramValue == 'fail') {
+    $(".form-success").hide();
+    $(".form-fail").show();
+  }
 
-  $("#mc-embedded-subscribe").on("click", function() {
-    if ($("#mce-EMAIL").val()) {
-      $.ajax({
-        type: "POST",
-        crossDomain: true,
-        url: "https://shiftlab.us1.list-manage.com/subscribe/post?u=450bf01a83b20e12a0affdd10&amp;id=10b00504eb",
-        data: $("#mc-embedded-subscribe-form").serialize()
-      });
-      $("#mc-embedded-subscribe-form").hide();
-      $(".form-success").show();
-    } else {
-      alert("Please enter a valid email address.");
+  $('input[type=submit]').on("click", function(e) {
+    var checked = $('input[type=checkbox]').prop('checked');
+    if (!checked) {
+      $(".please-accept-terms").show().fadeOut(4000);
+      e.preventDefault();
     }
-  })
+  });
 </script>