How to integrate Zoho CRM code into a contact form?

jinuralite
Explorer
78 0 9

Can someone help me please?

I have a contact form on my page and I want to integrate a Zoho CRM code into this. How do I add this without tweaking the design of the form?

Here is my contact-form-liquid:

 

<!-- /sections/contact-form.liquid -->

{%- liquid
assign bg_color = section.settings.bg_color
assign text_color = section.settings.color

if text_color == 'rgba(0,0,0,0)' or text_color == blank
assign text_color = settings.text_color
endif
-%}

{%- style -%}
#ContactForm--{{ section.id }} {
--PT: {{ section.settings.padding_top }}px;
--PB: {{ section.settings.padding_bottom }}px;

{%- unless bg_color == 'rgba(0,0,0,0)' or bg_color == blank -%}
--bg: {{ bg_color }};
{%- endunless -%}

{%- unless text_color == 'rgba(0,0,0,0)' or text_color == blank -%}
--text: {{ text_color }};
--text-light: {{ text_color | color_mix: settings.bg_color, 70 }};
--text-dark: {{ text_color | color_saturate: 10 | color_darken: 15 }};
--text-a35: {{ text_color | color_modify: 'alpha', 0.35 }};
--text-a70: {{ text_color | color_modify: 'alpha', 0.70 }};
--text-a75: {{ text_color | color_modify: 'alpha', 0.75 }};
{%- endunless -%}
}
{%- endstyle -%}

<section id="ContactForm--{{ section.id }}"
class="index-contact section-padding"
data-section-id="{{ section.id }}"
data-section-type="contact">
<div class="{{ section.settings.width }}">
{%- if section.settings.title != blank -%}
<h2 class="contact__form__heading">{{ section.settings.title }}</h2>
{%- endif -%}

{%- form 'contact', id: 'contact-us-page' -%}
{%- if form.posted_successfully? -%}
<p class="form-success">
{{ 'contact.form.post_success' | t }}
</p>
{%- endif -%}

{{ form.errors | default_errors }}

{%- for block in section.blocks -%}
{%- assign required = '' -%}
{%- if block.settings.required -%}
{%- assign required = 'required' -%}
{%- endif -%}

{%- case block.type -%}

{%- when 'email' -%}
<div class="custom-form__block" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}" class="visually-hidden">{{ block.settings.title }}</label>
<input type="email" class="contactFormEmail field" id="Form-{{ section.id }}-{{ forloop.index0 }}" name="contact[email]" placeholder="{{ block.settings.title }}" autocorrect="off" autocapitalize="off" {{ required }}>
</div>

{%- when 'body' -%}
<div class="custom-form__block" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}" class="visually-hidden">{{ block.settings.title }}</label>
<textarea rows="10" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormMessage field" name="contact[body]" placeholder="{{ block.settings.title }}" {{ required }}></textarea>
</div>

{%- when 'text' -%}
<div class="custom-form__block" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}" class="visually-hidden">{{ block.settings.title }}</label>
<input type="text" class="contactFormText field" id="Form-{{ section.id }}-{{ forloop.index0 }}" name="contact[{{ block.settings.title | handleize | default: 'text' }}]" placeholder="{{ block.settings.title }}" autocapitalize="words" value="" {{ required }}>
</div>

{%- when 'textarea' -%}
<div class="custom-form__block" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}" class="visually-hidden">{{ block.settings.title }}</label>
<textarea rows="10" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormMessage field" name="contact[{{ block.settings.title | handleize | default: 'textarea' }}]" placeholder="{{ block.settings.title }}" {{ required }}></textarea>
</div>

{%- when 'telephone' -%}
<div class="custom-form__block" {{ block.shopify_attributes }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}" class="visually-hidden">{{ block.settings.title }}</label>
<input type="tel" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormPhone field" name="contact[telephone]" placeholder="{{ block.settings.title }}" value="" {{ required }}>
</div>

{%- when 'formHeading' -%}
<div class="custom-form__block custom-form__block--heading" {{ block.shopify_attributes }}>
<p class="strong">{{ block.settings.title }}</p>
</div>

{%- when 'spacer' -%}
{%- assign hr_class = 'hr--clear' -%}
{%- if block.settings.line -%}
{%- assign hr_class = 'hr--color' -%}
{%- endif -%}
<div {{ block.shopify_attributes }}>
<hr class="{{ hr_class }}">
</div>

{%- when 'checkbox' -%}
<div class="custom-form__block checkbox" {{ block.shopify_attributes }}>
<input type="checkbox" id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormCheckbox" name="contact[{{ block.settings.title | handleize | default: 'checkbox' }}]" value="{{ block.settings.title }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}">
{{ block.settings.title }}
</label>
</div>

