html Replacing HTML in a web page

Jonnym53 · June 13, 2017

Hi all. Not been here for a while but I'm now in need of some help.

I'm trying to understand what and how to replace some code in a squeeze page. the code i'm trying to replace with new is because I have found the page is being spammed by a spam bot and I have new code to add a capcha addition to the sequence which should stop it.

The page is hosted, along with lots more, at Hostgator, the code comes from I-Contact form builder. I have it saved on my desktop.

The page code, currently, looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Secrets to professional
dog training</title>
<meta name="description"
content="Comprehensive website detailing the secrets that professional dog trainers use to get dogs to behave just the way they wish.">
<meta name="keywords"
content="dog,dogs,training,dogtraining,secrets,professional dog training,dog behaviour,train your dog.">
<meta name="robot" content="index,follow">
<meta name="copyright"
content="Copyright © 2012 my-dogtrainingsecrets. All Rights Reserved.">
<meta name="generator" content="www.onlinemetatag.com">


<style type="text/css">
.auto-style25 {
background-color: #FFFFFF;
}
.auto-style35 {
text-align: center;
font-family: Verdana;
font-weight: 700;
font-style: italic;
font-size: medium;
}
.auto-style36 {
font-style: normal;
font-weight: normal;
}
.auto-style37 {
text-align: center;
font-size: x-small;
}
.auto-style38 {
border: 1px solid #000000;
text-align: center;
background-color: #FFFFE8;
}
.auto-style39 {
text-align: left;
}
.auto-style40 {
font-size: x-small;
}
</style>
</head>
<body leftmargin="190" topmargin="70"
style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#00ffff" link="#0000ee" marginheight="0" marginwidth="0"
vlink="#551a8b">
<center>
<p style="margin-top: 0pt; margin-bottom: 0pt;"> </p>
</center>
<table
style="text-align: left; margin-left: auto; margin-right: auto; width: 890px; height: 592px;"
border="12">
<tbody>
<tr>
<td>
<center>
<p style="margin-top: 0pt; margin-bottom: 0pt;" align="center"><font
style="background-color: rgb(255, 255, 255); font-size: 21pt;"
face="Impact"> Need
to Train Your Dog?  </font>
</p>
<font color="#000000">
</font>
<p style="margin-top: 7px; margin-bottom: 10px;" align="center"><font
color="#000000"><font style="font-size: 32pt;" face="Impact">"Learn
How to Train Your Dog Like a Professional in No Time At All"</font></font></p>
</center>
<table class="auto-style25" style="width: 669px; height: 348px;"
align="center" cellpadding="7">
<tbody>
<tr>
<td valign="top">
<table style="width: 90%;" align="center">
<tbody>
<tr>
<td class="auto-style35" style="width: 592px;"
valign="top"> <font color="#000000" face="Verdana, Arial, Helvetica">
<strong>"That's
right. You Too Can Learn To Train
Your Dog To Be As Obedient as a Crufts Champion. This <big
style="font-weight: bold; color: rgb(255, 0, 0);">Free!</big>
Report will Show
You How!"<br>
<br>
</strong> <span class="auto-style36">Simply enter
your primary email address in the form<br>
below to <strong>get instant
access</strong>...<br>
</span><strong><br>
</strong><strong>
</strong>
<table style="width: 90%;" class="auto-style25"
align="center">
<tbody>
<tr>
<td class="auto-style25"> <img
src="images/s3-green_l.png" style="float: right;" height="129"
width="120"></td>
<td class="auto-style38" style="width: 257px;">
<form method="post"
action="https://app.icontact.com/icp/signup.php" name="icpsignup"
id="icpsignup1839" accept-charset="UTF-8"
onsubmit="return verifyRequired1839();"><input name="redirect"
value="http://my-dogtrainingsecrets.com/articles/how-to-train-your-dog-quickly-and-effectively/"
type="hidden"> <input name="errorredirect"
value="http://my-dogtrainingsecrets.com/articles/how-to-train-your-dog-quickly-and-effectively/"
type="hidden"><input name="listid" value="44525" type="hidden"><input
name="specialid:44525" value="CUIP" type="hidden"><input
name="clientid" value="871932" type="hidden"><input name="formid"
value="3813" type="hidden">
<input name="reallistid" value="1"
type="hidden"><input name="doubleopt" value="0" type="hidden">
<table class="signupframe" border="0"
cellpadding="5" cellspacing="0" width="260">
<tbody>
<tr>
<td valigh="top" class="auto-style39"
style="width: 101px;">First
Name </td>
<td align="left"> <input
name="fields_fname" type="text"></td>
</tr>
<tr>
<td aligh="top" class="auto-style39"
style="width: 101px;">
<span class="required">*</span>
Email </td>
<td align="left"> <input
name="fields_email" type="text"></td>
</tr>
<tr>
<td style="width: 101px;"> </td>
<td class="auto-style40">* = Required
Field</td>
</tr>
<tr>
<td style="width: 110px;"> </td>
<td><input name="Submit"
value="Get Instant Access" type="submit"></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
var icpForm1839 = document.getElementById('icpsignup1839');
if (document.location.protocol === "https:")
icpForm1839.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired1839() {
if (icpForm1839["fields_email"].value == "") {
icpForm1839["fields_email"].focus();
alert("The Email field is required.");
return false;
}
return true;
}
</script></td>
<td class="auto-style25"> <img
src="images/s3-green_r.png" style="float: left;" height="129"
width="120"></td>
</tr>
</tbody>
</table>
<br>
<table style="width: 63%;" align="center">
<tbody>
<tr>
<td> <img src="images/nospaming.png"
height="17" width="40"></td>
<td class="auto-style37">Your privacy is
protected. Your information will never be shared.  We hate
spam
too! </td>
</tr>
</tbody>
</table>
<br>
</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The Code I'm trying to add has 2 versions. I think the long one is meant to be posted as HTML on a web page.

