Custom html
-
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 an explorer plan.
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','Firstx20Name','Lastx20Name'); 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 -->https://crm.zohopublic.eu/crm/WebFormAnalyticsServeServlet<!-- Do not remove this --- Analytics Tracking code ends. --></form> </div>
The blog I need help with is: (visible only to logged in users)
-
-
Hi there!
The code you’re trying to use includes the type of code that’s only allowed on the WordPress.com Creator plan or higher with the hosting configuration turned on. You can check the types of code that are not allowed here:
This guide explains which types of code can be added to your website, depending on your WordPress.com plan. About Code Restrictions The type of code you can add to a WordPress.com website depends on your plan level: Free sites and sites with a Starter or Explorer plan have limits to code that can be added, as explained in this guide. Restrictions are in place to ensure the safety and sBasically, if you must use the code, you’ll need to upgrade to the WordPress.com Creator plan or higher.
After upgrading, you’ll need to activate the hosting features. Here’s how:
In your website’s Hosting Configuration, access your website’s database, SFTP credentials, and more advanced settings. This guide will give an overview of the options here. This feature is available on sites with the WordPress.com Creator or Entrepreneur plan. If your site has one of our legacy plans, it is available on the Pro plan. Access Your Hosting Configuration To visit the HostOnce that’s done, the type of code you’re embedding will work.
Feel free to let us know if you have more questions.
-
I have upgraded to creator plan and the problem didn’t fix. Are you sure this is the only solution? Because it doesn’t seems to be fixed…
-
-
Nicely done @goddessdianatop! On the creator plan you have realtime support from us when you choose the option “Contact us”, then “Live chat” from here. Reach out to us whenever you need us next. :)
- The topic ‘Custom html’ is closed to new replies.
WordPress.com Forums 