Untitled
5 years ago in HTML
<meta charset="utf-8">
<script type="text/javascript">
var zf_MandArray = ["Name_First", "Name_Last", "Email", "PhoneNumber_countrycode", "SingleLine"];
var zf_FieldArray = ["Name_First", "Name_Last", "Email", "PhoneNumber_countrycode", "SingleLine", "MultiLine"];
function validateAndSubmit() {
if(checkMandatory() && checkFormat()) {
// Send to Google Analytics
if (typeof gtag === "function") {
gtag('event', 'send', { 'event_category': 'formulario' });
} else if(typeof window.parent.gtag === "function") {
window.parent.gtag('event', 'send', { 'event_category': 'formulario' });
}
return true;
}
return false;
}
function checkMandatory() {
for (i = 0; i < zf_MandArray.length; i++) {
var fieldObj = document.forms.form[zf_MandArray[i]];
if (fieldObj) {
if (fieldObj.nodeName != null) {
if (fieldObj.nodeName == 'OBJECT') {
if (!zf_MandatoryCheckSignature(fieldObj)) {
showErrorMsg(zf_MandArray[i]);
return false;
}
} else if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length == 0) {
if (fieldObj.type == 'file') {
fieldObj.focus();
showErrorMsg(zf_MandArray[i]);
return false;
}
fieldObj.focus();
showErrorMsg(zf_MandArray[i]);
return false;
} else if (fieldObj.nodeName == 'SELECT') {// No I18N
if (fieldObj.options[fieldObj.selectedIndex].value == '-Select-') {
fieldObj.focus();
showErrorMsg(zf_MandArray[i]);
return false;
}
} else if (fieldObj.type == 'checkbox' || fieldObj.type == 'radio') {
if (fieldObj.checked == false) {
fieldObj.focus();
showErrorMsg(zf_MandArray[i]);
return false;
}
}
} else {
var checkedValsCount = 0;
var inpChoiceElems = fieldObj;
for (var ii = 0; ii < inpChoiceElems.length; ii++) {
if (inpChoiceElems[ii].checked === true) {
checkedValsCount++;
}
}
if (checkedValsCount == 0) {
inpChoiceElems[0].focus();
showErrorMsg(zf_MandArray[i]);
return false;
}
}
}
}
return true;
}
function checkFormat() {
var isValid = true;
for (ind = 0; ind < zf_FieldArray.length; ind++) {
var fieldObj = document.forms.form[zf_FieldArray[ind]];
// Check Format
if (fieldObj) {
if (fieldObj.nodeName != null) {
var checkType = fieldObj.getAttribute("checktype");
if (checkType == "emailFormat") {// No I18N
if (!validateEmailID(fieldObj)) {
isValid = false;
fieldObj.focus();
showErrorMsg(zf_FieldArray[ind]);
return false;
}
} else if (checkType == "phoneFormat") {// No I18N
if (!validatePhone(fieldObj)) {
isValid = false;
fieldObj.focus();
showErrorMsg(zf_FieldArray[ind]);
return false;
}
}
}
}
}
return isValid;
}
function validatePhone(inpElem) {
var phoneFormat = parseInt(inpElem.getAttribute("phoneFormat"));
var fieldInpVal = inpElem.value.replace(/^\s+|\s+$/g, '');
var toReturn = true;
if (phoneFormat === 1) {
if (inpElem.getAttribute("valType") == 'code') {
var codeRexp = /^[+][0-9]{1,4}$/;
if (fieldInpVal != "" && !codeRexp.test(fieldInpVal)) {
return false;
}
} else {
var IRexp = /^[+]*[()0-9- ]+$/;
if (fieldInpVal != "" && !IRexp.test(fieldInpVal)) {
toReturn = false;
return toReturn;
}
}
return toReturn;
} else if (phoneFormat === 2) {
var InpMaxlength = inpElem.getAttribute("maxlength");
var USARexp = /^[0-9]+$/;
if (fieldInpVal != "" && USARexp.test(fieldInpVal) && fieldInpVal.length == InpMaxlength) {
toReturn = true;
} else if (fieldInpVal == "") {
toReturn = true;
} else {
toReturn = false;
}
return toReturn;
}
}
function validateEmailID(elem) {
var check = 0;
var emailValue = elem.value;
if (emailValue != null && !emailValue == "") {
var emailArray = emailValue.split(",");
for (i = 0; i < emailArray.length; i++) {
var emailExp = /^[\w]([\w\-.+'/]*)@([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,22}$/;
if (!emailExp.test(emailArray[i].replace(/^\s+|\s+$/g, ''))) {
check = 1;
}
}
if (check == 0) {
return true;
} else {
return false;
}
} else {
return true;
}
}
function showErrorMsg(uniqName){
var fldLinkName;
for( errInd = 0 ; errInd < zf_FieldArray.length ; errInd ++ ) {
fldLinkName = zf_FieldArray[errInd].split('_')[0];
document.getElementById(fldLinkName+"_error").style.display = 'none';
}
var linkName = uniqName.split('_')[0];
document.getElementById(linkName+"_error").style.display = 'block';
}
function bindLimitTextBox() {
var a = document.getElementsByTagName("textarea");
var interval = null;
for(var i=0; i < a.length; i++) {
var maxLen = a[i].getAttribute("maxlength");
if(maxLen == null ) {
continue;
}
var o = a[i];
o.onfocus = function () {
interval = window.setInterval(function() {
return applyLimit(o, maxLen);
}, 100);
};
o.onblur = function () {
clearInterval(interval);
applyLimit(o, maxLen);
};
applyLimit(o, maxLen);
}
}
function applyLimit(obj, limit) {
var val = obj.value;
var valClean = val.replace(/\r\n?|\n/g, "\r\n");
var length = valClean.length;
var diff = limit - length;
var originalscroll = obj.scrollTop;
// HTML OBJECTS
var limitTextBox = document.getElementsByClassName('limitTextBoxBar')[0];
var limitTextBoxInner = document.getElementsByClassName('limitTextBoxBarInner')[0];
var limitTextBoxInfoWrpr = document.getElementsByClassName('limitTextBoxBarInfoWrpr')[0];
var spanishVersion = "True";
if (length > limit) {
if (valClean.substring(valClean.length - 1) == '\n') {
valClean = valClean.substring(0, limit - 1);
} else {
valClean = valClean.substring(0, limit);
}
valClean = valClean.replace(/\r\n/g, "\n");
obj.value = valClean; //$this.val(valClean);
obj.scrollTop = originalscroll; //$this.scrollTop(originalscroll);
}
if (limitTextBoxInner.innerHTML != limit - length) {
var percent = Math.round(100 - (diff / limit) * 100);
limitTextBoxInner.style.width = percent + '%';
}
if (diff < 0)
diff = 0;
if (spanishVersion == 'True'){
limitTextBoxInfoWrpr.innerHTML = (diff + ' caracter' + (diff != 1 ? 'es' : '') + ' restantes');
} else {
limitTextBoxInfoWrpr.innerHTML = (diff + ' character' + (diff != 1 ? 's' : '') + ' left');
}
}
window.onload = function() {
bindLimitTextBox();
}
</script>
<style type="text/css">
/**
*********** MODULE HEAD *****************
*/
.moduleHead {
overflow: hidden;
background: #798190;
}
.moduleHead .moduleTitle {
color: #FFF;
text-align: center;
font-size: 1.3em;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
}
/**
*********** MODULE CONTENT *****************
*/
.moduleContent {
background: #798190;
padding: 10px 9% 25px;
text-align: center;
}
.moduleContent #form {
display: flex;
flex-direction: column;
}
.moduleContent .clearfix {
margin: 10px 0px;
display: flex;
}
.moduleContent input {
width: 100%;
}
.moduleContent input[type="text"], .moduleContent textarea {
background: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 10px;
font-size: 13px;
}
.clearfix .grid-12-12 {
width: 100%;
display: flex;
flex-direction: column;
}
.error {
font-weight: bold;
color: rgb(155, 23, 13);
}
.limitTextBoxBarWrpr {
width: 100%;
border: 0px solid #000;
overflow: hidden;
font-size: 9px;
color: #000;
white-space: nowrap;
height: 5px;
background-color: #FDFBBE;
}
.limitTextBoxBarInner {
width: 0%;
background-color: #FF0000;
}
/**
******** BTN Submit ********
*/
.btn, a.btn {
background: #204284;
border: 2px solid #fff;
padding: 8px 18px;
color: #fff;
cursor: pointer;
font-weight: 500;
}
</style>
<div class="moduleWrap inlineContactForm">
<div class="moduleHead">
<h3 class="moduleTitle">
CONSULTE LA DISPONIBILIDAD<br />
DE SU MARCA</h3>
<h3 class="moduleTitle blog" style="display:none;">
DETALLE SU CONSULTA AQUI.</h3>
</div>
<div class="moduleContent">
<p>
<form action="https://forms.zohopublic.com/info2376/form/Registrodemarca/formperma/0Ng1Q2sq0DvTrqngS2mJU43JXNn9jLetlmvbUX5sCzQ/htmlRecords/submit" name="form" method="POST" onSubmit="javascript:document.charset='UTF-8'; return validateAndSubmit();" accept-charset="UTF-8" enctype="multipart/form-data" id="form">
<!-- This Field is to tracking via Google Ads -->
<input type="hidden" id="zc_gad" name="zc_gad" value=""/>
<!-- Setup Redirect Page -->
<input type="hidden" name="zf_redirect_url" value="https://www.marcasregistro.com.ar/?c=1073">
<!-- Config Param Referrer -->
<input type="hidden" name="zf_referrer_name" value="">
<div class="clearfix">
<div class="grid-12-12">
<input name="Name_First" type="text" maxlength="70"
id="Name_First" placeholder="Nombre *" style="width:100%;">
</div>
<div class="grid-12-12" style="margin-left: 2%;">
<input name="Name_Last" type="text" maxlength="70"
id="Name_Last" placeholder="Apellido *" style="width:100%;">
</div>
</div>
<span id="Name_error" class="error" style="display:none">
Ingrese un <b>Nombre</b> y <b> Apellido </b> válido.
</span>
<div class="clearfix">
<div class="grid-12-12">
<input name="Email" type="text" maxlength="70"
id="Email" placeholder="Email *" style="width:100%;" checktype="emailFormat">
</div>
</div>
<span id="Email_error" class="error" style="display:none">
Ingrese un <b> Email </b> válido.
</span>
<div class="clearfix">
<div class="grid-12-12">
<input compname="PhoneNumber" name="PhoneNumber_countrycode" type="text" maxlength="50"
phoneformat="1" id="international_PhoneNumber_countrycode" placeholder="Número de Teléfono *"
style="width:100%;" checktype="phoneFormat">
</div>
</div>
<span id="PhoneNumber_error" class="error" style="display:none">
Ingrese un <b> Número de telefono </b> válido.
</span>
<div class="clearfix">
<div class="grid-11-12"><input name="SingleLine" type="text" maxlength="255"
id="SingleLine" placeholder="Nombre de su marca *" style="width:100%;"></div>
</div>
<span id="SingleLine_error" class="error" style="display:none">
Este campo es obligatorio, Ingrese un valor.
</span>
<div class="clearfix">
<div class="grid-12-12">
<div style="width: 100%;">
<div class="limitTextBox">
<div class="limitTextBoxInputWrpr">
<textarea name="MultiLine" rows="5"
cols="20" id="MultiLine" isspanish="True" maxlength="200"
style="width:100%;resize:none;vertical-align:top;"
placeholder="Producto o Servicio (Ej: Ropa, Restaurant)"></textarea>
<div class="limitTextBoxBar">
<div class="limitTextBoxBarWrpr">
<div class="limitTextBoxBarInner" style="width: 21%;">&nbsp;</div>
</div>
<div class="limitTextBoxBarInfoWrpr" isspanish="True">
200 caracteres restantes
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span id="MultiLine_error" class="error" style="display:none"> Invalid Value </span>
<div class="clearfix" style="display:flex; justify-content:center;">
<span class="btnWrapper">
<input type="submit" name="submit" value="Consultar" id="btnSubmit" class="btn" >
</span>
</div>
</form>
</p>
</div>
</div>