React Using API to subscribe a customer to a list


Badge

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


2 replies

Badge

Solved with this example

const emailRef = useRef(null)
const firstNameRef = useRef(null)
const lastNameRef = useRef(null)
const onSubmit = (event) => {
event.preventDefault()
const email = emailRef.current?.value
const firstName = firstNameRef.current?.value
const lastName = lastNameRef.current?.value
const data = {
g: listId,
email: email ?? '',
$fields: '$first_name,$last_name',
$first_name: firstName ?? '',
$last_name: lastName ?? '',
}
const urlData = new URLSearchParams(data)
fetch(`https://manage.kmail-lists.com/ajax/subscriptions/subscribe`, {
method: 'POST',
body: urlData,
})
}
return (
<form onSubmit={onSubmit}>
<input type="email" name="email" placeholder="Email" ref={emailRef} />
<input type="text" name="firstName" placeholder="First Name" ref={firstNameRef} />
<input type="text" name="lastName" placeholder="Last Name" ref={lastNameRef} />
<button type="submit">Subscribe to newsletter</button>
</form>
)

 

Userlevel 7
Badge +48

Hey @devharry,

Glad you were able to resolve your own issue and sharing the resource that helped you get your answer!

Thanks for being a part of the Klaviyo Community!

David

Reply