{%- when 'radio' -%}
<fieldset class="custom-form__block custom-form__block--group" {{ block.shopify_attributes }}>
{%- if block.settings.title != blank -%}
<legend class="custom-form__label">{{ block.settings.title }}</legend>
{%- endif -%}
{%- if block.settings.label-one != blank -%}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-1" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-one }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-1">{{ block.settings.label-one }}</label>
</div>
{%- endif -%}
{%- if block.settings.label-two != blank -%}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-2" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-two }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-2">{{ block.settings.label-two }}</label>
</div>
{%- endif -%}
{%- if block.settings.label-three != blank -%}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-3" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-three }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-3">{{ block.settings.label-three }}</label>
</div>
{%- endif -%}
{%- if block.settings.label-four != blank -%}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-4" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-four }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-4">{{ block.settings.label-four }}</label>
</div>
{%- endif -%}
{%- if block.settings.label-five != blank -%}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-5" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-five }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-5">{{ block.settings.label-five }}</label>
</div>
{%- endif -%}
{%- if block.settings.label-six != blank -%}
<div>
<input type="radio" id="Form-{{ section.id }}-{{ forloop.index0 }}-6" class="contactFormRadio" name="contact[{{ block.settings.title | handleize | default: 'radio' }}]" value="{{ block.settings.label-six }}" {{ required }}>
<label for="Form-{{ section.id }}-{{ forloop.index0 }}-6">{{ block.settings.label-six }}</label>
</div>
{%- endif -%}
</fieldset>

{%- when 'select' -%}
<fieldset class="custom-form__block custom-form__block--group" {{ block.shopify_attributes }}>
{%- if block.settings.title != blank -%}
<label for="Form-{{ section.id }}-{{ forloop.index0 }}" class="custom-form__label label--block">{{ block.settings.title }}</label>
{%- endif -%}
<select id="Form-{{ section.id }}-{{ forloop.index0 }}" class="contactFormSelect field" name="contact[{{ block.settings.title | handleize | default: 'select' }}]">
{%- if block.settings.label-one != blank -%}
<option value="{{ block.settings.label-one }}">{{ block.settings.label-one }}</option>
{%- endif -%}
{%- if block.settings.label-two != blank -%}
<option value="{{ block.settings.label-two }}">{{ block.settings.label-two }}</option>
{%- endif -%}
{%- if block.settings.label-three != blank -%}
<option value="{{ block.settings.label-three }}">{{ block.settings.label-three }}</option>
{%- endif -%}
{%- if block.settings.label-four != blank -%}
<option value="{{ block.settings.label-four }}">{{ block.settings.label-four }}</option>
{%- endif -%}
{%- if block.settings.label-five != blank -%}
<option value="{{ block.settings.label-five }}">{{ block.settings.label-five }}</option>
{%- endif -%}
{%- if block.settings.label-six != blank -%}
<option value="{{ block.settings.label-six }}">{{ block.settings.label-six }}</option>
{%- endif -%}
</select>
</fieldset>
{%- else -%}
{%- endcase -%}
{%- endfor -%}

{%- assign types = '' -%}
{%- for block in section.blocks -%}
{%- assign types = types | append: block.type -%}
{%- endfor -%}

{%- unless types contains "email" -%}
<div class="custom-form__block">
<label for="contactFormEmail" class="visually-hidden">{{ 'contact.form.email' | t }}</label>
<input type="email" id="contactFormEmail" class="contactFormEmail field" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" required>
</div>
{%- endunless -%}

{%- unless types contains "body" -%}
<div class="custom-form__block">
<label for="ContactFormMessage" class="visually-hidden">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" class="contactFormMessage field" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}"></textarea>
</div>
{%- endunless -%}

<div class="custom-form__block">
<button type="submit" class="btn btn--primary btn--solid btn--full">
{{ 'contact.form.send' | t }}
</button>
</div>

{%- if section.settings.terms -%}
<div class="form__legal">
{{ 'shopify.online_store.spam_detection.disclaimer_html' | t }}
</div>
{%- endif -%}
{%- endform -%}
</div>
</section>

