React Using API to subscribe a customer to a list

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 nemail, setEmail] = useState("");
  // const ng, setG] = useState("Y4K7q2");
  //const nerros, 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

Page 1 / 1

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>
)

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

@David To Do you know how to post the profile property without the $ sign? like below image i have a “AB Test” property created by the form option check box, and how can i add this in the post request?

i have tried and doesn’t work.

const data = {
    g: listId,
    email: email ?? '',
    $fields: '$first_name,$last_name, "AB Test"',
    $first_name: firstName ?? '',
    $last_name: lastName ?? '',
    "AB Test": abtest ?? ''
  }

Thank you for your help

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded