[ad_1]
I’m trying to insert custom HTML block that looks fine when I click on preview.
(I can’t install plugins because I’m in a plan that plugins can’t be installed).
When I save the page and open it I see the text of the code instead the form.
What am I doing wrong?
I received the html source code from ZOHO CRM, I want to put it on my website and whenever customers will fill in their details, it will automatically add them to my contact list in zoho.
**I removed only my identifying information from the code.
This is how it should look like, in practice it shows part of the code itself (I have attached 2 screenshots).
<!-- 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.-->
<div id='crmWebToEntityForm' class="zcwf_lblLeft crmWebToEntityForm" style="background-color: #292743;color: #FFFFFF;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='webform' action='https://crm.zoho.eu/crm/WebToLeadForm' name=WebToLeads method='POST' onSubmit="javascript:document.charset="UTF-8"; return checkMandatory()" accept-charset="UTF-8">
<input type="text" style="display:none;" name="xnQ" value="e89145402c2ffdd79a11ce"></input>
<input type="hidden" name="zc_gad" id='zc_gad' value=""></input>
<input type="text" style="display:none;" name="xmI" value="ea04519"></input>
<input type="text" style="display:none;" name="actionType" value="TG"></input>
<input type="text" style="display:none;" name="returnURL" value="https://ali-corn.com/thank-you/" > </input>
<!-- Do not remove this code. -->
<style>
html,body{
margin: 0px;
}
#crmWebToEntityForm.zcwf_lblLeft {
width:100%;
padding: 25px;
margin: 0 auto;
box-sizing: border-box;
}
#crmWebToEntityForm.zcwf_lblLeft * {
box-sizing: border-box;
}
#crmWebToEntityForm{text-align: left;}
#crmWebToEntityForm * {
direction: ltr;
}
.zcwf_lblLeft .zcwf_title {
word-wrap: break-word;
padding: 0px 6px 10px;
font-weight:bold }.zcwf_lblLeft.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_lblLeft .zcwf_col_fld input[type=text], input[type=password], .zcwf_lblLeft .zcwf_col_fld textarea {
width: 60%;
border: 1px solid #c0c6cc !important;
resize: vertical;
border-radius: 2px;
float: left;
}
.zcwf_lblLeft .zcwf_col_lab {
width: 30%;
word-break: break-word;
padding: 0px 6px 0px;
margin-right: 10px;
margin-top: 5px;
float: left;
min-height: 1px;
}
.zcwf_lblLeft .zcwf_col_fld {
float: left;
width: 68%;
padding: 0px 6px 0px;
position: relative;
margin-top: 5px;
}
.zcwf_lblLeft .zcwf_privacy{padding: 6px;}
.zcwf_lblLeft .wfrm_fld_dpNn{display: none;}
.dIB{display: inline-block;}
.zcwf_lblLeft .zcwf_col_fld_slt {
width: 60%;
border: 1px solid #ccc;
background: #fff;
border-radius: 4px;
font-size: 16px;
float: left;
resize: vertical;
padding: 2px 5px;
}
.zcwf_lblLeft .zcwf_row:after, .zcwf_lblLeft .zcwf_col_fld:after {
content: '';
display: table;
clear: both;
}
.zcwf_lblLeft .zcwf_col_help {
float: left;
margin-left: 7px;
font-size: 16px;
max-width: 35%;
word-break: break-word;
}
.zcwf_lblLeft .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_lblLeft .zcwf_row {margin: 15px 0px;}
.zcwf_lblLeft .formsubmit {
margin-right: 5px;
cursor: pointer;
color: #292743 !important;
font-size: 16px;
}
.zcwf_lblLeft .zcwf_privacy_txt {
width: 90%;
color: rgb(0, 0, 0);
font-size: 16px;
font-family: Figtree;
display: inline-block;
vertical-align: top;
color: var(--baseColor);
padding-top: 2px;
margin-left: 6px;
}
.zcwf_lblLeft .zcwf_button {
font-size: 16px;
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_lblLeft .zcwf_tooltip_over{
position: relative;
}
.zcwf_lblLeft .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_lblLeft .zcwf_ckbox{
float: left;
}
.zcwf_lblLeft .zcwf_file{
width: 55%;
box-sizing: border-box;
float: left;
}
.clearB:after{
content:'';
display: block;
clear: both;
}
@media all and (max-width: 600px) {
.zcwf_lblLeft .zcwf_col_lab, .zcwf_lblLeft .zcwf_col_fld {
width: auto;
float: none !important;
}
.zcwf_lblLeft .zcwf_col_help {width: 40%;}
}
</style>
<div class="zcwf_title" style="max-width: 600px;color: #FFFFFF; font-family:Figtree;">Ali-corn contact form</div><div class="zcwf_row"><div class="zcwf_col_lab" style="font-size:16px; font-family: Figtree;"><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:16px; font-family: Figtree;"><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:16px; font-family: Figtree;"><label for="Company">Company<span style="color:red;">*</span></label></div><div class="zcwf_col_fld"><input type="text" id='Company' name="Company" maxlength="200"></input><div class="zcwf_col_help"></div></div></div><div class="zcwf_row wfrm_fld_dpNn"><div class="zcwf_col_lab" style="font-size:16px; font-family: Figtree;"><label for="Lead_Source">Lead Source</label></div><div class="zcwf_col_fld"><select class="zcwf_col_fld_slt" id='Lead_Source' name="Lead Source" >
<option value="-None-">-None-</option>
<option value="Advertisement">Advertisement</option>
<option value="Cold Call">Cold Call</option>
<option value="Employee Referral">Employee Referral</option>
<option value="External Referral">External Referral</option>
<option value="Partner">Partner</option>
<option value="Online Store">Online Store</option>
<option value="Public Relations">Public Relations</option>
<option value="Trade Show">Trade Show</option>
<option value="Sales Email Alias">Sales Email Alias</option>
<option value="Seminar Partner">Seminar Partner</option>
<option value="Facebook">Facebook</option>
<option value="Internal Seminar">Internal Seminar</option>
<option value="Twitter">Twitter</option>
<option value="Web Download">Web Download</option>
<option selected value="Web Research">Web Research</option>
<option value="Chat">Chat</option>
<option value="Google+">Google+</option>
</select><div class="zcwf_col_help"></div></div></div><div class="zcwf_row"><div class="zcwf_col_lab" style="font-size:16px; font-family: Figtree;"><label for="Description">Description</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"></div><div class="zcwf_col_fld"><input type="submit" id='formsubmit' class="formsubmit zcwf_button" value="Submit" title="Submit"></div></div>
<script>
function checkMandatory690413000000430001() {
var mndFileds = new Array('Company','First Name','Last Name');
var fldLangVal = new Array('Company','First\x20Name','Last\x20Name');
for(i=0;i<mndFileds.length;i++) {
var fieldObj=document.forms['WebToLeads690413000000430001'][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) {}
}
}
var urlparams = new URLSearchParams( window.location.search);
if(urlparams.has('service') && (urlparams.get('service')==='smarturl')){
var webform = document.getElementById('webform');
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);
}
function tooltipShow690413000000430001(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>
<!-- Do not remove this --- Analytics Tracking code starts --><script id='wf_anal' src="https://crm.zohopublic.eu/crm/WebFormAnalyticsServeServlet"></script><!-- Do not remove this --- Analytics Tracking code ends. --></form>
</div>