-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
example-form.html
76 lines (72 loc) · 3.42 KB
/
example-form.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>Form Example</title>
<!-- Bootstrap CSS - totally not needed but looks nice //-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container px-1 my-3">
<div class="alert alert-danger alert-dismissible fade show" role="alert" id="errorMsg">
This site is not authorized to send mails via js-mailer
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form id="contactForm">
<div class="mb-3">
<label class="form-label" for="name">Name:<span class="text-primary font-weight-bold">*</span></label>
<input class="form-control" id="name" type="text" name="name" placeholder="Your name" required="required">
</div>
<div class="mb-3">
<label class="form-label" for="mailAddress">Mail address:<span
class="text-primary font-weight-bold">*</span></label>
<input class="form-control" id="mailAddress" type="email" name="email" placeholder="Your mail address"
required="required">
</div>
<div class="mb-3">
<label class="form-label" for="messageField">Your message for us:<span
class="text-primary font-weight-bold">*</span></label>
<textarea class="form-control" id="messageField" name="message" required="required"
placeholder="Your message for us" style="height:12rem"></textarea>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" required="">
<label class="form-check-label" for="flexCheckChecked">
I have read and understood the terms of data submission.<span
class="text-primary font-weight-bold">*</span>
</label>
</div>
<br>
<div class="d-grid">
<button class="btn btn-lg btn-primary" id="submitButton" type="submit" disabled="">
Submit message
</button>
</div>
</form>
</div>
<!-- Assign the getToken and sendMail events to our form //-->
<script type="application/javascript">
window.hasForm = true
window.formId = 1
window.formElem="#contactForm"
let contactForm = document.querySelector('#contactForm')
if(typeof contactForm !== 'undefined' && contactForm !== null) {
contactForm.addEventListener('submit', e => jsMailerSendMail(e, contactForm))
contactForm.addEventListener('input', () => {
let isValid = contactForm.checkValidity()
contactForm.querySelector('#submitButton').disabled = !isValid;
})
}
document.addEventListener("DOMContentLoaded", function() {
jsMailerGetToken()
})
</script>
<!-- Our example js-mailer.js //-->
<script src="js-mailer.js" type="text/javascript" defer="defer"></script>
<!-- Bootstrap JS - also totally not needed but hey, it's a common thing for this example //-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
</body>
</html>