The short version is:

The long version is:

</style>

#ic_signupform .elcontainer.center-aligned .formEl {
margin-right: auto;
margin-left: auto;
}

#ic_signupform .elcontainer.right-aligned .formEl {
margin-left: auto;
}

#ic_signupform .form-header {

display: none;

background: #ffffff;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 10px; /* using padding on purpose */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
border-radius: calc(0px - 1px) calc(0px - 1px) 0 0;
text-align: center;
font-size: 150%;
color: #333333;
border-bottom: 1px solid #dddddd;
}

#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-input label,
#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-dropdown label,
#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-checkbox h3,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-input label,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-dropdown label,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-checkbox h3 {
width: 30%;
}

#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-checkbox h3,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-checkbox h3 {
line-height: 3em;
}

#ic_signupform .elcontainer.tight.inline-label-left .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.tight.inline-label-left .formEl.fieldtype-checkbox h3,
#ic_signupform .elcontainer.tight.inline-label-right .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.tight.inline-label-right .formEl.fieldtype-checkbox h3 {
line-height: 2em;
}

#ic_signupform .elcontainer.generous.inline-label-left .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.generous.inline-label-left .formEl.fieldtype-checkbox h3,
#ic_signupform .elcontainer.generous.inline-label-right .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer.generous.inline-label-right .formEl.fieldtype-checkbox h3 {
line-height: 4em;
}

#ic_signupform .elcontainer.inline-label-left .formEl input[type="text"],
#ic_signupform .elcontainer.inline-label-left .formEl select,
#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-radio .option-container,
#ic_signupform .elcontainer.inline-label-left .formEl.fieldtype-checkbox .option-container,
#ic_signupform .elcontainer.inline-label-right .formEl input[type="text"],
#ic_signupform .elcontainer.inline-label-right .formEl select,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-radio .option-container,
#ic_signupform .elcontainer.inline-label-right .formEl.fieldtype-checkbox .option-container {
width: 70%;
}

#ic_signupform .elcontainer.hidden-label .formEl.required:before {
color: #000000;
}

#ic_signupform .elcontainer .formEl {
font-size: 1em;
}

