JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<h3>Contact Form</h3>

<div class="mailform">
  <form id="cform" method="post" action="mail.php" onsubmit="return validate()">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Name..">

    <label for="email">Email Address</label>
    <input type="text" id="email" name="email" placeholder="Email..">

    <label for="message">Message</label>
    <textarea id="message" name="message" placeholder="Message.." style="height:200px"></textarea>

    <input id="submit" class="submit_disable" type="submit" value="Submit" disabled>
  </form>
<div class="bot"><div id="dot" class="dot" onclick="dot();"></div><span>Please click on the yellow dot<br>to prove that you are human</span></div>
</div>

<div class="mlist_container">
<form id="cform" method="post" action="mail.php" onsubmit="return validate()">
<div class="mlist">
<h2>Join our mailing list</h2>
<p>Receive updates and event announcements</p>
<input type="text" id="email" name="email" placeholder="Email..">
<span><a href="#">Privacy Policy</a></span><button>Next</button><div class="clear"></div>
</div>
</form>
</div>

CSS

body {font-size:10px;}


.mailform {display:none;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 20px 110px;
position:relative;
}

.mailform input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
}

input:focus, textarea:focus { outline: none !important;border-color: var(--primary);box-shadow: 0 0 10px #dddddd;}

.submit, .submit_disable {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position:absolute;bottom:20px;left:20px;
  transition: all 1s ease;
}

.submit_disable {
  background-color: #dedede;
  
}


.dot, .dot_disable {width:50px;height:50px;background-color:#DEAA39;border-radius:500px;float:left;margin-right:10px;cursor:pointer;}
.dot_disable {background-color:#dedede;transition: all 1s ease;}
.bot {height:50px;line-height: 50px;}
.bot span {display: inline-block;vertical-align: middle;line-height: 18px;}


@media screen and (max-width: 800px) {
.mailform label {display:none;}
}

.mlist_container {max-width:300px;margin:auto;}
.mlist {box-sizing: border-box;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
position:relative;
}
.mlist input[type=text] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 6px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
}
.mlist .submit, .mlist button {
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float:right;
  font-size:1.6em;
}
.mlist .submit { background-color: #04AA6D;}
.mlist button {background-color: blue;}

.mlist h2 {text-align:center;margin:0;padding:0;line-height:2em;font-size:2.2em;}
.mlist p...

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

function dot() {
var a = 21736;
id('dot').className = "dot_disable";
id('submit').disabled = false;
id('submit').className = "submit";	
id('cform').action = "ms_" + a + ".php";
}

function validate() {

var name = id('name');
if (name.value == "") {alert("Please enter your name."); return false;}

var email = id('email');
if (email.value == "") {alert("Please enter a valid email address."); return false;}

var message = id('message');
if (message.value == "") {alert("Please include a message."); return false;}

}