Campaign Monitor Ajax form submission

Question

Campaign Monitor seems to have updated their code snippets to use a different method of submitting the forms. Now in the <form> tag there's a data-id attribute. None of the usual ways of submitting the forms using Ajax work anymore. Does anybody know how to use Ajax to submit the new style of Campaign Monitor forms?

Here's the code snippet Campaign Monitor gives me:

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="A61C50BDC994654B1D79D5719EC1255C09788D1CED7F46D508DAE8944C2CB34BA5EC78954EB81FB5F54AD0716B1F245E696D5CFAF72B819D19DC3B44517">    
<p>
    <label for="fieldEmail">Email</label>
    <br />
    <input id="fieldEmail" name="cm-wmpt-wmpt" type="email" class="js-cm-email-input"
    required />
</p>
<p>
    <button class="js-cm-submit-button" type="submit">Subscribe</button>
</p>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

Answer 1

I emailed their support, so I can answer the question myself. They've replaced all the old methods with their API. You need to have the form's action set to your own endpoint (e.g. signup.php).

I'm using PHP, so I downloaded their PHP API wrapper from https://github.com/campaignmonitor/createsend-php. A simple example is like this:

require_once 'lib/campaignmonitor/csrest_subscribers.php';

$auth = array(
    'api_key' => 'Your API key'
);
$wrap = new CS_REST_Subscribers( 'Your list ID', $auth );

$result = $wrap->add( array(
    'EmailAddress' => 'Subscriber email',
    'Name' => 'Subscriber name',
    'CustomFields' => array(
        array(
            'Key' => 'Field 1 Key',
            'Value' => 'Field Value'
        ),
        array(
            'Key' => 'Field 2 Key',
            'Value' => 'Field Value'
        ),
        array(
            'Key' => 'Multi Option Field 1',
            'Value' => 'Option 1'
        ),
        array(
            'Key' => 'Multi Option Field 1',
            'Value' => 'Option 2'
        )
    ),
    'ConsentToTrack' => 'yes',
    'Resubscribe' => true
) );

Update: Here's my complete PHP if you're curious:

require_once 'libs/campaignmonitor/csrest_subscribers.php';

$success_message = 'You\'ve been signed up for our email list.';
$error_message_general = 'There was a problem signing you up for the email list. Please try again.';
$error_message_format = 'Please enter a valid email address.';

if ( $_SERVER[ 'REQUEST_METHOD' ] !== 'POST' ) {
    renderResponse( true, $error_message_general );
}
else {

    $api_key = 'your_api_key_here';
    $list_id = 'your_list_id_here';

    $email = array_key_exists( 'email', $_POST ) ? $_POST[ 'email' ] : '';
    $email = cleanInput( $email );

    if ( filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {
        try {
            $auth = array(
                'api_key' => $api_key
            );
            $wrap = new CS_REST_Subscribers( $list_id, $auth );

            $result = $wrap->add( array(
                'EmailAddress' => $email,
                'ConsentToTrack' => 'yes',
                'Resubscribe' => true
            ) );

            if ( $result->was_successful() )
                renderResponse( false, $success_message );
            else
                renderResponse( true, $error_message_general );
        }
        catch ( Exception $e ) {
            renderResponse( true, $error_message_general );
        }
    }
    else {
        renderResponse( true, $error_message_format );
    }

}

function renderResponse( $error, $message ) {
    header( 'Content-Type: application/json' );
    $result = [
        'error' => $error,
        'message' => $message
    ];
    echo json_encode( $result );
    die();
}

function cleanInput( $data ) {
    $data = trim( $data );
    $data = stripslashes( $data );
    $data = htmlspecialchars( $data );
    return $data;
}