The One Form | Test

theone.unxt.ca.html

<style><!--
#message-two {color:black; margin:-30px 0 10px 0;font-weight:700;} 
.fblock-two {display:inline-block; width: 100px; text-align:right !important: margin: 2px 7px 2px 0; float:left:} 
.rblock-two {width: 95%; margin: 4px 7px 4px 10px; float:left: clear:both !important;} 
.formwidth-two { display: block; width:auto !important; padding-top:0px;} 
input { outline: none; padding:6px; border-radius: 5px; width : 190px; margin: 0; -webkit-box-sizing: border-box; 
/* For legacy WebKit based browsers */ -moz-box-sizing: border-box; 
/* For all Gecko based browsers */ 
box-sizing: border-box; } 
input[type="number"],input[type="text"],input[type="email"]{   
padding:6px; border: 2px solid #B2B2B2; text-transform:uppercase; border-radius: 5px; margin: 0; -webkit-box-sizing: border-box; 
/* For legacy WebKit based browsers */ -moz-box-sizing: border-box; 
/* For all Gecko based browsers */ 
    margin: 2px 7px 2px 10px;
    color: #666666!important;
    font-size: 18px!important;
    font-weight: 400!important;
    line-height: 24px!important;
    background-color: #fff!important;}
input[type="text"]:focus,input[type="email"]:focus,input[type="number"]:focus {outline: none; border: 2px solid #777!important;}
.subbtn-two {background-color: #1b2735;font-weight:700; color: white !important; margin: 6px 0 10px 0px;cursor: pointer;border: 2px solid rgba(255, 255, 255, 0.85);border-radius: 5px; font-size:17px; padding:10px 8px;} 
.subbtn-two:after {content: " >>>";}
.subbtn-two:hover, .subbtn-two:focus {background-color: rgba(0, 0, 0, 0.5); color: white !important;}
--></style>

<script>
    window.onload = function() {

        var Conversion_URL_Long__c = window.location.href;
        document.getElementById("this_url").value = Conversion_URL_Long__c;

        var trp_first = getUrlVars()["trp_first"];
        var trp_last = getUrlVars()["trp_last"];
        var trp_phone = getUrlVars()["trp_phone"];
        var trp_email = getUrlVars()["trp_email"].replace(/%40/g, "@");

        if (trp_first !== "FirstName") document.getElementById("FirstName").value = trp_first;
        if (trp_last !== "LastName") document.getElementById("LastName").value = trp_last;
        if (trp_phone !== "PhoneNumber") document.getElementById("Phone").value = trp_phone;
        if (trp_email) document.getElementById("Email").value = trp_email;

        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
                vars[key] = value;
            });
            return vars;
        }
    }
</script>

<script>

function Check_email(val){
    
document.getElementById('email-check').style.display="none";
    if(!val.match(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/)){ 
    document.getElementById('email-check').style.display="block";
        return false;
    } else {
    if( val.indexOf(' ')!=-1 || val.indexOf('..')!=-1){
    document.getElementById('email-check').style.display="block";
        return false;
    } else {    document.getElementById('email-check').style.display="none";
    return true;}
    }

}