{% schema %}
{
"name": "Contact form",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Contact us"
},
{
"type": "checkbox",
"id": "terms",
"label": "Show reCAPTCHA terms",
"default": true,
"info": "Recommended if your online store preferences have spam protection enabled."
},
{
"type": "header",
"content": "Style"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wrapper--narrow",
"options": [
{"value": "wrapper", "label": "Normal"},
{"value": "wrapper--narrow", "label": "Narrow"}
]
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
},
{
"type": "color",
"id": "color",
"label": "Text"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 100
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 100
}
],
"blocks": [
{
"type": "email",
"name": "Email",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Email"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": true
}
]
},
{
"type": "body",
"name": "Message",
"limit": 1,
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Label",
"default": "Message"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": true
}
]
},
{
"type": "text",
"name": "Text line",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Full Name",
"info": "Example: Full Name"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": false
}
]
},
{
"type": "textarea",
"name": "Text area",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Label",
"default": "Enter your message",
"info": "Example: Enter your message"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": false
}
]
},
{
"type": "telephone",
"name": "Telephone",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Phone Number",
"info": "Example: Phone Number"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": false
}
]
},
{
"type": "formHeading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Heading",
"info": "Use to break up longer forms"
}
]
},
{
"type": "spacer",
"name": "Spacer",
"settings": [
{
"type": "checkbox",
"id": "line",
"label": "Show line",
"default": false
}
]
},
{
"type": "checkbox",
"name": "Single checkbox",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Checkbox option",
"info": "Example: Subscribe to newsletter"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": false
}
]
},
{
"type": "select",
"name": "Select dropdown",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Select an option",
"info": "Example: Choose a delivery location"
},
{
"type": "header",
"content": "Include up to six options",
"info": "Options with blank text will not appear."
},
{
"type": "text",
"id": "label-one",
"default": "Option one",
"label": "Option one"
},
{
"type": "text",
"id": "label-two",
"default": "Option two",
"label": "Option two"
},
{
"type": "text",
"id": "label-three",
"default": "Option three",
"label": "Option three"
},
{
"type": "text",
"id": "label-four",
"default": "Option four",
"label": "Option four"
},
{
"type": "text",
"id": "label-five",
"default": "Option five",
"label": "Option five"
},
{
"type": "text",
"id": "label-six",
"default": "Option six",
"label": "Option six"
}
]
},
{
"type": "radio",
"name": "Radio buttons",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Pick an option"
},
{
"type": "checkbox",
"id": "required",
"label": "Required",
"default": false
},
{
"type": "header",
"content": "Include up to six options",
"info": "Leave option text blank to exclude"
},
{
"type": "text",
"id": "label-one",
"default": "Option one",
"label": "Option one"
},
{
"type": "text",
"id": "label-two",
"default": "Option two",
"label": "Option two"
},
{
"type": "text",
"id": "label-three",
"label": "Option three"
},
{
"type": "text",
"id": "label-four",
"label": "Option four"
},
{
"type": "text",
"id": "label-five",
"label": "Option five"
},
{
"type": "text",
"id": "label-six",
"label": "Option six"
}
]
}
],
"presets": [
{
"category": "Text",
"name": "Contact form",
"blocks": [
{
"type": "text",
"settings": {
"title": "Full Name"
}
},
{
"type": "email",
"settings": {
"title": "Email"
}
},
{
"type": "body",
"settings": {
"title": "Message"
}
},
{
"type": "formHeading",
"settings": {
"title": "Optional:"
}
},
{
"type": "checkbox",
"settings": {
"title": "This is urgent"
}
},
{
"type": "select",
"settings": {
"title": "Select an option",
"label-one": "- Pick an option -",
"label-two": "Option one",
"label-three": "Option two",
"label-four": "Option three",
"label-five": "Option four",
"label-six": "Option five"
}
}
]
}
],
"disabled_on": {
"groups": ["header", "aside", "footer"]
}
}
{% endschema %}

 

And this is the code I want to add:

<!-- 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: white;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'>
   
 
<style>
.wf_customMessageBox {
font-family: Arial, Helvetica, sans-serif;
color: #132C14;
background:  #F5FAF5;
box-shadow:0 2px 6px 0 rgba(0,0,0,0.25);
max-width: 90%;
width:max-content;
word-break: break-word;
z-index: 11000;
border-radius: 6px;
border: 1px solid #A9D3AB;
min-width: 100px;
padding: 10px 15px;
display: flex;
align-items: center;
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0);
}
.wf_customCircle {
position: relative;
background-color: #12AA67;
border-radius: 100%;
width: 20px;
height: 20px;
flex:none;
margin-right: 7px;
}
.wf_customCheckMark {
box-sizing: unset !important;
position: absolute;
transform: rotate(45deg) translate(-50%, -50%);
left: 6px;
top: 9px;
height: 8px;
width: 3px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}
.wf_customClose {
box-sizing: border-box;
position: relative;
width: 18px;
height: 18px;
}
.wf_customClose::after,
.wf_customClose::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 12px;
height: 1.5px;
background: #616E88;
transform: rotate(45deg);
border-radius: 5px;
top: 8px;
left: 1px
}
.wf_customClose::after {
transform: rotate(-45deg)
}</style> <div class='wf_customMessageBox' id='wf_splash' style='display:none'>
<div class="wf_customCircle">
<div class="wf_customCheckMark"></div>
</div>
<span id="wf_splash_info"></span>
</p>
</div>
<form id='webform3678740000001876002' name=WebToLeads3678740000001876002 accept-charset='UTF-8'>
 <input type='text' style='display:none;' name='xnQsjsdp' value='52c96ef7e08d1d41a19f1b93bbd0c7d2c41cf0b0f1cec87e83e535e08931c8f6'></input> 
 <input type='hidden' name='zc_gad' id='zc_gad' value=''></input>
 <input type='text' style='display:none;' name='xmIwtLD' value='7d06252247b16c933a61b36564aa2c461f35530bc05029c47d3e59457ea401a1b938d0c2f5204e7a84304369e19f7e4e'></input> 
 <input type='text'  style='display:none;' name='actionType' value='TGVhZHM='></input>
 <input type='text' style='display:none;' name='returnURL' value='null' > </input>
