A SalesAutopilot az egyik legfejlettebb marketingautomatizációs és hírlevélküldő rendszer, ezért előszeretettel használom szinte minden ügyfelemnél. Még ezen a honlapon is ezt használom kapcsolati űrlapként, és ezzel oldottam meg a marketingtesztet is. A SalesAutopilot szép űrlapokat kínál, amiket könnyen lehet integrálni minden weboldalba. Egyetlen hátránya van az ilyen űrlapoknak, hogy nem illeszkedik a meglévő honlapok külleméhez, és sok-sok CSS felülbírálással lehet ezt úgy-ahogy megoldani. Ezért más megoldást alkalmaztam egy feliratkozógyűjtő csalitermékes landing oldalon: saját űrlappal küldök be adatot a SalesAutopilot API rendszerébe. Azért is szeretem ezt a rendszert, mert rengeteg részletes dokumentáció jár hozzá, amit sajnos kevés más rendszer mondhat el magáról, így könnyen készíthetek egy saját űrlapot, ami illeszkedik a honlap designjához.

Így néz ki az űrlap:

Egy WordPress oldalt már olyan html+css frameworkkel készítenek, hogy minden stílus benne van, ami egy űrlapkészítéshez szükséges. Ezekből felépítünk egy html űrlapot, jelen esetben Bootstrappel:

<div class="wpb_column vc_column_container vc_col-sm-6">
    <div class="vc_column-inner">
        <label for="name">Név *</label>
        <input maxlength="50" id="name" name="name" size="30" type="text" /></div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-6">
    <div class="vc_column-inner">
        <label for="email">Email cím *</label>
        <input maxlength="50" id="email" name="email" type="email" aria-required="true" />
    </div>
</div>
<input maxlength="50" id="url" name="url" type="text" />

<div data-midnight="default" class="vc_row wpb_row vc_row-fluid">
    <div class="wpb_column vc_column_container vc_col-sm-12">
        <div class="vc_column-inner ">
            <div class="wpb_wrapper">
                <button onClick="sendContact();" class="btn btn-shortcode btn-3d btn-rounded btn-full btn-block btn-xxl btn-icon btn-icon-default-left">
                    <span><i class="fa fa-cart-plus"></i></span>
                    <span>Kérem az ingyenes tudásanyagot</span>
                </button>
            </div>
        </div>
    </div>
</div>
<div id="loading" align="center">
    <img src="/wp-content/uploads/loading.gif" />
</div>
<div id="status"></div>

Két oszlopban egymás mellé került a név és e-mail input mező, és alatta egy hatalmas gomb, a CTA. Van egy url mező is, ez lesz a honeypot captcha mezőnk. Ha egy bot beleír valami értéket, akkor az űrlap nem kerül elküldésre. Legalul egy pörgő gif, ami majd az AJAX kérés ideje alatt fog megjelenni. Az url mezőt és a töltés gifet js kód fogja eltüntetni a látogató elől.

Jöjjön a JavaScript, amiben jQuery validálja, hogy ki vannak-e töltve a mezők, és az e-mail mező tartalmaz-e kukacot és pontot.

jQuery(url).hide();
jQuery(loading).hide();

function validateContact() {
    var valid = true;	
    jQuery("#name").css('background-color','#fff');	
    jQuery("#email").css('background-color','#fff');
    if(!jQuery("#name").val()) {
        jQuery("#name").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!jQuery("#email").val()) {
        jQuery("#email").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!jQuery("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        jQuery("#email").css('background-color','#FFFFDF');
        valid = false;
    }
    return valid;
}

A jQueryt itt $ helyett jQuery előtag jelzi.

Ha sikerült a validáció, akkor jöhet az AJAX küldés:

function sendContact() {
var referrer = window.location.href;
var valid = validateContact();
    if(valid) {
        var loading = jQuery("#loading");
        jQuery(document).ajaxStart(function () {
            loading.show();
        });

        jQuery(document).ajaxStop(function () {
            loading.hide();
        });

        jQuery.ajax({
            url: "/mailmaster.php",
            data:'name='+jQuery("#name").val()+'&email='+jQuery("#email").val()+'&referrer='+referrer+'&url='+'&url='+jQuery("#url").val(),
            type: "POST",
            success:function(data){
                jQuery("#status").html(data);
            },
            error:function (){}
        });
    }
}

Végül a PHP kód, amire az AJAX kérés hivatkozik, és a /mailmaster.php néven érhető el:

    // Validáció
    if(!isset($_POST['name']) || $_POST['name']=='') {die('Hiányzik a név'); }
    if(!isset($_POST['email']) || $_POST['email']=='')  {die('Hiányzik az email cím');}
  if($_POST['url']!='' )  {die('You are a bot');}
    
    	/** SalesAutopilot beállítások START **/
  define('MM_API_USERNAME','username'); // A SalesAutopilot fiókhoz tartozó API felhasználónév
  define('MM_API_PASSWORD','xxxxxxx'); // A SalesAutopilot fiókhoz tartozó API jelszó
  define('LISTID',xxxx); // A lista azonosítója
  define('FORMID',xxxx); // A feliratkozó űrlapjának azonosítója
  /** Beállítások END **/

unset($param);
$param = array(
'email' => htmlspecialchars($_POST['email']),
'mssys_fullname' => htmlspecialchars($_POST['name']),
'mssys_referer_page' => htmlspecialchars($_POST['referrer'])
);
$data = json_encode($param);
$headers = array(
  'Accept: application/json',
  'Content-Type: application/json'
);

$handle = curl_init();
curl_setopt($handle, CURLOPT_URL, 'http://'.MM_API_USERNAME.':'.MM_API_PASSWORD.'@restapi.emesz.com/subscribe/'.LISTID.'/form/'.FORMID);
curl_setopt($handle, CURLOPT_HTTPHEADER, $headers);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
curl_setopt($handle, CURLOPT_USERAGENT, 'SalesAutopilot API');
curl_setopt($handle, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($handle, CURLOPT_POST, true);
curl_setopt($handle, CURLOPT_POSTFIELDS, $data);
$nominatorID = curl_exec($handle); 
print "E-mailben elküldtük Önnek a kért anyagot, blabla....";

Tehát nem hagyatkozunk frontendi validációra, backenden is validálunk és biztonságossá teszünk minden user inputot, amit elküldünk a SalesAutopilot rendszerébe. Mert a nyilvánosan publikált űrlapoknál két károkozóra kell odafigyelni: a rosszindulatú emberre, aki kártékony kódokat próbál injektálni az adatbázisba, és a spambotra, ami hülyeségekkel traktál plusz még kártékonykodik is.