Hi there, we are trying to make our own form in React, and we have followed the instruction from this page https://help.klaviyo.com/hc/en-us/articles/115005080167-How-to-Redirect-Existing-Signup-Forms-to-Klaviyo
but we are getting "List does not exist” either with fetch or in axios
{data: Object, success: false, errors: Array(1)}
data: Object
success: false
errors: Array(1)
0: "List does not exist."import React, { useState } from "react";
export default function App() {
const [email, setEmail] = useState("");
// const [g, setG] = useState("Y4K7q2");
//const [erros, setErrors] = useState("");
const g = "Y4K7q2";
const onEmailChange = (e) => setEmail(e.target.value);
const handleSubmit = (e) => {
e.preventDefault();
var data = { g, email };
console.log(data);
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
data: {
g: "Y4K7q2",
email: "dev@vanewebsite.com"
// $source: "Custom Form"
}
};
fetch(
"https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
requestOptions
)
.then((response) => response.json())
.then((res) => console.log(res));
};
return (
<div className="App">
<form>
{/* <input placeholder="g" type="hidden" name="g" value="Y4K7q2" /> */}
<input
placeholder="Emial"
value={email}
onChange={onEmailChange}
required
/>
<button type="submit" onClick={handleSubmit}>
Create Post
</button>
</form>
</div>
);
}
but the example from the instruction page which using jquery is working fine
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button>
<script>
var settings = {
async: true,
crossDomain: true,
url: "https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
method: "POST",
headers: {
"content-type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
data: {
g: "Y4K7q2",
email: "dev@vanewebsite.com"
// $source: "Custom Form"
}
};
console.log(settings, "settings");
$.ajax(settings).done(function (response) {
console.log(response);
});
</script>
</body>
</html>
{data: Object, success: true, errors: Array(0)}
data: Object
is_subscribed: true
success: true
errors: Array(0)Just wondering how to solve this, Thanks
