-
Notifications
You must be signed in to change notification settings - Fork 0
/
rsvp.html
132 lines (117 loc) · 5.72 KB
/
rsvp.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="#1FCAD6" name="theme-color">
<title>RSVP to Shona & Phil</title>
<meta content="Shona and Phil are getting married!" name="description">
<meta content="Shona and Phil" name="author">
<link href="assets/css/fonts.css" rel="stylesheet">
<link href="assets/css/rsvp.css" rel="stylesheet">
<link rel="icon" type="image/png" href="/assets/images/Colour_Phil_And_Shona_square.png">
</head>
<body id="rsvp">
<section>
<div class="top">
<div class="top-links">
<a href="/"><h2>Home</h2></a>
<a href="/faqs"><h2>FAQs</h2></a>
</div>
<div class="logo-container">
<a href="/">
<img class=logo src="assets/images/Colour_Phil_And_Shona.png" alt="Shona and Phil">
</a>
</div>
<div class="title">
<h1>✧ RSVP ✧</h1>
</div>
</div>
<div id="password_form" class="middle">
<form name="passwordForm">
<h1>Enter Your Password </h1>
<label for="password"></label>
<input type="text" name="password" id="password" required>
<input type="submit" class="submit" value="Enter">
</form>
</div>
<div id="rsvp_form_container" class="middle hidden" hidden>
<form name="rsvpForm"
method="post"
action="https://script.google.com/macros/s/AKfycbzEC_Ksd9nEVXwnbXsW9XNKydplZQst9U4HwGt44rMyp6MelrsZcli44lkYhrU2nm9b/exec">
<div class="form-section">
<label for="name" class="hidden">Your Name</label>
<input type="text" name="name" id="name" placeholder="Your Name *" required>
<label for="email" class="hidden">Contact Email</label>
<input type="email" name="email" id="email" placeholder="Contact Email *" required>
<label for="number" class="hidden">Contact Number</label>
<input type="text" name="number" id="number"
minlength="10" maxlength="14" pattern="[0-9]{10,14}"
placeholder="Contact Number *" required>
<div class="form-section">
<label for="attending">Will you be attending?</label>
<select name="attending" id="attending" required>
<option disabled selected value> -- select an option --</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<div id="attending_no" class="form-section hidden">
<h2>We're sorry you can't make it.</h2>
<label for="reason">Do you want to let us know why?</label>
<textarea name="reason" id="reason"></textarea>
<input type="submit" class="submit" value="RSVP ">
</div>
<div id="attending_yes" class="form-section hidden">
<div class="form-section">
<label for="camping">Will you be camping at Rhyse Farm?</label>
<select name="camping" id="camping" required>
<option disabled selected value> -- select an option --</option>
<option value="van">I'm bringing my Van</option>
<option value="tent">I'm pitching my Tent</option>
<option value="no">No</option>
</select>
</div>
<div class="visible-label">
<label for="party_size">How many people are in your party?</label>
<select name="party_size" id="party_size" required>
<option value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="party_details" class="form-section">
<div id="person_input_template" class="hidden">
<h2></h2>
<label for="person_name" class="hidden">Name</label>
<input type="text" name="person_name" id="person_name" placeholder="Name">
<label for="person_dietary" class="hidden">Dietary Requirements</label>
<input type="text" name="person_dietary" id="person_dietary"
placeholder="Dietary Requirements">
<label for="person_song" class="hidden">Song Request</label>
<input type="text" name="person_song" id="person_song" placeholder="Song Request">
<div class="visible-label">
<label for="person_under_12">Under 12?</label>
<input type="checkbox" name="under_12" id="person_under_12" value="false">
</div>
</div>
</div>
<input type="submit" class="submit" value="RSVP "/>
</div>
</form>
</div>
<div id="rsvp_sending" class="middle hidden">
<h1>Submitting form, please wait... </h1>
</div>
<div id="rsvp_success" class="middle hidden">
<h1>Thank you for RSVPing! </h1>
<h2>We're looking forward to seeing you! </h2>
</div>
</section>
<script src="assets/js/rsvp.js"></script>
</body>
</html>