Zoho CRM Contact Form style in website

Zoho CRM Contact Form style in website

Hello,

I am trying to embed the Contact Form from Zoho CRM into our existing WordPress website to replace our current contact form.

The look on the website is not similar to the 'Preview' when I am setting up the form in the CRM, and I have limited html and css knowledge that is stopping me from making some minor changes to the appearance and style of the form.

Our current contact form looks like this: 


And the html code for this form is:

<div id="call"><span>Request more info</span><span id="divSubQ"><b style="font-size:11px; display:block; padding-bottom:1px; padding-top:0px; font-weight:400;">Name<font color="#FF0000">*</font></b>[text* name 20 class:inp] <b style="font-size:11px; display:block; padding-bottom:1px; padding-top:2px; font-weight:400;">Country of Residence</b>[text country 20 class:inp]<b style="font-size:11px; display:block; padding-bottom:1px; padding-top:2px; font-weight:400;">Telephone<font color="#FF0000">*</font></b>[text* telephone 20 class:inp]<b style="font-size:11px; display:block; padding-bottom:1px; padding-top:2px; font-weight:400;">E-Mail<font color="#FF0000">*</font></b>[email* email 20 class:inp]<b style="font-size:11px; display:block; padding-bottom:1px; padding-top:2px; font-weight:400;">Comments</b>[textarea comments 20x5 class:inp]<p align="center" style="margin: 2px 0px 0px 0px;">[submit class:but "Submit"]</span></div>

We would like to retain the appearance and style of this form, but insert the code so that the entries are created as leads in Zoho CRM.

Here is the code for the Zoho CRM Contact Form:

<div id='crmWebToEntityForm' style='width:600px;margin:auto;'>
   <META HTTP-EQUIV ='content-type' CONTENT='text/html;charset=UTF-8'>
   <form action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads1294899000000117019 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory()' accept-charset='UTF-8'>

<!-- Do not remove this code. -->
<input type='text' style='display:none;' name='xnQsjsdp' value='27fe81240b4001314d1f6996efed533fac64b489b6254dff74eb4e32fb910282'/>
<input type='hidden' name='zc_gad' id='zc_gad' value=''/>
<input type='text' style='display:none;' name='xmIwtLD' value='15dce3f4420879a91005e1b5208f6a36b344f5aad0e5964d2e9903845a54428d'/>
<input type='text' style='display:none;'  name='actionType' value='TGVhZHM='/>

<input type='text' style='display:none;' name='returnURL' value='https&#x3a;&#x2f;&#x2f;www.eurospeak.org.uk' /> 
<!-- Do not remove this code. -->
<style>
tr , td { 
padding:6px;
border-spacing:0px;
border-width:0px;
}
</style>
<table style='width:600px;background-color:#ffffff;color:black'>

<tr><td colspan='2' style='text-align:left;color:black;font-family:Arial;font-size:14px;'><strong>Request More Information</strong></td></tr>

<tr><td  style='nowrap:nowrap;text-align:right;font-size:12px;font-family:Arial;width:200px;'>First Name<span style='color:red;'>*</span></td><td style='width:250px;' ><input type='text' style='width:250px;'  maxlength='40' name='First Name' /></td></tr>

<tr><td  style='nowrap:nowrap;text-align:right;font-size:12px;font-family:Arial;width:200px;'>Last Name<span style='color:red;'>*</span></td><td style='width:250px;' ><input type='text' style='width:250px;'  maxlength='80' name='Last Name' /></td></tr>

<tr><td  style='nowrap:nowrap;text-align:right;font-size:12px;font-family:Arial;width:200px;'>Telephone Number<span style='color:red;'>*</span></td><td style='width:250px;' ><input type='text' style='width:250px;'  maxlength='30' name='Phone' /></td></tr>

<tr><td  style='nowrap:nowrap;text-align:right;font-size:12px;font-family:Arial;width:200px;'>Email<span style='color:red;'>*</span></td><td style='width:250px;' ><input type='text' style='width:250px;'  maxlength='100' name='Email' /></td></tr>

