Sign-up form problem

Sign-up form problem

I have created a sign up form in campaign but while loading in my wordpress it get broken down:

the bellow are the link one from my site and one from zoho campaign with same code:

https://acrossplatforms.com/television-industry-newsletter-subscription-form/

http://zc.vg/EkdV

  1. Note :I also attached the code
  3. <!--Zoho  Web-Optin Form Starts Here-->
  4. <link href="https://campaigns.zoho.com/css/ui.theme.css" rel="stylesheet" type="text/css" />
  5. <link href="https://campaigns.zoho.com/css/ui.datepicker.css" rel="stylesheet" type="text/css" />
  6. <link href="https://campaigns.zoho.com/css/ui.core.css" rel="stylesheet" type="text/css" />
  7. <script type="text/javascript" src="https://campaigns.zoho.com/js/jquery-1.11.0.min.js"></script>
  8. <script type='text/javascript' src='https://campaigns.zoho.com/js/jquery-migrate-1.2.1.min.js'></script>
  9. <script type="text/javascript" src='https://campaigns.zoho.com/js/ui.datepicker.js'  charset="utf-8"></script>
  10. <script type="text/javascript" src="https://campaigns.zoho.com/js/jquery.form.js"></script>
  11. <script type="text/javascript" src="https://campaigns.zoho.com/js/optin_min.js"></script>
  12. <script type="text/javascript">
  13. var $ZC = jQuery.noConflict();
  14. var trackingText='ZCFORMVIEW';
  15. $ZC(document).ready( function($) {
  16. $ZC("#zc_trackCode").val(trackingText);
  17. $ZC("#fieldBorder").val($ZC("[changeItem='SIGNUP_FORM_FIELD']").css("border-color"));
  18. _setOptin(false,function(th){
  19. /*Before submit, if you want to trigger your event, "include your code here"*/
  20. });

  22. /*Load Captcha For this*/ 
  23.  loadCaptcha('https://campaigns.zoho.com/campaigns/CaptchaVerify.zc?mode=generate');

  25.  /*Tracking Enabled*/ 
  26.  trackSignupEvent(trackingText);
  27.  });
  28. </script>

  30. <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  31. <div id="customForm">
  32. <div id="SIGNUP_PAGE" style="padding: 0px; color: rgb(204, 204, 204); font-family: Geneva; font-size: 10px; overflow-y: auto; background-color: rgb(212, 205, 212);" name="SIGNUP_PAGE">
  33. <div style="margin:0px auto" name="" changename="" changeid="">
  34. <div id="imgBlock" style="margin: 0px auto; width: 600px; text-align: center;" name="LOGO_DIV" logo="true"></div>
  35. </div>
  36. <br>
  37. <div id="signupMainDiv" style="margin: 0px auto; width: 100%; min-width: 230px; max-width: 600px;" changename="SIGNUPFORM" changeid="SIGNUPFORM" signupform"="">
  38. <div "="">
  39. <div style="position:relative;top: 30px;">
  40. <div id="Zc_SignupSuccess" style="display:none;position:absolute;margin-left:4%;width:90%;background-color: white; padding: 3px; border: 3px solid rgb(194, 225, 154);  margin-top: 10px;margin-bottom:10px; ">
  41. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  42. <tbody>
  43. <tr>
  44. <td width="10%">
  45. <img align="absmiddle" class="successicon" src="https://campaigns.zoho.com/images/challangeiconenable.jpg">
  46. </td>
  47. <td>
  48. <span id="signupSuccessMsg" style="color: rgb(73, 140, 132); font-family: sans-serif; font-size: 14px;">&nbsp;&nbsp;Thank you for Signing Up</span>
  49. </td>
  50. </tr>
  51. </tbody>
  52. </table>
  53. </div>
  54. </div>
  55. <form id="zcampaignOptinForm" style="margin:0px;" action="https://zc1.maillist-manage.com/campaigns/weboptin.zc" method="POST" target="_zcSignup">
  56. <div id="SIGNUP_BODY_ALL" style="border: 0px rgb(176, 174, 174);" name="SIGNUP_BODY_ALL">
  57. <h1 id="SIGNUP_HEADING" style="margin: 0px; padding: 0px; border: 6px rgb(91, 91, 91); border-image: none; text-align: left; color: rgb(12, 130, 104); font-family: Arial; font-size: 20px; word-break: break-all;" name="SIGNUP_HEADING" changeid="SIGNUP_MSG" changetype="SIGNUP_HEADER">Subscribe to our Newsletters</h1>
  58. <div id="SIGNUP_BODY" style="padding: 1px; text-align: center; color: rgb(68, 68, 68); font-family: Arial; font-size: 12px; background-color: rgb(113, 222, 220);" name="SIGNUP_BODY">
  59. <div style="width:90%; margin:0px auto;text-align:left;">
  60. <div id="SIGNUP_DESCRIPTION" style="line-height:1.6;" changeid="SIGNUP_MSG" changetype="SIGNUP_DESCRIPTION">We believe that as television data increasingly merges with the Internet’s direct response measurements (including the “click”), this merger and the resulting data combinations will be critically important to all television industry participants. Since 2010 Across Platforms has concentrated on building technologies, and collecting data that fit within this paradigm.Across Platforms publishes three newsletters designed to showcase our television industry database and technologies.</div>
  61. <div id="errorMsgDiv" style="display:none;background-color:#FFEBE8;padding:10px 10px; color:#d20000; font-size:11px; margin:10px 0px;border:solid 1px #ffd9d3; margin-top:20px;">&nbsp;&nbsp;Please correct the marked field(s) below</div>
  62. <div>
  63. <div style="font-size:12px; color:#333;font-family:Arial, Helvetica, sans-serif; margin-top:10px;">
  64. <div style="padding:10px 0px 10px 0px;">
  65. <div>
  66. <input name="FIRSTNAME" class="placeholder" style="padding: 2px; border: 1px solid rgb(222, 222, 222); border-image: none; width: 97%; height: 28px; color: rgb(68, 68, 68); text-indent: 5px; font-size: 12px; box-sizing: border-box; background-color: rgb(242, 252, 239);" type="text" maxlength="100" placeholder="First Name" changeitem="SIGNUP_FORM_FIELD">&nbsp;
  70. <span style="color: rgb(0, 179, 173); font-size: 11px;" name="SIGNUP_REQUIRED">*</span>
  72. <span id="dt_FIRSTNAME" style="display:none">1,true,1,First Name,2</span>
  73. </div>
  77. <div style="clear:both"></div>
  81. </div>
  82. <div style="padding:10px 0px 10px 0px;">
  83. <div>
  84. <input name="LASTNAME" class="placeholder" style="padding: 2px; border: 1px solid rgb(222, 222, 222); border-image: none; width: 97%; height: 28px; color: rgb(68, 68, 68); text-indent: 5px; font-size: 12px; box-sizing: border-box; background-color: rgb(242, 252, 239);" type="text" maxlength="100" placeholder="Last Name" changeitem="SIGNUP_FORM_FIELD">&nbsp;<span style="color: rgb(0, 179, 173); font-size: 11px;" name="SIGNUP_REQUIRED">*</span>
  85. <span id="dt_LASTNAME" style="display:none">1,true,1,Last Name,2</span>
  86. </div><div style="clear:both"></div></div>
  87. <div style="padding:10px 0px 10px 0px;">
  88. <div>
  89. <input name="CONTACT_EMAIL" class="placeholder" style="padding: 2px; border: 1px solid rgb(222, 222, 222); border-image: none; width: 97%; height: 28px; color: rgb(68, 68, 68); text-indent: 5px; font-size: 12px; box-sizing: border-box; background-color: rgb(242, 252, 239);" type="text" maxlength="100" placeholder="Contact Email" changeitem="SIGNUP_FORM_FIELD">&nbsp;<span style="color: rgb(0, 179, 173); font-size: 11px;" name="SIGNUP_REQUIRED">*</span>
  90. <span id="dt_CONTACT_EMAIL" style="display:none">1,true,6,Contact Email,2</span>
  91. </div><div style="clear:both"></div></div>
  92. </div><!-- Captcha for Signup -->
  93. <div id="captcha" style="padding:10px 0px 10px 0px; " name="captchaContainer">
  94. <div>
  95. <div style="width:97%;  min-width:170px; margin-top:5px;">
  96. <img style="cursor: pointer; max-width: 200px; float: right;" onclick="loadCaptcha('',this);" src="//campaigns.zoho.com/images/refresh_icon.png">
  97. <div id="captchaDiv" style="height:60px;padding: 20px;background:#fff;border: 1px solid rgb(222, 222, 222);" name="" captcha="true"></div>
  98. </div>
  99. <input class="placeholder" id="captchaText" style="padding: 2px; border: 1px solid rgb(222, 222, 222); border-image: none; width: 97%; height: 28px; color: rgb(68, 68, 68); text-indent: 5px; font-size: 12px; margin-top: 5px; box-sizing: border-box; background-color: rgb(242, 252, 239);" type="text" maxlength="100" placeholder="Captcha" changeitem="SIGNUP_FORM_FIELD">&nbsp;<span style="color: rgb(0, 179, 173); font-size: 11px;" name="SIGNUP_REQUIRED">*</span></div><div style="clear:both"></div></div><!-- Captcha for Signup End--><!-- Other Lists Subscription Start-->
  100. <div id="selectMailingLists" style="margin-top:20px;" identity="mailingLists">
  101. <div style="color: rgb(68, 68, 68); font-family: Arial; font-size: 12px;" name="SIGNUP_FORM_LIST" changetype="SIGNUP_FORM_LIST">By checking any of the publications listed below , you expressly agree and accept our privacy policy, and you also agree (at no cost to you) to subscribe to the publications that you have selected.</div>
  102. <table width="96%" class="mt10" id="listRelTable" border="0" cellspacing="0" cellpadding="0">
  103. <tbody>
  104. <tr>
  105. <td width="150">
  106. <label style="color: rgb(68, 68, 68); font-family: Arial; font-size: 12px;" name="SIGNUP_FORM_LIST">
  107. <div align="left" class="txtnormal bdr_btm" style="padding:10px" onmouseover="this.className='txtnormal bdr_btm_hover';" onmouseout="this.className='txtnormal bdr_btm';" valign="top">
  108. <input name="listCheckBox" id="323000001211179" type="checkbox" value="323000001211179">Home Shopping Industry Report</div>
  109. </label>
  110. </td>
  111. </tr>
  112. <tr>
  113. <td width="150">
  114. <label style="color: rgb(68, 68, 68); font-family: Arial; font-size: 12px;" name="SIGNUP_FORM_LIST">
  115. <div align="left" class="txtnormal bdr_btm" style="padding:10px" onmouseover="this.className='txtnormal bdr_btm_hover';" onmouseout="this.className='txtnormal bdr_btm';" valign="top">
  116. <input name="listCheckBox" id="323000010695389" type="checkbox" value="323000010695389">MVPD Metrics Report</div>
  117. </label>
  118. </td>
  119. </tr>
  120. <tr>
  121. <td width="150">
  122. <label style="color: rgb(68, 68, 68); font-family: Arial; font-size: 12px;" name="SIGNUP_FORM_LIST">
  123. <div align="left" class="txtnormal bdr_btm" style="padding:10px" onmouseover="this.className='txtnormal bdr_btm_hover';" onmouseout="this.className='txtnormal bdr_btm';" valign="top">
  124. <input name="listCheckBox" id="323000000411026" type="checkbox" value="323000000411026">Subchannel Report</div>
  125. </label>
  126. </td>
  127. </tr>
  128. </tbody>
  129. </table>
  130. </div>
  131. <div style=" border-bottom:#ebebeb dotted 1px; margin-top:10px; clear:both;"></div>
  132. <div id=" REQUIRED_FIELD_TEXT" style="padding: 10px 10px 10px 0px; color: rgb(0, 179, 173); font-size: 11px;" name="SIGNUP_REQUIRED" changetype="REQUIRED_FIELD_TEXT">*Required Fields</div>
  133. <div style="padding:10px; text-align:center;">
  134. <input name="SIGNUP_SUBMIT_BUTTON" id="zcWebOptin" style="background-position: bottom; padding: 5px 20px; outline: invert; border-radius: 10px; border: 2px solid rgb(0, 214, 207); text-align: center; color: rgb(255, 255, 255); font-size: 17px; background-repeat: repeat-x; cursor: pointer; -webkit-appearance: none; background-color: rgb(0, 214, 207);" type="button" value="Subscribe" action="Save" changetype="SIGNUP_SUBMIT_BUTTON_TEXT">
  135. </div>
  136. </div>
  137. </div>
  138. </div><!-- Do not edit the below Zoho Campaigns hidden tags -->
  139. <input id="fieldBorder" type="hidden" value="">
  140. <input name="zc_trackCode" id="zc_trackCode" onload="" type="hidden" value="">
  141. <input name="submitType" id="submitType" type="hidden" value="optinCustomView">
  142. <input name="lD" id="lD" type="hidden" value="1125c44d9d70ba">
  143. <input name="emailReportId" id="emailReportId" type="hidden" value="">
  144. <input name="zx" id="cmpZuid" type="hidden" value="15e0351">
  145. <input name="zcvers" type="hidden" value="2.0">
  146. <input name="oldListIds" id="allCheckedListIds" type="hidden" value="">
  147. <input name="mode" id="mode" type="hidden" value="OptinCreateView">
  148. <input name="zcld" id="zcld" type="hidden" value="1125c44d9d70ba">
  149. <input id="document_domain" type="hidden" value="zoho.com">
  150. <input id="zc_Url" type="hidden" value="zc1.maillist-manage.com">
  151. <input name="zc_formIx" id="zc_formIx" type="hidden" value="19f1555a995ee12e2897067c18174dfa"><!-- End of the campaigns hidden tags --></div>
  152. </form>
  153. </div>
  154. <div id="privacyNotes" style="margin: 0px auto;margin-top:20px;text-align:left;" name="SIGNUPFORM" identity="privacyNotes">
  155. <span>Note: It is our responsibility to protect your privacy and we guarantee that your email address will be completely confidential.</span>
  156. </div>
  157. </div>
  158. </div>
  159. <img id="refImage" style="display: none; max-width: 200px;" onload="referenceSetter(this)" src="https://zc1.maillist-manage.com/images/spacer.gif">
  160. </div>
  161. <div id="zcOptinOverLay" style="display:none;text-align: center; background-color: rgb(0, 0, 0); opacity: 0.5; z-index: 100; position: fixed; width: 100%; top: 0px; left: 0px; height: 988px;" oncontextmenu="return false"></div>
  162. <div id="zcOptinSuccessPopup" style="display:none;z-index: 9999;width: 800px; height: 40%;top: 84px;position: fixed; left: 26%;background-color: #FFFFFF;border-color: #E6E6E6; border-style: solid; border-width: 1px;  box-shadow: 0 1px 10px #424242;padding: 35px;">
  163. <span id="closeSuccess" style="position: absolute;top: -16px;right:-14px;z-index:99999;cursor: pointer;">
  164. <img src="https://campaigns.zoho.com/images/videoclose.png">
  165. </span>
  166. <div id="zcOptinSuccessPanel"></div>
  167. </div>

  169. <!--Zoho  Web-Optin Form Ends Here-->