In my last post I showed you how to set up a simple email signup form, that would subscribe your users to Jetpack to receive your posts as they are published and at the same time add them into Intercom. This post is pretty similar, but instead of sending our users to Jetpack, I will show you how to grab Thrive Leads (a popular marketing plugin) submissions and send them into Intercom, and at the same time add some handy data about where they came from.
OK so let’s assume you are going to do a multi-part blog post (like this one), and with Thrive Leads plugin installed you have set up a shortcode that will allow your users to easily sign up in part 1/2/3 to receive the subsequent parts of the series (see [thrive_2step id=’10928′]an example here[/thrive_2step]), or possibly an exit intent popup like we use on Codeable blog. Either way, this translates into HTML, and that gives us something we can target in javascript.
Now, unfortunately, we can’t just choose our own HTML and target it willy nilly. This is because Thrive Leads forms are attached using its own jquery object and also because the form is already submitted using javascript/ajax. So we have to get creative and by creative I mean digging into the Thrive Leads codebase and finding out its inner-workings. Luckily I did this for you and I can tell you that to target all your Thrive Leads signup forms you can use the following jQuery event binding code (when I say all I have tested this on Lightbox and on shortcode based forms).
ThriveGlobal.$j( 'body' ).on( 'submit', '.tve-leads-conversion-object form',function(e) {
});
I believe I did have this working on a normal jQuery handler, but I believe the above will be the most reliable way to capture the submission — obviously it is wrapped in the traditional:
jQuery(function($) {
});
So – now to what we do with the submission:
ThriveGlobal.$j( 'body' ).on( 'submit', '.tve-leads-conversion-object form',function(e) {
e.preventDefault();
var __this = $(this);
var type = __this.closest( '.tve-leads-conversion-object' ).attr( 'data-tl-type' );
sendToIntercom(__this,'subscribed_on','TL ('+type+'): ' + codeableVars.current_post);
});
First, we prevent the submission event (this has already technically been stopped by Thrive Leads event handler but why not be thorough). Save the form to the __this variable and then a very important part. If you examine the HTML of one of your Thrive Leads forms you will see that the wrapping element with the tve-leads-conversion-object class has a data attribute type, which tells you if it is a lightbox or another type of form. We can send that data into Intercom so why not.
And finally the sendToIntercom() function, into which we pass the form object, the name of a tag (if you work with Intercom you will know what I mean by tag) and what you want to save in that tag. In this case, I am saving TL for Thrive Leads, the type of form submitted in brackets, and the title of the current post. As previously explained the codeableVars variable is a JSON object sent into the javascript via wp_localize_script and I have saved the title of the current post into that object. Here is the function in full:
var sendToIntercom = function(el,tagName,value,callback) {
el.after(codeable_spinner);
var data = {
name: el.find("input[name*='name']").val(),
email: el.find("input[name*='email']").val(),
tag: tagName,
value: value,
action: 'send_to_intercom',
security: codeableVars.security
}
$.post(codeableVars.ajaxurl,data,function(response) {
if (response.message) {
$("#spinner").replaceWith(""+response.message+"");
}
});
if (typeof(callback) == "function") {
return callback();
} else {
return true;
}
}
So you can see that the first thing we do is insert a spinny gif after the form var codeable_spinner = '<img id="codeable_spinner" src="'+codeableVars.spinner+'" />' again this is saved and sent through from PHP via my codeableVars object.
We then store all the data we need into a data variable, and send it through an ajax post request to admin-ajax.php (codeableVars.ajaxurl), before replacing the spinner with the message from the response. Then note the fourth parameter in the function callback, I have made this optional by checking if a function has been sent in, and if so using it for the return value.
if (typeof(callback) == "function") {
return callback();
} else {
return true;
}
On the PHP side the handler for the post request is as follows:
add_action('wp_ajax_send_to_intercom','ajax_send_to_intercom');
add_action('wp_ajax_nopriv_send_to_intercom','ajax_send_to_intercom');
function ajax_send_to_intercom() {
check_ajax_referer('_-codeable_-_ajax_-_security-_','security');
if (!is_email($_POST['email'])) {
$response = array(
'success' => false,
'message' => 'Please enter a valid email'
);
wp_send_json($response);
}
$data = array(
'name' => $_POST['name'],
'email' => $_POST['email'],
'custom_attributes' => array($_POST['tag'] => $_POST['value'])
);
$response = wswp_make_api_call($data);
wp_send_json(array('response' => $response,'message' => 'Thank you for signing up'));
}
You can see we check the nonce – do a little validation and then again make use of the wswp_make_api_call function to send the data to intercom: you can see that function in last week’s post. And that’s it, we have caught the submission of our Thrive Leads forms and sent our signed-up users into Intercom.
Need help enhancing your WordPress website? Want to build up your e-commerce? Tell our 200+ WordPress experts what you need and have them take care of it.