function EnterPhone(input)
{
 var value = input.value; 
 var rep = /[-.;":'a-zA-Z]/; 
 
    if (rep.test(value)) { 
        value = value.replace(rep, ''); 
        input.value = value; 
    } 
}

function PhoneCheck(value) {
    if (value.length<10) {
        document.getElementById('phone-check').style.display="block";
    } 
    else {
        document.getElementById('phone-check').style.display="none";
    }
}

function CheckF() {
    if (document.getElementById('FirstName').value=='') {
        document.getElementById('fname-check').style.display="block";
        return false;
    } 
    else {
        document.getElementById('fname-check').style.display="none";
        }
        }
        
function CheckL() {
        if (document.getElementById('LastName').value=='') {
        document.getElementById('lname-check').style.display="block";
        return false;
    } 
    else {
        document.getElementById('lname-check').style.display="none";
        }}

function FormCheck() {
reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if (document.getElementById('FirstName').value=='') {
        document.getElementById('fname-check').style.display="block";
        return false;
    } 
    else {
        document.getElementById('fname-check').style.display="none";
    if (document.getElementById('LastName').value=='') {
        document.getElementById('lname-check').style.display="block";
        return false;
    } 
    else {
        document.getElementById('lname-check').style.display="none";
    if (document.getElementById('Phone').value.length<10) {
        document.getElementById('phone-check').style.display="block";
        return false;
    } 
    else {
        document.getElementById('phone-check').style.display="none";
    if (!document.getElementById('Email').value.match(reg)) {
        document.getElementById('email-check').style.display="block";
        return false;
    } 
    else {
        document.getElementById('email-check').style.display="none";
        return true;
        
    }
    }
    }
    }
    
    
}
</script>

<center>
        <form method="post" enctype="application/x-www-form-urlencoded" action="https://app-abq.marketo.com/index.php/leadCapture/save" id="mktoForm_1191" name="mktoForm_1191" class="formwidth-two" style="margin-top:10%; max-width: 300px;">
            <input class="rblock-two" style="padding: 12px !important; margin: 4px 7px 4px 10px !important;" type="text" placeholder="First name" name="FirstName" id="FirstName" value=""   onchange="CheckF();"><br>
            <div id="fname-check" style="display:none;color:rgb(222, 53, 25);">Please enter your first name</div>
            
            <input class="rblock-two" style="padding: 12px !important; margin: 4px 7px 4px 10px !important;" type="text" placeholder="Last name" name="LastName" id="LastName" value=""   onchange="CheckL();"><br>
            <div id="lname-check" style="display:none;color:rgb(222, 53, 25);" >Please enter your last name</div>
            
            <input class="rblock-two" style="padding: 12px !important; margin: 4px 7px 4px 10px !important;" maxlength="11" minlength="10" type="number" placeholder="Phone Number" name="Phone" id="Phone" value="" onKeyUp="return EnterPhone(this);" onchange="PhoneCheck(this.value);"><br>
           
           <div id="phone-check" style="display:none;color:rgb(222, 53, 25);">Please enter a valid phone number. For example 4161234567 or 14161234567</div>
           
           <input class="rblock-two" style="padding: 12px !important;" placeholder="Email" name="Email" id="Email" value="" type="email" onchange="Check_email(this.value);" onKeyUp="Check_email(this.value);"><br>

           <div id="email-check" style="display:none;color:rgb(222, 53, 25);">Please enter a valid email address and press "Register"</div>

          <div class="checkbox"> <label> <input type="checkbox" name="Is_A_Realtor__c" value="yes"> I'm a Realtor® </label> </div>

            <input id="contact_captured_on" type="hidden" name="contact_captured_on" value="">
            <input id="contact_conversion_url" type="hidden" name="contact_conversion_url">
            <input type="hidden" name="munchkinId" value="615-KOO-288">
            <input type="hidden" name="formid" value="1191">
            <input type="hidden" name="returnURL" value="http://theone.unxt.ca/thank-you/">
            <input type="hidden" name="retURL" value="http://theone.unxt.ca/thank-you/">
            <input type="hidden" name="_mkt_disp" value="return">
            <input type="hidden" name="_mkt_trk" value="">
            <input type="hidden" name="Inquiry_Interest_Id__c" value="1619">
            <input type="hidden" name="Conversion_URL_Long__c" id="this_url" value="">
            <input type="hidden" name="Inquiry_Interest__c" id="project_name" value="Imagine">
            <br>
            <input type="submit" class="btn btn-danger w100 flat-btn" value="REGISTER"  onclick="return FormCheck();">
            
        </form>
    </center><center><span style="line-height:10px;font-size:10px;color:lightgray; max-width: 300px;">By providing your email address,<br>TheRedPin will continue to communicate with you, digitally.<br>You can unsubscribe at any time.</span></center>