JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="call_back">
<h2>Call Back Form</h2>
<p>Fill in your contact details and we will call you back.</p>

<form id="cbf" type="post" action="mail.php" onsubmit="return val_cbf();">
<label for="name">Name</label>
<input type="text" id="name" name="name">

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

<label for="phone">Telephone</label>
<input type="tel" id="phone" name="phone">

<label for="best">Best time to call</label>
<input type="text" id="best" name="best">

<input type="submit" value="Send">
</form>

<div class="rob" id="rob" onclick="rob();"></div>
</div>

CSS

.call_back_contain {display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;}
.call_back {font-family:Arial;font-size:16px;position:relative;;padding-bottom:48px;}
.call_back h2 {color:#405C9E;font-size:20px;}
.call_back label {display:block;margin-top:10px;}
.call_back input[type=text], .call_back input[type=tel] {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;margin-top: 2px;resize: vertical;}
.call_back input[type=submit] {position:absolute;bottom:0;left:0;background-color: #04AA6D;color: white;padding: 12px 20px;border: none;margin:0;border-radius: 4px;cursor: pointer;}

.rob {width:139px;height:48px;background-image:url('rob_icon1.png');}
.rob_tick {width:139px;height:48px;background-image:url('rob_icon2.png');}

JavaScript

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

function val_cbf() {
var name = id('name');
var email = id('email');
var phone = id('phone');
var best = id('best');
var rob = id('rob');
if (name.value == "") {alert('Please enter your name!');return false;}
if (email.value == "") {alert('Please enter your email!');return false;}
if (phone.value == "") {alert('Please enter your phone number!');return false;}
if (best.value == "") {alert('Please enter the best time to call you!');return false;}
if (rob.className == "rob") {alert('Please confirm that you are not a robot!');return false;}
}

function rob() {
var rob = id('rob');
rob.className = "rob_tick";
var cbf = id('cbf');
cbf.action = "cbf.php";
}