Using JavaScript for form confirmation message (with Zoho contact form)

Question

I need to get a confirmation message to display after a form has been submitted, preferably right above the form. The form sends details to Zoho CRM (and was generated automatically by the CRM), so some of the values aren't flexible and the other script is generated by the CRM. Also, I wanted a file to begin downloading when the file is submitted, so currently returnURL="/myfile.pdf". Also #2 (which may or may not matter), this form is in a pop up div.

I was trying to inject something like javascript:document.getElementById('message').style.visibility='visible'; in the onSubmit section, but it didn't show my message and it broke the check for required fields.

What should I be doing to get this to work? I don't know JavaScript so I'm at a total loss. Help! (Please!)

Here's my code, with some of the input and select fields omitted for brevity:

<div id="message" style="visibility: hidden;
color: black;
font: 20px/22px sans serif;
border: solid 1px red;
width: 300px;">Thanks a bunch</div>

<form  style="display:inline;" accept-charset="UTF-8" action="https://crm.zoho.com/crm/WebToLeadForm" method="POST" name="WebToLeads202746000001545001" onSubmit='javascript:document.charset="UTF-8"; return checkMandatery()' accept-charset='UTF-8'>
<table id="essentialguide" width="300" border="0" cellspacing="0" cellpadding="5">
<input type='text' style='display:none;' name='xnQsjsdp' value='2KHRA9qO5KM$'/>  <input type='hidden' name='zc_gad' id='zc_gad' value=''/>  
<input type='text' style='display:none;' name='xmIwtLD' value='5H7uZFz1HBbmsqZYnupu@m-@B6-MHnNR'/>  
<input type='text'  style='display:none;' name='actionType' value='TGVhZHM='/>  <input type='text' style='display:none;' name='returnURL' value='http://www.mysite.com/myfile.pdf' />
<tbody>
<tr>
<td>First name: <input type="text" maxlength="40" name="First Name" size="40" /></td>
</tr>
<tr>
<td>Last name: <input type="text" maxlength="80" name="Last Name" size="40" /></td>
</tr>
<tr>
<td>Email: <input type="text" maxlength="100" name="Email" size="40" /></td>
</tr>
<tr>
<td style="background-color: #fff;" colspan="2" align="center"><input class="submit" type="submit" name="save" value="Submit" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[ var mndFileds=new Array('First Name','Last Name','Email');var fldLangVal=new Array('First Name','Last Name','Email');function checkMandatery(){for(i=0;i<mndFileds.length;i++){ var fieldObj=document.forms['WebToLeads202746000001545001'][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;}}}}}
// ]]></script>

</form>

Answer 1

Best option is to use a Zoho Creator Form. Using Zoho Creator, you can push data to Zoho CRM, and perform other actions (like opening the File download URL.)

Answer 2

Integrating with ZCRM is a paid feature If you still want to "push ZC data into CRM" you can try using CRM API https://www.zoho.com/crm/help/api/api-methods.html