-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
152 lines (151 loc) · 4.57 KB
/
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
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register for Yugo</title>
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 1.5rem;
}
form {
display: flex;
flex-direction: column;
}
.form-group {
margin-bottom: 1rem;
}
label {
font-size: 0.9rem;
color: #555;
margin-bottom: 0.5rem;
display: block;
}
input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
button {
background-color: #FF006E;
color: white;
border: none;
padding: 0.75rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #FF5E93;
}
#message {
margin-top: 1rem;
text-align: center;
font-size: 0.9rem;
}
.success {
color: #28a745;
}
.error {
color: #dc3545;
}
.checkbox-group {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.checkbox-group input[type="checkbox"] {
margin-top: 0.25rem; /* チェックボックスを少し下げて、テキストの1行目と揃える */
margin-right: 0.5rem;
width: min-content;
}
.checkbox-group label {
font-size: 0.9rem;
line-height: 1.4;
}
.checkbox-group a {
color: #FF006E;
text-decoration: none;
}
.checkbox-group a:hover {
text-decoration: underline;
}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16662230717">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-16662230717');
</script>
<!-- Event snippet for Submit lead form conversion page
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': 'AW-16662230717/L58rCNnA9ccZEL3tlYk-',
'value': 1.0,
'currency': 'JPY',
'event_callback': callback
});
return false;
}
</script>
</head>
<body>
<div class="container">
<h1>Register for Yugo</h1>
<form id="register-form">
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" required>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="agree-terms" required>
<label for="agree-terms">
I agree to the <a href="/legal/terms-of-use-en" target="_blank">Terms of Service</a> and
<a href="/legal/privacy-policy-en" target="_blank">Privacy Policy</a>
</label>
</div>
<button type="submit">Register</button>
</form>
<div id="message"></div>
</div>
<script src="assets/js/register-user.js"></script>
</body>
</html>