Hello, I am currently having a very difficult time with a form. I have been given the source code of a form that i am to use on my website to collect the input data and have it synced with my Zoho CRM. However, the forms appearance does not match my website or the current forms that I will be replacing. The website is presently using Gravity forms. I am trying to make the layout of the Zoho form look identical to the gravity form in appearance. Can anyone give me some help, advice, or guideance with making the form resemble my current form?
The current form is located at www.youhavepower.com/contact-us and the source code for the form i need customized is as follows:
<!-- 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' 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=WebToLeads2552689000000982744 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='6111bdeb40d89f87e9277c6d9319b313d778bae3fc1869720e82fba8514790d1'/>
<input type='hidden' name='zc_gad' id='zc_gad' value=''/>
<input type='text' style='display:none;' name='xmIwtLD' value='13f2e3d22cc6950df046424cd0fde57e386d00505d2346edec287a04019a7069'/>
<input type='text' style='display:none;' name='actionType' value='TGVhZHM='/>
<input type='text' style='display:none;' name='returnURL' value='https://www.youhavepower.com/contact-us' />
<!-- 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:15px;'><strong>BANKRUPTCY CONSULTATION</strong></td></tr>
<tr><td style='nowrap:nowrap;text-align:right;font-size:13px;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:13px;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:13px;font-family:Arial;width:200px;'>Phone<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:13px;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:13px;font-family:Arial;width:200px;'>Client Type</td><td style='width:250px;'>
<select style='width:250px;' name='LEADCF7' multiple>
<option value='BK'>BK</option>
<option value='LOAN MODS'>LOAN MODS</option>
<option value='BUSINESS LIT'>BUSINESS LIT</option>
<option value='FORECLOSURE'>FORECLOSURE</option>
<option value='STUDENT LOAN'>STUDENT LOAN</option>
<option value='IRS'>IRS</option>
<option value='PERSONAL INJURY'>PERSONAL INJURY</option>
<option value='CIVIL LIT'>CIVIL LIT</option>
<option value='DIVORCE'>DIVORCE</option>
<option value='REAL PROPERTY'>REAL PROPERTY</option>
<option value='SHORT SALE'>SHORT SALE</option>
<option value='UNDECIDED'>UNDECIDED</option>
<option value='ESTATE PLANNING'>ESTATE PLANNING</option>
</select></td></tr>
<tr><td style='nowrap:nowrap;text-align:right;font-size:13px;font-family:Arial;width:200px;'>Description </td><td> <textarea name='Description' maxlength='32000' style='width:250px;'> </textarea></td></tr>
<tr><td style='nowrap:nowrap;text-align:right;font-size:13px;font-family:Arial;width:200px;'>Lead Source</td><td style='width:250px;'>
<select style='width:250px;' name='Lead Source'>
<option value='-None-'>None</option>
<option selected value='Facebook'>Facebook</option>
<option value='Phone Call'>Phone Call</option>
<option value='TV Commercial'>TV Commercial</option>
<option value='Google'>Google</option>
<option value='Website'>Website</option>
<option value='Online Store'>Online Store</option>
<option value='Partner'>Partner</option>
<option value='Public Relations'>Public Relations</option>
<option value='Sales Email Alias'>Sales Email Alias</option>
<option value='Seminar Partner'>Seminar Partner</option>
<option value='Internal Seminar'>Internal Seminar</option>
<option value='Trade Show'>Trade Show</option>
<option value='Web Download'>Web Download</option>
<option value='Web Research'>Web Research</option>
<option value='Chat'>Chat</option>
<option selected value='Facebook'>Facebook</option>
<option value='Twitter'>Twitter</option>
<option value='Google+'>Google+</option>
</select></td></tr>
<tr><td colspan='2' style='text-align:center; padding-top:15px;'>
<input style='font-size:13px;color:#131307' type='submit' value='Submit' />
<input type='reset' style='font-size:13px;color:#131307' value='Reset' />
</td>
</tr>
</table>
<script>
var mndFileds=new Array('First Name','Last Name','Phone','Email');
var fldLangVal=new Array('First Name','Last Name','Phone','Email');
var name='';
var email='';
function checkMandatory() {
for(i=0;i<mndFileds.length;i++) {
var fieldObj=document.forms['WebToLeads2552689000000982744'][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) {}
}
}
}
</script>
</form>
</div>