how to use form element to post member to a List

Hi @jeremyfix,

Thanks for sharing this with us.

You are correct, that endpoint has to be executed server side.

The base URL to use is https://manage.kmail-lists.com/ajax/subscriptions/subscribe which will add a user's email (and additional user properties) to any list in Klaviyo. 

This is different than the normal subscribe URL used in Klaviyo's own forms. Below is a break down of POST body properties to pass.

• g (required) - LIST_ID
• email (required) - User's email address
• $fields (optional) - This tells the Klaviyo backend which keys (additional users properties) to expect in the POST request. All properties (other than email) need to be passed as a value under $fields and as it's own key.
• $list_fields (optional) - This inherits form the $fields but would then would take a list of data and transpose it as a custom property in list format
• other properties (optional) - For each property in $fields, you want to pass a key/value pair like below:
  • $first_name: John
  • $last_name: Smith

  • Custom Property 1: Custom Value 1

  • Custom Property 2: Custom Value 2

    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": "{{LIST_ID}}",
    "$fields": "$first_name,$last_name,Favorite Color,Favorite Book,$source",
    "email": "{{email}}",
    "$first_name": "{{first_name}}",
    "$last_name": "{{last_name}}",
    "Favorite Color": "{{favorite_color}}",
    "Favorite Book": "{{favorite_book}}",
    "$source": "Custom Form"
    }
    }
    $.ajax(settings).done(function (response) {
    console.log(response);
    });

    The snippet above uses {{ }} placeholder syntax, which will need to be altered for your platform. The important part is that product fields are dynamically rendered based on which product page you're viewing.

Response

200 Success: Request was successful
400 BAD REQUEST: This happens when the email already exists.
405 METHOD NOT ALLOWED: required fields missing from the POST request

Special Properties

$first_name, $last_name, and $source are special Klaviyo properties. Here is a list of all Special Klaviyo Properties for Users:

• $id - your unique identifier for a person
• $email - email address
• $first_name - first name
• $last_name - last name
• $phone_number - phone number$
• $title -title at their business or organization
• $organization - business or organization they belong to
• $city - city they live in
• $region - region or state they live in
• $country - country they live in
• $zip - postal code where they live
• $image - url to a photo of the person
• $source - What form the user signed up with

I hope that helps.