#ic_signupform .elcontainer .formEl.fieldtype-input label,
#ic_signupform .elcontainer .formEl.fieldtype-dropdown label,
#ic_signupform .elcontainer .formEl.fieldtype-radio h3,
#ic_signupform .elcontainer .formEl.fieldtype-checkbox h3 {
font-size: 100%;
font-weight: bold;
color: #226699;
}

#ic_signupform .elcontainer .formEl.fieldtype-input input[type="text"],
#ic_signupform .elcontainer .formEl.fieldtype-dropdown select {
background-color: #ffffff;
border: 1px solid #666666;
border-radius: 0px;
}

#ic_signupform .elcontainer .formEl.fieldtype-input input[type="text"],
#ic_signupform .elcontainer .formEl.fieldtype-dropdown select,
#ic_signupform .elcontainer .formEl.fieldtype-radio label,
#ic_signupform .elcontainer .formEl.fieldtype-checkbox label {
font-size: 100%;
}

#ic_signupform .elcontainer .formEl input[type="text"]::-moz-placeholder {
color: #bdbdbf;
font-family: inherit;
}

#ic_signupform .elcontainer .formEl input[type="text"]::-webkit-input-placeholder {
color: #bdbdbf;
font-family: inherit;
}

#ic_signupform .elcontainer .formEl input[type="text"]:-ms-input-placeholder {
color: #bdbdbf;
font-family: inherit;
}

#ic_signupform .elcontainer .formEl input[type="text"],
#ic_signupform .elcontainer .formEl select,
#ic_signupform .elcontainer .formEl .option-container label {
color: #000000;
font-family: inherit;
}

#ic_signupform .elcontainer.inline-button .submit-container {
   display: inline-block;
   box-sizing: border-box;
   right: -.5em;
   padding: 0 1em 0 0;
   position: relative;
   vertical-align: bottom;
   margin-bottom: 1em;
}

#ic_signupform .elcontainer.inline-button.tight .sortables {
   margin-bottom: -.5em;
}

#ic_signupform .elcontainer.inline-button .sortables {
   margin-bottom: -1em;
}

#ic_signupform .elcontainer.inline-button.generous .sortables {
   margin-bottom: -1.5em;
}

#ic_signupform .elcontainer .submit-container {
text-align: center;
}

#ic_signupform .elcontainer .submit-container input[type="submit"] {
background: #ffffff;
border: 1px solid #666666;
border-radius: 0px;
line-height: 1em;
padding: 9px 53px;
color: #666666;
font-size: 100%;
font-family: inherit;
width: auto;
}</style>

<form id="ic_signupform" captcha-key="6Leg3ykTAAAAAOl-32RMwHSsbwyZA5j84VGnmfnV" captcha-theme="light" method="POST" action="https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=102&cid=871932&lid=7416"><div class="elcontainer tight inline-label-right left-aligned inline-button"><div class="form-header"><h3>Form Heading</h3></div><div class="sortables"><div class="formEl fieldtype-input" style="display: inline-block; width: 100%;" data-validation-type="1" data-label="First Name"><label>First Name<span class="indicator required">*</span></label><input placeholder="" name="data[fname]" type="text"></div><div class="formEl fieldtype-input required" style="display: inline-block; width: 100%;" data-validation-type="1" data-label="Email"><label>Email<span class="indicator required">*</span></label><input placeholder="" name="data" type="text"></div><div class="formEl fieldtype-checkbox required" dataname="listGroups" style="display: none; width: 100%;" data-validation-type="1" data-label="Lists"><h3>Lists<span class="indicator required">*</span></h3><div class="option-container"><label class="checkbox"><input alt="" name="data[listGroups][]" value="44525" checked="checked" type="checkbox">My-dogtrainingsecrets.com</label></div></div><div class="submit-container"><input value="Submit" class="btn btn-submit" type="submit"></div></div><div class="hidden-container"></div></div></form><img src="//app.icontact.com/icp/core/signup/tracking.gif?id=102&cid=871932&lid=7416"/>

The page can be viewed at http://www.my-dogtrainingsecrets.com

I really am lost as HTML is not my forte so I could do with some help to understand and implement .

Look forward to hearing from someone soon.

Thanks

J Morris

UK.

Edited June 13, 2017 by Jonnym53