<!-- Note : - You can modify the font style and form style to suit your website. - Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code. - The Mandatory check script can modified as to suit your business needs. - It is important that you test the modified form before going live. - Do not remove captcha and other form elements that are necessary for the form to work. --> <div id = 'crmWebToEntityForm' class = 'zcwf_lblRight crmWebToEntityForm' style = 'background-color: &#x23;FFFFFF;color: black;max-width: 600px;'> <meta name = 'viewport' content = 'width=device-width, initial-scale=1.0'> <META HTTP-EQUIV = 'content-type' CONTENT = 'text/html;charset=UTF-8'> <form id = 'webform7112863000000682018' action = 'https://crm.zoho.com/crm/WebToContactForm' name = WebToContacts7112863000000682018 method = 'POST' onSubmit = 'javascript:document.charset="UTF-8"; return checkMandatory7112863000000682018()' accept-charset = 'UTF-8'> <input type = 'text' style = 'display:none;' name = 'xnQsjsdp' value = 'adaae4f6ca79cfb6ad2ff28ee5f9784122a7a20bfe6a22bd16e1e2f53f9fb6cd'> </input> <input type = 'hidden' name = 'zc_gad' id = 'zc_gad' value = ''> </input> <input type = 'text' style = 'display:none;' name = 'xmIwtLD' value = '1411818c2d699f4b8077d3d17e327e6dc3626125bf949a5ce33074fe674ea9a3a486b48956615a520d3d2750f35bfa0e'> </input> <input type = 'text' style = 'display:none;' name = 'actionType' value = 'Q29udGFjdHM='> </input> <input type = 'text' style = 'display:none;' name = 'returnURL' value = 'null'> </input> <!-- Do not remove this code. --> <style> html,body{ margin: 0px; } .formsubmit.zcwf_button{ color: white !important; background: transparent linear-gradient(0deg, #0279FF 0%, #00A3F3 100%); } #crmWebToEntityForm.zcwf_lblRight{ width: 100%; padding: 25px; margin: 0 auto; box-sizing: border-box; } #crmWebToEntityForm.zcwf_lblRight *{ box-sizing: border-box; } #crmWebToEntityForm {text-align: left; } #crmWebToEntityForm *{ direction: ltr; } .zcwf_lblRight .zcwf_title{ word-wrap: break-word; padding: 0px 6px 10px; font-weight: bold } .zcwf_lblRight.cpT_primaryBtn:hover{ background: linear-gradient(#02acff 0,#006be4 100%)no-repeat padding-box !important; box-shadow: 0 -2px 0 0 #0159b9 inset !important; border: 0 !important; color: #fff !important; outline: 0 !important; } .zcwf_lblRight .zcwf_col_fld input[ type = text], input[ type = password], .zcwf_lblRight .zcwf_col_fld textarea{ width: 60%; border: 1px solid #c0c6cc !important; resize: vertical; border-radius: 2px; float: left; } .zcwf_lblRight .zcwf_col_lab{ width: 30%; word-break: break-word; padding: 0px 6px 0px; margin-right: 10px; margin-top: 5px; float: left; min-height: 1px; text-align: right; } .zcwf_lblRight .zcwf_col_fld{ float: left; width: 68%; padding: 0px 6px 0px; position: relative; margin-top: 5px; } .zcwf_lblRight .zcwf_privacy {padding: 6px; } .zcwf_lblRight .wfrm_fld_dpNn {display: none; } .dIB {display: inline-block; } .zcwf_lblRight .zcwf_col_fld_slt{ width: 60%; border: 1px solid #ccc; background: #fff; border-radius: 4px; font-size: 14px; float: left; resize: vertical; padding: 2px 5px; } .zcwf_lblRight .zcwf_row:after, .zcwf_lblRight .zcwf_col_fld:after{ content: ''; display: table; clear: both; } .zcwf_lblRight .zcwf_col_help{ float: left; margin-left: 7px; font-size: 14px; max-width: 35%; word-break: break-word; } .zcwf_lblRight .zcwf_help_icon{ cursor: pointer; width: 16px; height: 16px; display: inline-block; background: #fff; border: 1px solid #c0c6cc; color: #c1c1c1; text-align: center; font-size: 11px; line-height: 16px; font-weight: bold; border-radius: 50%; } .zcwf_lblRight .zcwf_row {margin: 15px 0px; } .zcwf_lblRight .formsubmit{ margin-right: 5px; cursor: pointer; color: #313949; font-size: 14px; } .zcwf_lblRight .zcwf_privacy_txt{ width: 90%; color: rgb(0, 0, 0); font-size: 14px; font-family: Arial; display: inline-block; vertical-align: top; color: #313949; padding-top: 2px; margin-left: 6px; } .zcwf_lblRight .zcwf_button{ font-size: 14px; color: #313949; border: 1px solid #c0c6cc; padding: 3px 9px; border-radius: 4px; cursor: pointer; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zcwf_lblRight .zcwf_tooltip_over{ position: relative; } .zcwf_lblRight .zcwf_tooltip_ctn{ position: absolute; background: #dedede; padding: 3px 6px; top: 3px; border-radius: 4px; word-break: break-word; min-width: 100px; max-width: 150px; color: #313949; z-index: 100; } .zcwf_lblRight .zcwf_ckbox{ float: left; } .zcwf_lblRight .zcwf_file{ width: 55%; box-sizing: border-box; float: left; } .cBoth:after{ content: ''; display: block; clear: both; } @media all and (max-width: 600px){ .zcwf_lblRight .zcwf_col_lab, .zcwf_lblRight .zcwf_col_fld{ width: auto; float: none !important; } .zcwf_lblRight .zcwf_col_help {width: 40%; } .zcwf_lblRight.zcwf_rtl .zcwf_col_lab {text-align: left; } .zcwf_lblRight.zcwf_rtl .zcwf_col_lab {text-align: right; } } </style> <div class = 'zcwf_title' style = 'max-width: 600px;color: black; font-family:Arial;'>Register</div> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab' style = 'font-size:14px; font-family: Arial;'> <label for = 'First_Name'>First Name <span style = 'color:red;'>*</span> </label> </div> <div class = 'zcwf_col_fld'> <input type = 'text' id = 'First_Name' aria-required = 'true' aria-label = 'First Name' name = 'First Name' aria-valuemax = '40' maxlength = '40'> </input> <div class = 'zcwf_col_help'> </div> </div> </div> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab' style = 'font-size:14px; font-family: Arial;'> <label for = 'Last_Name'>Last Name <span style = 'color:red;'>*</span> </label> </div> <div class = 'zcwf_col_fld'> <input type = 'text' id = 'Last_Name' aria-required = 'true' aria-label = 'Last Name' name = 'Last Name' aria-valuemax = '80' maxlength = '80'> </input> <div class = 'zcwf_col_help'> </div> </div> </div> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab' style = 'font-size:14px; font-family: Arial;'> <label for = 'Email'>Email <span style = 'color:red;'>*</span> </label> </div> <div class = 'zcwf_col_fld'> <input type = 'text' ftype = 'email' autocomplete = 'false' id = 'Email' aria-required = 'true' aria-label = 'Email' name = 'Email' aria-valuemax = '100' crmlabel = '' maxlength = '100'> </input> <div class = 'zcwf_col_help'> </div> </div> </div> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab' style = 'font-size:14px; font-family: Arial;'> <label for = 'Phone'>Phone <span style = 'color:red;'>*</span> </label> </div> <div class = 'zcwf_col_fld'> <input type = 'text' id = 'Phone' aria-required = 'true' aria-label = 'Phone' name = 'Phone' aria-valuemax = '50' maxlength = '50'> </input> <div class = 'zcwf_col_help'> </div> </div> </div> <div class = 'zcwf_row'> <div class = 'zcwf_privacy'> <div class = 'dIB vaT' align = 'left'> <div class = 'displayPurpose crm-small-font-size'> <label class = 'newCustomchkbox-md dIB w100_per'> <input autocomplete = 'off' id = 'privacyTool7112863000000682018' type = 'checkbox' aria-checked = 'false' name = '' aria-errormessage = 'privacyErr7112863000000682018' aria-label = 'privacyTool' onclick = 'disableErr7112863000000682018()'> </label> </div> </div> <div class = 'dIB zcwf_privacy_txt' style = 'font-size: 14px;font-family:Arial;color: black;'>I agree to the Privacy Policy and Terms of Service.</div> <div id = 'privacyErr7112863000000682018' aria-live = 'polite' style = 'font-size:12px;color:red;padding-left: 5px;visibility:hidden;'>Please accept this</div> </div> </div> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab' id = 'reCaptchaField' style = 'font-size:14px; font-family: Arial;'>Enter the Captcha</div> <div class = 'zcwf_col_fld'> <input type = 'text' id = 'captchaField7112863000000682018' aria-labelledby = 'reCaptchaField' aria-valuemax = '10' maxlength = '10' name = 'enterdigest'/> </div> </div> <!-- Do not remove this code. --> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab'> </div> <div class = 'zcwf_col_fld'> <img id = 'imgid7112863000000682018' src = 'https://crm.zoho.com/crm/CaptchaServlet?formId=1411818c2d699f4b8077d3d17e327e6dc3626125bf949a5ce33074fe674ea9a3a486b48956615a520d3d2750f35bfa0e&grpid=adaae4f6ca79cfb6ad2ff28ee5f9784122a7a20bfe6a22bd16e1e2f53f9fb6cd'> <a href = 'javascript:;' onclick = 'reloadImg7112863000000682018();'>Reload</a> </div> <div class = ''> </div> </div> <input type = 'text' type = 'hidden' style = 'display: none;' name = 'aG9uZXlwb3Q' value = ''/> <div class = 'zcwf_row'> <div class = 'zcwf_col_lab'> </div> <div class = 'zcwf_col_fld'> <input type = 'submit' id = 'formsubmit' role = 'button' class = 'formsubmit zcwf_button' value = 'Submit' aria-label = 'Submit' title = 'Submit'> <input type = 'reset' class = 'zcwf_button' role = 'button' name = 'reset' value = 'Reset' aria-label = 'Reset' title = 'Reset'> </div> </div> <script> function privacyAlert7112863000000682018(){ var privacyTool = document.getElementById('privacyTool7112863000000682018'); var privacyErr = document.getElementById('privacyErr7112863000000682018'); if( privacyTool != undefined && !privacyTool.checked ){ privacyErr.style.visibility = 'visible'; privacyTool.ariaInvalid = 'true'; privacyTool.focus(); return false; } return true; } function disableErr7112863000000682018(){ var privacyTool = document.getElementById('privacyTool7112863000000682018'); var privacyErr = document.getElementById('privacyErr7112863000000682018'); if( privacyTool != undefined && privacyTool.checked && privacyErr != undefined ){ privacyErr.style.visibility = 'hidden'; privacyTool.ariaInvalid = 'false'; } } /* Do not remove this code. */ function reloadImg7112863000000682018(){ var captcha = document.getElementById('imgid7112863000000682018'); if( captcha.src.indexOf( '&d' ) !== -1 ){ captcha.src = captcha.src.substring(0, captcha.src.indexOf('&d')) + '&d' + new Date().getTime(); } else{ captcha.src = captcha.src + '&d' + new Date().getTime(); } } function historyBack7112863000000682018(){ document.querySelector('.crmWebToEntityForm .formsubmit').removeAttribute('disabled'); reloadImg7112863000000682018(); window.removeEventListener('focus', historyBack7112863000000682018); } function validateEmail7112863000000682018(){ var form = document.forms[ 'WebToContacts7112863000000682018' ]; var emailFld = form.querySelectorAll('[ftype=email]'); var i; for( i = 0; i < emailFld.length; i++ ){ var emailVal = emailFld[ i ].value; if((emailVal.replace( /^\s+|\s+$/g,'' )).length != 0 ){ var atpos = emailVal.indexOf('@'); var dotpos = emailVal.lastIndexOf('.'); if( atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal.length ){ alert('Please enter a valid email address. '); emailFld[ i ].focus(); return false; } } } return true; } function checkMandatory7112863000000682018(){ var mndFileds = new Array('First Name', 'Last Name', 'Email', 'Phone'); var fldLangVal = new Array('First\x20Name', 'Last\x20Name', 'Email', 'Phone'); for( i = 0; i < mndFileds.length; i++ ){ var fieldObj = document.forms[ 'WebToContacts7112863000000682018' ][ mndFileds[ i ]]; if( fieldObj ){ if(((fieldObj.value ).replace( /^\s+|\s+$/g,'' )).length == 0 ){ if( fieldObj.type == 'file' ){ alert('Please select a file to upload.'); fieldObj.focus(); return false; } alert(fldLangVal[ i ] + ' cannot be empty.'); fieldObj.focus(); return false; } else if( fieldObj.nodeName == 'SELECT' ){ if( fieldObj.options[fieldObj.selectedIndex].value == '-None-' ){ alert(fldLangVal[ i ] + ' cannot be none.'); fieldObj.focus(); return false; } } else if( fieldObj.type == 'checkbox' ){ if( fieldObj.checked == false ){ alert('Please accept ' + fldLangVal[ i ]); fieldObj.focus(); return false; } } try{ if( fieldObj.name == 'Last Name' ){ name = fieldObj.value; } } catch(e){} } } if( !validateEmail7112863000000682018()){ return false; } if( !privacyAlert7112863000000682018()){ return false; } var urlparams = new URLSearchParams(window.location.search); if( urlparams.has( 'service' ) && ( urlparams.get( 'service' ) === 'smarturl' )){ var webform = document.getElementById('webform7112863000000682018'); var service = urlparams.get('service'); var smarturlfield = document.createElement('input'); smarturlfield.setAttribute('type', 'hidden'); smarturlfield.setAttribute('value', service); smarturlfield.setAttribute('name', 'service'); webform.appendChild(smarturlfield); } document.querySelector('.crmWebToEntityForm .formsubmit').setAttribute('disabled', true); window.addEventListener('focus', historyBack7112863000000682018); } function tooltipShow7112863000000682018(el){ var tooltip = el.nextElementSibling; var tooltipDisplay = tooltip.style.display; if( tooltipDisplay == 'none' ){ var allTooltip = document.getElementsByClassName('zcwf_tooltip_over'); for( i = 0; i < allTooltip.length; i++ ){ allTooltip[ i ].style.display = 'none'; } tooltip.style.display = 'block'; } else{ tooltip.style.display = 'none'; } } </script> </form> <!-- Do not remove this code. --> <iframe name = 'captchaFrame' style = 'display:none;'> </iframe> </div>