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:

<style>

tr , td {

padding:6px;

border-spacing:0px;

border-width:0px;

}

</style>

<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;'>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>

</td>

</tr>

</table>

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

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Sticky Posts
Focus Group Webinar - Streamline Record Creation with Wizards
Hi there, With all the time your users spend on record creation, do you feel like they have the most seamless experience while doing it? For different types of records or those with a LOT of fields, do your users spend time navigating to enter data repeatedly?
Notes and Attachments visibility can now be restricted based on profiles
Dear All, We hope you're well! We are here with a quick update about Notes and Attachments profile permissions. In the past, a record's Notes and Attachments were visible by default to all users with record access. However, as notes and attachments can
Identify and prioritize profitable deals: Zoho CRM Forecasts help users focus on revenue-driving opportunities
Post moderated on: 7th November: Release update: This feature is now available for users in all DCs. Dear Customers, We hope you're well! At any given time, a sales rep handles multiple deals, each progressing at its own pace. But not all deals will succeed—some
Gain control over record sharing with portal users through our new enhancement: criteria-based data exposure
Dear Customers, We hope you're well! Portals is a self-service avenue through which your clients can access and manage their direct and related data in Zoho CRM. This empowers them to be more independent and enables them to experience a sense of transparency
Context and convenience just got better with Zia's email intelligence
Dear Customers, We hope you're well! We are in 2024, and email as a tool is only getting more powerful each day. While it enables seamless daily correspondences, we are here with a set of abilities that will enhance your user experience and save several