JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<form id="nl" action="mail.php" method="post" onsubmit="return validate();">
<div class="nl_container">
<p><span class="nl_title">Subscribe for Updates</span></p>
<p>Get KIS updates straight to your inbox.</p>
</div>

<div class="nl_container">
  
<input type="text" placeholder="Email address" name="sub" required>
<input type="hidden" name="url" value="<?php $url = $_SERVER['REQUEST_URI']; echo $url; ?>">
<div id="nl_confirm" class="nl_confirm" onclick="check();"></div>

<div class="nl_confirm2">I want to receive email updates</div>
<div class="clear"></div>
</div>

<div class="nl_container">
<input type="submit" value="Subscribe">
<span class="nl_small"><p>By submitting your email, you agree to our Terms and Privacy Notice. You can opt out at any time.</p></span>
</div>
</form>

CSS

body {}
.clear {clear:both;}

#nl {
  border: 3px solid #f1f1f1;
  font-family: Arial;
}

.nl_container {
  padding: 0 10px;
}

.nl_title {font-size:18px;font-weight:bold;}

#nl input[type=text], input[type=submit] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#nl input[type=checkbox] {
  margin-top: 16px;
}

#nl input[type=submit] {
  background-color: #04AA6D;
  color: white;
  border: none;
}

#nl input[type=submit]:hover {
  opacity: 0.8;
}

.nl_confirm {float:left;width:15px;height:15px;border:solid 1px #999999;margin-right:10px;}

.nl_confirm_on {float:left;width:15px;height:15px;border:solid 1px #999999;margin-right:10px;background:url('data:image/gif;base64,R0lGODlhDwAPAIAAAFVVVf///yH5BAAHAP8ALAAAAAAPAA8AAAIcjI8ZoMn2WoSyoukOVmzbdi2gRoKYh2ZmOXpjAQA7');}
.newsletter_confirm2 {float:left;}

.nl_small {font-size:14px;}

JavaScript

function validate() {
var confirm = document.getElementById("nl_confirm");
if (confirm.className == "nl_confirm") {alert("Please confirm that you wish to receive email updates by tcking the checkbox!!!");return false;}
}

function check() {
var confirm = document.getElementById("nl_confirm");
var url = document.getElementById("nl");
if (confirm.className == "nl_confirm") {confirm.className = "nl_confirm_on";url.action = "sub.php";}
else {confirm.className = "nl_confirm";url.action = "mail.php";}
}