<tr><td  style='nowrap:nowrap;text-align:right;font-size:12px;font-family:Arial;width:200px;'>Country of Residence<span style='color:red;'>*</span></td><td style='width:250px;' ><input type='text' style='width:250px;'  maxlength='30' name='Country' /></td></tr>

<tr><td  style='nowrap:nowrap;text-align:right;font-size:12px;font-family:Arial;width:200px;'>Comments<span style='color:red;'>*</span></td><td style='width:250px;' ><input type='text' style='width:250px;'  maxlength='30' name='LEADCF1' /></td></tr>

<tr><td colspan='2' style='text-align:center; padding-top:15px;'>
<input style='font-size:12px;color:#131307' type='submit' value='Submit' />
<input type='reset' style='font-size:12px;color:#131307' value='Reset' />
   </td>
</tr>
   </table>
<script>
   var mndFileds=new Array('First Name','Last Name','Email','Phone','Country','LEADCF1');
   var fldLangVal=new Array('First Name','Last Name','Email','Telephone Number','Country of Residence','Comments');

   function checkMandatory() {
var name='';
var email='';
for(i=0;i<mndFileds.length;i++) {
 var fieldObj=document.forms['WebToLeads1294899000000117019'][mndFileds[i]];
 if(fieldObj) {
if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0) {
 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) {}
   }
}
try {
   if($zoho) {
var LDTuvidObj = document.forms['WebToLeads1294899000000117019']['LDTuvid'];
if(LDTuvidObj) {
       LDTuvidObj.value = $zoho.salesiq.visitor.uniqueid();
}
var firstnameObj = document.forms['WebToLeads1294899000000117019']['First Name'];
if(firstnameObj) {
    name = firstnameObj.value +' '+name;
}
$zoho.salesiq.visitor.name(name);
var emailObj = document.forms['WebToLeads1294899000000117019']['Email'];
if(emailObj) {
    email = emailObj.value;
    $zoho.salesiq.visitor.email(email);
}
   }
} catch(e) {}
    }
  </script>
</form>
</div>

And the Contact form on the website looks like this: 


So, basically, I want to keep the look and style of the old form, but have it send entries to Zoho CRM. Would anyone be able to help me with this?

Kind regards and thanks in advance,

Andrew

    Access your files securely from anywhere

        Zoho Developer Community

            Bootcamp
            Community
            Pricing
            Webinars
            What's New
            Integrations
            Contact Support
            Contact Sales

              Zoho Survey Resources
                Features
                Survey Templates
                Integrations
                Community
                iOS Mobile Surveys
                Pricing
                Android Mobile Surveys
                Insurvey Blogs
                Insight Blogs
                Tips & Tricks





                              Latest Feature Updates


                                  Zoho Desk Resources

                                  • Desk Community Learning Series


                                  • Digest


                                  • Functions


                                  • Meetups


                                  • Kbase


                                  • Resources


                                  • Glossary


                                  • Desk Marketplace


                                  • MVP Corner


                                  • Word of the Day




                                      Zoho Marketing Automation
                                        Zoho SalesIQ Resources


                                              Manage your brands on social media
                                              Access Zoho Social

                                                Zoho Pagesense Resources


                                                    Zoho TeamInbox Resources

                                                      Zoho DataPrep Resources



                                                        Zoho CRM Plus Resources

                                                          Zoho Books Resources


                                                            Zoho Subscriptions Resources

                                                              Zoho Projects Resources


                                                                Zoho Sprints Resources


                                                                  Qntrl Resources


                                                                    Zoho Creator Resources



                                                                        Zoho Campaigns Resources


                                                                          Zoho CRM Resources

                                                                          • CRM Community Learning Series

                                                                            CRM Community Learning Series


                                                                          • Kaizen

                                                                            Kaizen

                                                                          • Functions

                                                                            Functions

                                                                          • Meetups

                                                                            Meetups

                                                                          • Kbase

                                                                            Kbase

                                                                          • Resources

                                                                            Resources

                                                                          • Digest

                                                                            Digest

                                                                          • CRM Marketplace

                                                                            CRM Marketplace

                                                                          • MVP Corner

                                                                            MVP Corner





                                                                              Design. Discuss. Deliver.

                                                                              Create visually engaging stories with Zoho Show.

                                                                              Get Started Now