daniel/material-resume
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

begin working on form, added custom js

Browse Source
This commit is contained in:
Daniel Tam
2021-05-15 02:21:08 -05:00
parent 4764964899
commit bd85aff721
2 changed files with 51 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
index.html
View File

@@ -42,8 +42,6 @@
</li>
<li class="nav-item"><a class="nav-link" href="#portfolio" title="Portfolio"><span class="menu-title">Portfolio</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#references" title="References"><span class="menu-title">References</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#contact" title="Contact"><span class="menu-title">Contact</span></a>
</li>
</ul>
@@ -286,22 +284,22 @@
<div class="h6"><i class="fa fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i> +1-469-892-8730</div>
<div class="h6"><i class="fa fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> daniel@danieltam.net</div>
</div>
<div class="mt-5 d-print-none"><form action="https://formspree.io/your@email.com"
method="POST">
<div class="form-outline mb-4">
<input type="text" id="name" class="form-control" required/>
<label class="form-label" for="name">Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="email" class="form-control" required/>
<label class="form-label" for="email">Email address</label>
</div>
<div class="form-outline mb-4">
<textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
<label class="form-label" for="message">Message</label>
</div>
<button class="btn btn-info btn-block mb-4" type="submit">Send</button>
</form>
<div class="mt-5 d-print-none">
<form onsubmit='sendMessage();'>
<div class="form-outline mb-4">
<input type="text" id="name" class="form-control" required/>
<label class="form-label" for="name">Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="email" class="form-control" required/>
<label class="form-label" for="email">Email address</label>
</div>
<div class="form-outline mb-4">
<textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
<label class="form-label" for="message">Message</label>
</div>
<button class="btn btn-info btn-block mb-4">Send</button>
</form>
</div>
</div>
<div class="col-md-7 d-print-none" data-aos="zoom-in" data-aos-delay="100"><img class="img-fluid" src="images/contact.jpg" width="800" height="500"/></div>
@@ -341,5 +339,40 @@
<script src="scripts/mdb.min.js?ver=1.2.1"></script>
<script src="scripts/aos.js?ver=1.2.1"></script>
<script src="scripts/main.js?ver=1.2.1"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script language="javascript">
//
function sendMessage() {
// get form data
let formData = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val(),
};
// send data from the form
$.ajax({
type: 'POST',
url : '/message',
data: formData,
dataType: "json",
encode: true,
success: sendSuccess(),
error: swal("Error", "There has been an error submitting your form. Please try again.", "error"),
});
}
function sendSuccess() {
$('#name').val('');
$('#email').val('');
$('#message').val('');
swal("Thank you!", "Your message has been sent.", "success");
}
</script>
</body>
</html>

0
scripts/message.js Normal file
View File