<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Register</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body { font-family:sans-serif; max-width:520px; margin:2rem auto; }
label { display:block; margin:.5rem 0 .25rem; }
input, select, button { width:100%; padding:.6rem; }
.msg { margin-top:1rem; }
</style>
</head>
<body>
<h1>Register</h1>
<form id="regForm">
<label for="name">Name</label>
<input id="name" name="name" required />
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<label for="language">Language</label>
<select id="language" name="language" required>
<option value="Arabic">Arabic</option>
<option value="English">English</option>
</select>
<button type="submit">Submit</button>
</form>
<div id="msg" class="msg"></div>
<script>
const FLOW_URL = '***PASTE_YOUR_FLOW_URL_HERE***';
const API_KEY = '***OPTIONAL_BUT_RECOMMENDED_SECRET***'; // must match flow variable
document.getElementById('regForm').addEventListener('submit', async (e) => {
e.preventDefault();
const msg = document.getElementById('msg');
msg.textContent = 'Submitting...';
const payload = {
name: document.getElementById('name').value.trim(),
email: document.getElementById('email').value.trim(),
language: document.getElementById('language').value
};
try {
const res = await fetch(FLOW_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY
},
body: JSON.stringify(payload)
});
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json().catch(() => ({}));
msg.textContent = data.message || 'Registered successfully.';
e.target.reset();
} catch (err) {
msg.textContent = 'Failed: ' + err.message + '. If this is CORS, use the proxy approach.';
}
});
</script>
</body>
</html>