https://isomerdesign.com/Home/contact-next.php

1<!doctype html>
2<html lang="en-CA">
3<head>
4<meta charset="utf-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<meta name="description" content="Isomer Design contact form">
8<title>Send your comments</title>
9<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
10<style type="text/css">
11	.well {
12		margin-top: 30px;
13	}
14	.zip {
15		display: none;
16	}
17</style>
18</head>
19<body>
20<div class="container" role="main">
21	<div class="row">
22		<div class="well col-md-6 col-md-offset-3">
23			<h4>
24				I invite your comments.
25			</h4>
26		</div>
27		<div class="col-md-6 col-md-offset-3">
28			<div id="contact-form" class="form-horizontal">
29				<div class="form-group">
30					<label for="name" class="col-sm-2 control-label">Name</label>
31					<div class="col-sm-10">
32						<input type="text" class="form-control" id="name" name="name" autocomplete="false" placeholder="(optional)">
33					</div>
34				</div>
35				<div class="form-group">
36					<label for="email" class="col-sm-2 control-label">Email</label>
37					<div class="col-sm-10">
38						<input type="email" class="form-control" id="email" name="email" autocomplete="false" placeholder="(optional)">
39					</div>
40				</div>
41				<div class="form-group">
42					<label for="comments" class="col-sm-2 control-label">Comments</label>
43					<div class="col-sm-10">
44						<textarea class="form-control" rows="4" id="comments" name="comments" autocomplete="false"></textarea>
45					</div>
46				</div>
47				<div class="form-group">
48					<div id="status" class="col-sm-10 col-sm-offset-2">				
49						<div id="send-ok" class="alert alert-success zip">Thank you, your comments have been sent.</div>
50						<div id="send-fail" class="alert alert-danger zip">Sorry, your comments could not be sent. I apologize for any frustration.</div>					
51					</div>
52				</div>	
53				<div class="form-group zip">
54					<label for="subscribe" class="col-sm-2 control-label">Subscribe?</label>
55					<div class="col-sm-10">
56						<input type="text" class="form-control" name="subscribe" id="subscribe" autocomplete="false" placeholder="(optional)">
57					</div>					
58				</div>
59			</form> 
60		</div>
61	</div>
62</div>   

63<script src="../bower_components/jquery.3.3.1/dist/jquery.min.js"></script>

63

64<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

64

65<script>
66$(function() {
67	$('#name').val('');
68	$('#email').val('');
69	$('#comments').val('');
70	$('#subscribe').val('');
71	
72	function submitForm() {
73		const url = 'https://isomerdesign.com/api/v2/site/Home/contact';
74		const ip = '181.215.65.67';
75		
76		const body = {
77			ip:			ip,
78			name: 		$('#name').val(),
79			email: 		$('#email').val(),
80			comments: 	$('#comments').val(),
81			subscribe: 	$('#subscribe').val(),
82		};
83		
84		const options = {
85			method: 	'POST',
86			headers:	{
87				'Accept': 'application/json',
88				'Content-Type': 'application/json'
89			},			
90			body:	JSON.stringify(body),
91		};
92
93		fetch(url, options)
94			.then(response => {
95				$('#submit').remove();
96				if (response.ok) {
97					$('#send-ok').show();
98				} else {
99					$('#send-fail').show();
100				}
101			});				
102	}		
103
104	const submit = `
105		<div id="submit" class="form-group">
106			<div class="col-sm-2 col-sm-offset-2">
107				<button id="submit-btn" autocomplete="false" class="btn btn-primary">Send</button>
108			</div>
109		</div>
110`;
111
112	setTimeout(
113		() => {
114			$('#contact-form').append(submit);
115			$('#submit-btn').on('click', submitForm);
116		}
117		, 2500);	 
118	});
119</script>

119
120</body>
121</html>