JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container1">
<form id="target" method="GET" enctype="multipart/form-data" >
<p>First Name: <input class="field" type="text" name="firstName" id="firstname" required></p>
<p>Last Name: <input class="field" type="text" name="lastName" id="lastname" required> </p>
<p>Email: <input class="field" type="email" name="email" id="email" required></p>
<p>Zip Code:<input class="field" type="number" name="zip" id="zip" required></p>
<!--insert link for privacy policy on that text -->
<p class="small"><input type="checkbox" id="privacy" name="privacy" value="Agree" required>I certify that I am a U.S. resident over the age of 18, and I agree to the Privacy Policy</p>
<div id="submit"><input type="image" src="https://imageshack.com/a/img835/5313/8nle.gif" name="submit" class="submit" /></div>
</form>
</div>
CSS
#container1{
margin:52px 0px 0px 110px;
width:14em;
height:13em;
background:black;
border:.2em solid #d71d24;
z-index:1;
position:absolute;
}
form {
font-family: 'MINITypev2Regular-Regular', 'Arimo', sans-serif;
text-align:left;
position:relative;
clear:both;
color:white;
padding:0em .5em 0em .5em;
font-size:.75em;
letter-spacing:.2em;
}
.submit{
cursor:pointer;
font-family: 'Arimo', sans-serif;
font-size:1em;
height:2em;
color:white;
background:#545454;
border:0;
border-radius:0;
text-align:center;
margin-top:1em;
}
.small{
font-family: 'Verdana';
font-size:.72em;
text-align:left;
font-weight:200;
letter-spacing:0;
line-height:100%;
margin-top:1.75em;
padding: 1.5em 0em 0em 0em;
}
#submit{
margin-left:99px;
}
.field{
width:10em;
float:right;
margin:0px 2px 0px 5px;
color:black;
}
JavaScript
$(document.ready(function () {
$('#target').submit(function (event) {
// get the form data
var firstName = $('input[name=firstName]').val();
var lastName = $('input[name=lastName]').val();
var email = $('input[name=email]').val();
var zip = $('input[name=zip]').val();
// process the form
$.ajax({
type: 'GET', // define the type of HTTP verb
url: 'http://test.XXXX.com/api/event/form/optinNational.action?source=182081&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&zip=' + zip,
dataType: 'json', // what type of data do we expect back from the server
success: function (data) {
alert('successful');
}
})
.done(function (data) {
console.log(data);
});
event.preventDefault();
$('#banner-expanded').hide();
$('#container1').hide();
$('#thankyou').show();
});
});