リザーブストック(リザスト)の登録フォームを設置できました!みたいな記事はあるのに、なぜかやり方は載っていない、、、
ということで、やり方、書いてみました。
APIを使用しています。APIは無料プランでは使えないようなので、気をつけてください。
ここで掲載するコードは、
自由に使用していただいて問題ありませんが
自己責任でお使いください。
まずは、動作確認できるように簡単なコードにしています。
コピペでOKです!
ただし、セキュリティ対策などはまったくしていないので、このまま使い続けることはおすすめしません。
目次
リザストの登録フォーム HTML
<body>
<h2>メルマガ登録フォーム</h2>
<form id="subscribeForm">
<label for="lname">苗字:</label>
<input type="text" id="lname" name="lname" required>
<label for="fname">名前:</label>
<input type="text" id="fname" name="fname" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<button type="submit">登録する</button>
</form>
<div id="message" class="message"></div>
</body>リザストの登録フォーム CSS
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
display: block;
width: 80%;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.message {
margin-top: 15px;
padding: 10px;
display: none;
}
.success {
color: green;
}
.error {
color: red;
}リザストの登録フォーム JS
const apiKey = "xxxxxxxxxxxxxx"; // 固定のAPIキー
const mid = "xxxxx"; // メルマガID
document
.getElementById("subscribeForm")
.addEventListener("submit", function (event) {
event.preventDefault();
const lname = document.getElementById("lname").value;
const fname = document.getElementById("fname").value;
const email = document.getElementById("email").value;
const messageDiv = document.getElementById("message");
// セッションIDを取得
fetch(`https://www.reservestock.jp/api/create_api_session/${apiKey}`)
.then((response) => {
if (!response.ok) {
throw new Error("セッションIDの取得に失敗しました。");
}
return response.text(); // レスポンスはテキスト形式で返される
})
.then((sessionId) => {
// 読者登録APIにリクエスト
const subscribeUrl = `https://www.reservestock.jp/api/new_subscribe_api/${apiKey}?session_id=${sessionId}&mid=${mid}&email_address=${encodeURIComponent(
email
)}&lname=${encodeURIComponent(lname)}&fname=${encodeURIComponent(
fname
)}`;
return fetch(subscribeUrl, { method: "GET" });
})
.then((response) => {
if (response.status === 200) {
messageDiv.textContent =
"登録確認メールを送信しました。ご確認ください。";
messageDiv.className = "message success";
} else if (response.status === 400) {
messageDiv.textContent =
"入力内容に不備があります。再確認してください。";
messageDiv.className = "message error";
} else if (response.status === 404) {
messageDiv.textContent =
"登録先が見つかりません。管理者に問い合わせてください。";
messageDiv.className = "message error";
} else {
messageDiv.textContent = "予期しないエラーが発生しました。";
messageDiv.className = "message error";
}
messageDiv.style.display = "block";
})
.catch((error) => {
console.error("エラー:", error);
messageDiv.textContent =
"ネットワークエラーが発生しました。再度お試しください。";
messageDiv.className = "message error";
messageDiv.style.display = "block";
});
});
