Auto-import contacts into your getresponse campaign with pure javascript

Getresponse is email marketing software used by many online product companies. When users come to a product site then they make the purchase and pay through clickbank or any other checkout processing gateways.

So, after successful transaction you need to configure your payment gateway to redirect back user to your site with  some querystring retailed that contains customer’s name and email.

Example Click-bank after transaction url

https://ssl.clickbank.net/order/orderform.html?time=1382448325&vvvv=70696e6561756c747461&item=1&vtid=main&cbskin=4932&cbfid=11481&cbf=WKCT4E9B6Y&vvar=cbskin%3D4932%26cbfid%3D11481%26vtid%3Dmain&oaref=01.01C09611779553558F233CF79F80FA562603990E2AAF4BF9D32A856595B753592ABDF0D6091B7B1F5774E50644430A703EF496DD54055C6206B26E2B571EA2F5E999675A

Should be redirct to your site with buyers’ name and email

http://yourwebsite.com/orderconfirm.php?item=1&cbreceipt=M9BSEK2N&time=1382448327&cbpop=D58D53F6&cbaffi=0&cupsellreceipt=M9BSEK2N&ccountry=IN&czip=395001&cbskin=4932&cbfid=11481&vtid=main&cbf=WKCT4E9B6Y&cname=Vikas&[email protected]

Now we know that querystring contains,

cname=Vikas
[email protected]

So we can code a script on this orderconfirm.php page that will auto send this information to getresponse form api.

Basic Setup:-

1. Login to your GetResponse account.
2. Find Web Forms from Top menu.
3. Click Create New
4. Choose Design
5. Then in settings, fill up Web Form Name, Turn off Confirmed opt-in (so user will be directly confirm without verification email) and choose Stay on current page
6. Click advance and choose campaign for subscription, choose welcome message and set other criteria.
7. Click Next and Look into Show HTML Code (turn off include css styles)
8. Get HTML code into notepad.

Find the webform _id from your HTML code

<input type="hidden" name="webform_id" value="640305" />

and then, create and paste it in this HTML form on confirmation.php

<div style="display: none;">
	<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html" id="GRSubscribeForm" method="post" >
		<input type="hidden" id="subscriber_name" name="name" />
		<input type="hidden" id="subscriber_email" name="email" />
        <!-- copy following line from your GR HTML form code -->
		<input type="hidden" name="webform_id" value="640305" />
	</form>
</div>

Include GetResponse script file in your order confirmation page.

<script src="getresponse.js" type="text/javascript"></script>

Initialize Script at bottom of your page (just before </body> tag)

GetResponse.init({
    "name_param": "cname",
    "email_param": "cemail",
    "form_id": "GRSubscribeForm",
    "name_field_id": "subscriber_name",
    "email_field_id": "subscriber_email"
}).prepare().send();

You can see you could customize querystring parameters cname & cemail in above options. Even specify form fields identifiers.

Script Code

var GetResponse = (function () {

    var defaults = {

        name_param: "cname",
        email_param: "cemail",

        form_id: "GRSubscribeForm",
        name_field_id: "subscriber_name",
        email_field_id: "subscriber_email"

    }

    var __form_object;

    var __errors = [];

    var QueryString = {
        // parsing querystring
        param: function (key) {
            var qs = window.location.search.toString().replace("?", "");
            if (qs.length != 0) {
                qs_parts = qs.split("&");
                for (k in qs_parts) {
                    qs_subparts = qs_parts[k].match(/(.+)?=(.+)?/);
                    if (typeof (qs_subparts[2]) != "undefined" && qs_subparts[1] == key) {
                        return qs_subparts[2];
                    }
                }
                return "";
            } else {
                return "";
            }
        }
    };

    var initScript = function (options) {
        // overriding defaults
        for (var opt in options) {
            if (typeof (options[opt] != "undefined")) {
                defaults[opt] = options[opt];
            }
        }
        return this;
    };

    var setParams = function () {
        // exit if form id not found
        __form_object = document.getElementById(defaults.form_id);

        if (__form_object == null) {
            __errors.push("Form not found");
            __errors.push("Please check id attraibute '".concat(defaults.form_id).concat("' supplied exist on page"));
            return this;
        }

        document.getElementById(defaults.form_id).setAttribute("target", "GRFrame");
        document.getElementById(defaults.form_id).setAttribute("method", "post");
        document.getElementById(defaults.name_field_id).setAttribute("value", QueryString.param(defaults.name_param));
        document.getElementById(defaults.email_field_id).setAttribute("value", QueryString.param(defaults.email_param));

        return this;
    }

    var handleErrors = function () {
        if (__errors.length > 0) {
            var error_message = __errors.join("\n");
            alert(error_message);
            return false;
        }
        return true;
    };

    var sendRequest = function () {

        if (!handleErrors()) {
            return false;
        }
        buildIframe();
        document.getElementById(defaults.form_id).submit();
    };

    var buildIframe = function () {

        var ifrm = document.createElement('iframe');
        ifrm.id = "GRFrame";
        ifrm.setAttribute("name", "GRFrame");
        ifrm.setAttribute("src", "#");
        ifrm.style.display = "none";
        document.querySelector("body").appendChild(ifrm);

    }

    return {
        init: initScript,
        prepare: setParams,
        send: sendRequest
    }

}());

Above script will,

• Set all options supplied into init() options.
• Then parse querystring and read cname and cemail variables
• Fill them into GetResponse HTML form.
• After that It’ll create hidden iframe.
• Finally submits form into it.
• So that these email and name will be auto-imported into your GR campaign.
• Here, no jQuery or other library = pure javascript.