-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
76 lines (71 loc) · 3.61 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adam on AWS | Contact Me</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" />
</head>
<body>
<div class="page-container">
<div id="title-bar">adam <span class="yellow-text">snetiker</span><br><span class="small-teal-text">Solutions Architect Portfolio</span></div>
<img id="header-image" src="images/website-header.png">
<div class="content-container">
<h1>Get in Touch</h1>
<br><br>
<p>The back-end of this form is built on a "serverless" architecture. Below are the services and micro-tasks I used to make it work.</p>
<br>
<p class="service">AWS Lambda</p>
<ul>
<li>Created a <strong class="yellow-text">function</strong> that handles the sending and receiving of email using SES.</li>
</ul>
<p class="service">Amazon Simple Email Service (SES)</p>
<ul>
<li>Verified the email address to be used for inquiries. This step was already completed because I created the email address <em>[email protected]</em> at the beginning of the project.</li>
</ul>
<br>
<p class="service">AWS Identity and Access Management (IAM)</p>
<ul>
<li>Set up a <strong class="yellow-text">role</strong> that allows SES and Lambda to communicate.</li>
<li>Attached the <strong class="yellow-text">policies</strong> <em>AmazonSESFullAccess</em> and <em>AWSLambdaExecute</em>.</li>
</ul>
<br>
<p class="service">Amazon API Gateway</p>
<ul>
<li>Built a <strong class="yellow-text">REST API</strong> that integrates with the Lambda function created earlier.</li>
<li>Enabled <strong class="yellow-text">Cross-Origin Resource Sharing (CORS)</strong> so requests can be made from any version of my website, regardless of what protocol or sub-domain is accessing this page. For example, <em>www.adamonaws.com</em> is a different origin than <em>adamonaws.com</em>, and <em>https://adamonaws.com</em> is a different origin than <em>http://adamonaws.com</em>.</li>
</ul>
<br>
<p class="service">JavaScript</p>
Added a script to the contact form page that will do two things:
<ol style="padding-left: 30px;">
<li>Send the form data to the API Gateway when the user presses the submit button</li>
<li>Execute the Lamba function that will tell SES to send the form inputs to my email address.</li>
</ol>
<form id="contact" action="" method="post">
<h3>Let's Work Together!</h3>
<h4>Want to hire me or have a project you'd like to collaborate on? Fill out this form and I'll get back to you as soon as possible.</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
<p class="copyright">Designed by <a href="https://colorlib.com" target="_blank" title="Colorlib">Colorlib</a> and modified by me.</p>
</form>
</div>
</div>
</body>
</html>