<!-- Do not remove this code. -->
<style>
html,body{
margin: 0px;
}
#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: 12px;
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: 12px;
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: var(--baseColor);
font-size: 12px;
}
.zcwf_lblRight .zcwf_privacy_txt {
width: 90%;
color: rgb(0, 0, 0);
font-size: 12px;
font-family: Arial;
display: inline-block;
vertical-align: top;
color: var(--baseColor);
padding-top: 2px;
margin-left: 6px;
}
.zcwf_lblRight .zcwf_button {
font-size: 12px;
color: var(--baseColor);
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: var(--baseColor);
z-index: 100;
}
.zcwf_lblRight .zcwf_ckbox{
float: left;
}
.zcwf_lblRight .zcwf_file{
width: 55%;
box-sizing: border-box;
float: left;
}
.clearB: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;'>Contact Us</div><div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:12px; 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' name='First Name' maxlength='40'></input><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:12px; 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' name='Last Name' maxlength='80'></input><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:12px; 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' name='Email' crmlabel='' maxlength='100'></input><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:12px; font-family: Arial;'><label for='Mobile'>Mobile</label></div><div class='zcwf_col_fld'><input type='text' id='Mobile' name='Mobile' maxlength='30'></input><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:12px; font-family: Arial;'><label for='Description'>Message<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:12px; font-family: Arial;'>Enter the Captcha</div>
<div class='zcwf_col_fld'><input type='text' 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='imgid3678740000001876002' src='https://crm.zoho.com/crm/CaptchaServlet?formId=7d06252247b16c933a61b36564aa2c461f35530bc05029c47d3e5...'>
    <a href='javascript&colon;;' onclick='reloadImg3678740000001876002();'>Reload</a></div><div class=''></div>
</div><div class='zcwf_row'><div class='zcwf_col_lab'></div><div class='zcwf_col_fld'><input type='submit' id='formsubmit' class='formsubmit zcwf_button' value='Submit' title='Submit'><input type='reset' class='zcwf_button' name='reset' value='Reset' title='Reset'></div></div>
<script>
 
/* Do not remove this code. */
function reloadImg3678740000001876002() {
var captcha = document.getElementById('imgid3678740000001876002');
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 validateEmail3678740000001876002()
{
var form = document.forms['WebToLeads3678740000001876002'];
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 checkMandatory3678740000001876002() {
var mndFileds = new Array('First Name','Last Name','Email','Description');
var fldLangVal = new Array('First\x20Name','Last\x20Name','Email','Message');
for(i=0;i<mndFileds.length;i++) {
  var fieldObj=document.forms['WebToLeads3678740000001876002'][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(!validateEmail3678740000001876002()){return false;}
 
var urlparams = new URLSearchParams( window.location.search);
if(urlparams.has('service') && (urlparams.get('service')==='smarturl')){
var webform = document.getElementById('webform3678740000001876002');
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);
return true;
}
 
$(document).ready(function () {
$('#webform3678740000001876002').submit(function (e) {
var ismandatory = checkMandatory3678740000001876002();
e.preventDefault();
if(ismandatory){
if(typeof _wfa_track != 'undefined' && _wfa_track.wfa_submit){ _wfa_track.wfa_submit(e); }
var formData = new FormData(this);
$.ajax({
type : 'POST',
data : formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
var splashinfodom = document.getElementById("wf_splash_info");
splashinfodom.innerText=data.actionvalue;
var splashdom = document.getElementById("wf_splash");
document.getElementById("webform3678740000001876002").reset.click();
splashdom.style.display = '';
setTimeout(function(){
splashdom.style.display = 'none';
},5000);
document.querySelector('.crmWebToEntityForm .formsubmit').removeAttribute('disabled');
},
error: function(data){
alert("an error occurred");
}
});
}
});
});
function tooltipShow3678740000001876002(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>

 

Replies 0 (0)